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