Подача TailwindCSS с помощью django_plotly_dash

У меня есть приложение Dash на Django, которое обслуживается через django-plotly-dash, и я использую Tailwind для стилизации всего сайта. Tailwind, похоже, работает везде, кроме приложения Dash, где он вроде как работает, но в некоторых местах кажется, что его переписывает Bootstrap.

Я могу видеть стилизацию Tailwind без каких-либо проблем, если я запускаю приложение Dash самостоятельно, но не когда оно встроено в Django.

Вот представление внутри Django (и код для этого базового примера): dash app not showing Tailwind

А вот это (с аляповатыми цветами, чтобы увидеть разницу) при запуске Dash и Tailwind без Django: Ugly Dash app with Tailwind

Некоторые стили Tailwind применяются, например, container mx-auto бит макета Dash, но другие (например, раскраска) отбрасываются.

Вот код для приложения Dash, который разделен на layout.py, callbacks.py и 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)

CSS Tailwind находится в /static/css/output.css и связан как таблица стилей в base.html. Чтобы убедиться, что он правильно работает в Django, я разместил простую домашнюю страницу и скопировал код с сайта Tailwind , чтобы убедиться, что он работает. Опять же, он частично работает в приложении Dash, но, похоже, перезаписывается

Возможно, что Bootstrap CSS конфликтует с Tailwind CSS в вашем приложении Dash при встраивании в Django. Чтобы решить эту проблему, вы можете попробовать следующие подходы:

Загрузите Tailwind CSS перед Bootstrap CSS: Убедитесь, что Tailwind CSS загружен первым в HTML-файл, до Bootstrap CSS. Таким образом, стили, определенные в Tailwind CSS, будут иметь приоритет над стилями Bootstrap.

Использование !important: Вы можете добавить флаг !important к вашим CSS-стилям Tailwind, чтобы убедиться, что они имеют приоритет над стилями Bootstrap. Однако такой подход можно считать крайним средством и не рекомендуется, так как это может усложнить поддержку стилей в будущем.

Использование специфических селекторов: Вы можете сделать стили Tailwind CSS более конкретными, используя селекторы, которые нацелены только на те компоненты, которые вы хотите стилизовать в вашем приложении Dash. Таким образом, стили будут иметь приоритет над стилями Bootstrap только для этих компонентов.

Создайте пользовательскую сборку Bootstrap: Вы можете настроить CSS Bootstrap, создав пользовательскую сборку, включающую только те стили, которые вам нужны. Это уменьшит вероятность конфликтов стилей между Bootstrap и Tailwind.

Я надеюсь, что один из этих подходов поможет вам решить проблему со стилями в вашем приложении Dash. Если у вас все еще есть проблемы, пожалуйста, предоставьте больше информации о вашей настройке и конкретных компонентах, с которыми у вас возникли проблемы, и я буду рад помочь дальше.

После просмотра вашего репозитория, я думаю, что проблема не в том, что Bootstrap CSS переопределяет tailwind's CSS, проблема в том, что классы, которые вы определили, просто не сканируются Tailwindcss. Я собираюсь предположить, что вы генерируете output.css с помощью этой команды:

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

Если это то, что вы сделали для генерации CSS, тогда я могу понять, что здесь происходит. Это просто потому, что ваш файл tailwind.config.js выглядит следующим образом:

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

Вы сказали, что применяются классы container, mx-auto, но не классы цветов (например. bg-green-100, bg-red-100), это просто потому, что container, mx-auto классы определены в одном из "./static/css/*.html", "./templates/*.html", "./static/css/*.js", а bg-green-100, bg-red-100 определены не в этих каталогах (они определены в apps\dashboard\layout.py).

Самое простое решение - добавить директории, в которых необходимо применить классы CSS, в файл tailwind.config.js, например:

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

Это добавит все классы из любых файлов или любых файлов в ./apps директории или поддиректориях в процесс сборки tailwindcss. Не забудьте выполнить команду tailwindcss cli (ту, о которой я говорил ранее) каждый раз, когда вы запускаете сервер.

Вернуться на верх