我在Django有一个Dash应用程序,通过django-plotly-dash
提供服务,我在整个网站上使用Tailwind进行造型。除了Dash应用程序之外,Tailwind似乎在任何地方都能正常工作,但在某些时候似乎被Bootstrap覆盖了。
如果我单独运行Dash应用程序,但在Django中嵌入时,我可以毫无问题地看到Tailwind样式。
下面是Django内部的视图(以及这个基本示例的代码):
这里是在没有Django的情况下运行Dash和Tailwind时的情况(用鲜艳的颜色来区别):
一些尾风样式正在应用,例如Dash布局的container mx-auto
位,但其他样式(例如着色)正在删除。
以下是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)
Tailwind CSS位于/static/css/output.css
中,并与base.html
中的样式表链接。为了确保它在Django中正常工作,我建立了一个简单的主页,并从Tailwind的网站复制了代码,以确认它工作正常。再次,它在Dash应用程序中部分实现,但似乎被覆盖。