Dash TailwindCSS Demos

这是一个展示如何在 Plotly Dash 应用中使用 Tailwind CSS 的示例项目集合。通过 dash-tailwindcss-plugin 插件，可以轻松地在 Dash 应用中集成 Tailwind CSS，实现现代化的 UI 设计。

项目概述

本项目包含了多个示例，展示了不同场景下如何使用 dash-tailwindcss-plugin 创建美观的用户界面。

安装依赖

pip install -r requirements.txt

运行示例

每个示例都是一个独立的 Dash 应用，可以直接运行：

# 运行第一个示例
python py/demo1.py

# 运行第二个示例
python py/demo2.py

# 以此类推...

技术特点

1. 无缝集成: 使用 dash-tailwindcss-plugin 插件，无需手动配置 Tailwind CSS
2. 响应式设计: 所有示例都支持响应式布局，在不同设备上都能良好显示
3. 现代化UI: 利用 Tailwind CSS 的实用类创建美观的用户界面
4. 易于扩展: 代码结构清晰，便于在此基础上构建更复杂的应用

插件配置说明

在每个示例中，都会通过以下方式初始化插件：

from dash_tailwindcss_plugin import setup_tailwindcss_plugin

setup_tailwindcss_plugin(
    mode="offline",       # 离线模式
    download_node=True,   # 自动下载 Node.js（如果系统中没有）
    clean_after=False,    # 开发环境下设为 False 以提高热重载速度
)

使用AI辅助开发

项目中的 ai.md 文件提供了一些有用的提示词示例，可以帮助你：

1. 将现有的包含 Tailwind CSS 类的 HTML 代码转换为 Dash 代码
2. 根据需求生成全新的代码

说明

部分示例来自于Tailwind CSS官网和tailwind-cards项目，在此表示感谢。

许可证

本项目基于 MIT 许可证发布，请参阅 LICENSE 文件了解更多详情。