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.

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)

[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.

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)

[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.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:app