How to apply Tailwind styling

[tclasen]

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.

[rmorshea]

You should be able to link the tailwind stylesheet into your app. Then you'll be able to use all the normal tailwind classes.

fromidomimportrun, component, html@componentdefMyComponent(): returnhtml._( 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)

[rmorshea]

I just updated my answer to reflect the fact that you should use "className" instead of "class".

[ethanopp]

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", } ),

[Archmonger]

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.

[Archmonger]

The example above was using html.script instead of html.link, and was missing the rel property.

fromidomimportrun, component, html@componentdefMyComponent(): returnhtml._( 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)

[ethanopp]

Okay thanks - will stick with the html.link and use className

[alonahmias]

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

[Archmonger]

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.pyfromreactpyimportcomponent, htmlfromreactpy.executors.asgiimportReactPyfromservestaticimportServeStaticASGI@componentdefhello_world(): returnhtml.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:app