Serve TailwindCSS with django_plotly_dash

I have a Dash app in Django being served via django-plotly-dash and I'm using Tailwind for the styling across the site. Tailwind seems to be working everywhere except for the Dash app, where it is kind of working, but seems to be overwritten by the Bootstrap at some points.

I can see the Tailwind styling without any issues if I run the Dash app on its own, but not when embedded in Django.

Here's the view inside Django (and the code for this basic example):

And here it is (with garish colors to see the difference) while running Dash and Tailwind without Django:

Some of the Tailwind styling is being applied, such as the container mx-auto bit of the Dash layout, but others (e.g. coloring) are being dropped.

Here's the code for the Dash app, which is split into layout.py, callbacks.py, and dashboard.py:

layout.py:

from dash import dcc, html

layout = html.Div(
    className="bg-green-100 container mx-auto my-auto px-15 py-5",
    children=[
        html.Div(
            className="bg-red-100 py-5",
            children=[
                dcc.Dropdown(
                    id="symbol-input",
                    options=[
                        {"label": "Apple", "value": "AAPL"},
                        {"label": "Tesla", "value": "TSLA"},
                        {"label": "Meta", "value": "META"},
                        {"label": "Amazon", "value": "AMZN"}
                    ],
                    searchable=True,
                    value="AAPL",
                )
            ]),
        html.Div(
            className="max-w-full shadow-2xl rounded-lg border-3",
            id="price-chart"
        )
    ]
)

callbacks.py:

from dash import dcc, html
from dash.dependencies import Input, Output
import yfinance as yf
import plotly.express as px

def register_callbacks(app):
    
    @app.callback(
        Output("price-chart", "children"),
        Input("symbol-input", "value"),
    )
    def get_data(symbol):
        df = yf.Ticker(symbol).history()
        fig = px.line(
            x=df.index,
            y=df.Close,
            title=f"Price for {symbol}",
            labels={
                "x": "Date",
                "y": "Price ($)",
            }
            )
        return dcc.Graph(
            id="price-chart-1",
            figure=fig
            )

dashboard.py:

from django_plotly_dash import DjangoDash
from .layout import layout
from .callbacks import register_callbacks

app = DjangoDash("Dashboard")
app.css.append_css({"external_url": "/static/css/output.css"})

app.layout = layout
register_callbacks(app)

The Tailwind CSS is in /static/css/output.css and is linked as the stylesheet in the base.html. To ensure it's working correctly in Django, I put a simple homepage up and copied code from Tailwind's site to confirm that it works. Again, it's partially coming through in the Dash app, but seems to get overwritten.

After viewing your repository, I think the problem is not that the Bootstrap CSS overrides the tailwind's one, the problem here is that the classes that you defined are simply not scanned by Tailwindcss. I'm going to assume that you generate the output.css using this command:

> npx tailwindcss -i ./static/css/input.css -o ./static/css/output.css --watch

If that's what you did to generate the CSS, then I can understand what's going on here. That's simply because of your tailwind.config.js file looks like this:

...
  content: [
    "./static/css/*.html",
    "./templates/*.html",
    "./static/css/*.js",
  ],
...

You said that container, mx-auto classes are applied, but not the color classes (e.g. bg-green-100, bg-red-100), that's simply because container, mx-auto classes are defined in one of "./static/css/*.html", "./templates/*.html", "./static/css/*.js", while bg-green-100, bg-red-100 are defined in other directory than those directories (it's defined in apps\dashboard\layout.py).

The easiest fix is to add the directories in which CSS classes need to be applied to the tailwind.config.js file, e.g.:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./static/css/*.html",
    "./templates/*.html",
    "./static/css/*.js",
    "./apps/**" // add this line
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This will add all classes from any files or any files in ./apps directory or subdirectories to the tailwindcss build process. Don't forget to run the tailwindcss cli command (the one I mentioned earlier) every time you run the server though.