这是一个展示如何在 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.md 文件提供了一些有用的提示词示例,可以帮助你:

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

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

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