Creating a Dash app with Tailwind CSS

Dash Python
1

Hello everyone,

I’m planning to create a Dash app using Tailwind CSS and an open-source/free UI kit. I would love to hear about your experiences with similar projects. Specifically, I’m looking for recommendations on UI kits that offer a wide variety of components and are easy to configure with Dash.

Here are a few options I’ve come across:

1.TailGrids : Tailwind UI Component Library, Kit and Templates | TailGrids
2. DaisyUI : daisyUI — Tailwind CSS Components
3. shadcnUI : shadcn/ui

If you have any other suggestions or tips for setting up such projects, please share them!

Thank you!

2

Hi @Fatima24

Have you tried dash-bootstrap-components or dash-mantine-components?

I haven’t used tailwind, but I’ve heard that a lot of people passionately dislike it:

While Tailwind CSS has its benefits, some argue against using it due to potential issues like overly cluttered HTML with long class names, difficulty maintaining complex styles, poor separation of concerns between HTML and CSS, and potential limitations when dealing with dynamic styling or complex design systems, which can lead to code that is harder to read, understand, and refactor over time

3

YMMV with Tailwind but if you’ve never used it before I’d give it a shot. Personally, I’m a convert and I’m not sure I’d ever go back to working with plain CSS again.

Tailwind is pretty easy to implement and while there’s a learning curve you can learn it as you go and adopt more of its capabilities as you get more comfortable. A lot of what it’s good at (themes, animations, dark-mode) you’re not likely to benefit from building Dash apps but I like it for a quick way to get nice basic, responsive design implemented.

I’m not sure why you’d need a UI kit (though I do love shadcn) and I’d recommend just including Tailwind directly via CDN…

A snippet is below.

app = Dash(
    __name__,
    external_scripts=["https://unpkg.com/@tailwindcss/browser@4"],
)

app.layout = html.Div(
    [
        html.H1(
            "Here's My Lovely Report",
            className="text-3xl font-bold justify-self-center w-100 mx-auto my-8 text-slate-700",
        ),
        dcc.Dropdown(
            id="subject-dropdown",
            options=list(df["Subject"].unique()),
            className="w-80 mx-auto",
        ),
        dcc.Graph(id="progress-graph", className="h-lvh"),
    ]
)