Creating a Fruit Sales Visualization Dashboard with Python Dash and Tailwind CSS

Data visualization often relies on charting tools like Tableau or Power BI, but for customized, programmatic dashboards developers can use Python libraries such as Dash, Plotly, and Pandas, combined with Tailwind CSS for rapid UI styling.

The example builds a fruit‑sales report, showing sales amounts across cities, and illustrates the complete workflow from installing dependencies to running the app.

Installation and imports

import dash
import pandas as pd
import plotly.express as px
from dash import dcc, html

Integrating Tailwind CSS

external_script = ["https://tailwindcss.com/", {"src": "https://cdn.tailwindcss.com"}]
app = dash.Dash(__name__, external_scripts=external_script)
app.scripts.config.serve_locally = True

Creating sample data

df = pd.DataFrame({
    "Fruit": ["苹果", "橙子", "香蕉", "苹果", "橙子", "香蕉"],
    "Amount": [4.2, 1.0, 2.1, 2.32, 4.20, 5.0],
    "City": ["北京", "北京", "北京", "上海", "上海", "上海"]
})
print(df)

From this DataFrame we compute basic statistics:

fruit_count = df.Fruit.count()
total_amt = df.Amount.sum()
city_count = df.City.count()
variables = df.shape[1]

Generating charts with Plotly Express

fig = px.bar(df, x="Fruit", y="Amount", color="City", barmode="group")
fig1 = px.box(df, x="City", y="Amount", color="City")

The layout is defined using Dash's HTML components, with Tailwind utility classes for styling. Key sections include a header, summary cards displaying total sales, fruit count, city count, and variable count, followed by two graphs placed side‑by‑side.

app.layout = html.Div(
    html.Div(
        children=[
            html.Div(
                children=[
                    html.H1("水果销售--可视化报表", className="py-3 text-5xl font-bold text-gray-800"),
                    html.Div("Python with Dash = 💝.", className="text-left prose prose-lg text-2xl py-3 text-gray-600"),
                ],
                className="w-full mx-14 px-16 shadow-lg bg-white mt-14 px-6 container my-3"
            ),
            # ... (cards and graphs omitted for brevity)
        ],
        className="bg-[#ebeaee] flex py-14 flex-col items-center justify-center"
    ),
    className="bg-[#ebeaee] container mx-auto px-14 py-4"
)

Finally, the application is launched locally:

if __name__ == '__main__':
    # debug mode, port 7777
    app.run_server(debug=True, threaded=True, port=7777)
    # normal mode (no debug button)
    # app.run_server(port=7777)

Visiting http://127.0.0.1:7777 displays the fully styled, interactive dashboard, which can be extended for real‑time data updates.