I have a Dashboard application in Django being offered by means of django-plotly-dash and also I’m making use of Tailwind for the designing throughout the website. Tailwind appears to be functioning all over besides the Dashboard application, where it is sort of functioning, yet appears to be overwritten by the Bootstrap eventuallies.
I can see the Tailwind designing with no concerns if I run the Dashboard application by itself, yet not when installed in Django.
Below’s the sight inside Django (and also the code for this fundamental instance):.
And Also below it is (with garish shades to see the distinction) while running Dashboard and also Tailwind without Django:.
Several Of the Tailwind designing is being used, such as the container mx-auto little the Dashboard design, yet others (e.g. tinting) are being went down.
Below’s the code for the Dashboard application, which is divided right into layout.py, callbacks.py, and also dashboard.py:
layout.py:
from dashboard import dcc, html.
design = html.Div(.
className=" bg-green-100 container mx-auto my-auto px-15 py-5",.
youngsters =[
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= Real,.
worth=" AAPL",
).
],.
html.Div(.
className=" max-w-full shadow-2xl rounded-lg border-3",.
id=" price-chart"
).
]).
callbacks.py:
from dashboard import dcc, html.
from dash.dependencies import Input, Result.
import yfinance as yf.
import plotly.express as px.
def register_callbacks( application):.
@app. callback(.
Result(" price-chart", "youngsters"),.
Input(" symbol-input", "worth"),.
).
def get_data( sign):.
df = yf.Ticker( sign). background().
fig = px.line(.
x= df.index,.
y= df.Close,.
title= f" Rate for {sign} ",.
tags= {
" x": "Day",.
" y": "Rate ($)",.
}
).
return dcc.Graph(.
id=" price-chart-1",
number= fig.
).
dashboard.py:
from django_plotly_dash import DjangoDash.
from.layout import design.
from.callbacks import register_callbacks.
application = DjangoDash(" Control Panel").
app.css.append _ css( {"external_url": "/ static/css/output. css"} ).
app.layout = design.
register_callbacks( application).
The Tailwind CSS remains in / static/css/output. css and also is connected as the stylesheet in the base.html To guarantee it’s functioning properly in Django, I placed a basic homepage up and also duplicated code from Tailwind’s website to verify that it functions. Once more, it’s partly coming via in the Dashboard application, yet appears to obtain overwritten.
