-
-
Notifications
You must be signed in to change notification settings - Fork 328
-
Hello IDOM family. I'm interested to see if there is an example of how to use tailwind to style the application created by IDOM.
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 2 comments 10 replies
-
You should be able to link the tailwind stylesheet into your app. Then you'll be able to use all the normal tailwind classes.
from idom import run, component, html @component def MyComponent(): return html._( html.link( { "href": "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css", "rel": "stylesheet", } ), html.h1( {"className": "text-3xl font-bold underline text-clifford"}, "my heading" ), ) run(MyComponent)
Beta Was this translation helpful? Give feedback.
All reactions
-
I just updated my answer to reflect the fact that you should use "className" instead of "class".
Beta Was this translation helpful? Give feedback.
All reactions
-
I just updated my answer to reflect the fact that you should use
"className"instead of"class".
That still does not work for me, however this does - and className is not needed
html.link( { "href": "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css", "rel": "stylesheet", } ),
Beta Was this translation helpful? Give feedback.
All reactions
-
React will handle the "class" keyword if in debug mode, but you'll get an error within your browser console. As such, "className" should always be used.
However that is a separate issue. I'll take a quick peek and see why this example isn't working.
Beta Was this translation helpful? Give feedback.
All reactions
-
The example above was using html.script instead of html.link, and was missing the rel property.
from idom import run, component, html @component def MyComponent(): return html._( html.link( { "href": "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css", "rel": "stylesheet", } ), html.h1( {"className": "text-3xl font-bold underline text-clifford"}, "my heading" ), ) run(MyComponent)
Beta Was this translation helpful? Give feedback.
All reactions
-
Okay thanks - will stick with the html.link and use className
Beta Was this translation helpful? Give feedback.
All reactions
-
Is there a way to use tailwindcss without a link? To install via npm install and use it? Because i want to deploy it in an offline on prem servers
Beta Was this translation helpful? Give feedback.
All reactions
-
A link element is required, however, you can use a local link instead.
Here is an example using ReactPy v2.0.0b2 and ServeStatic
> pip install reactpy[asgi]==2.0.0b2 servestatic uvicorn[standard] -U# FILENAME: main.py from reactpy import component, html from reactpy.executors.asgi import ReactPy from servestatic import ServeStaticASGI @component def hello_world(): return html.button({"className": "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"}, "Hello, World!") app = ReactPy( hello_world, html_head=html.head( html.title("My App"), html.meta({"charset": "UTF-8"}), html.link({"href": "/static/tailwind.min.css", "rel": "stylesheet"}), ), ) # Note: This line assumes you downloaded a tailwind distributable from NPM and placed it in a directory named "static" app = ServeStaticASGI(my_app, root="static", prefix="/static/")
> uvicorn main:appBeta Was this translation helpful? Give feedback.