tw-react-components
基于TailwindCSS的React组件库，用于快速构建美观的响应式仪表盘。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：tw-react-components。 它的用途是：基于TailwindCSS的React组件库，用于快速构建美观的响应式仪表盘。 完整的 Skill 内容见：https://321skill.com/skills/tw-react-components/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用React和Tailwind开发一个数据管理后台，需要一个包含侧边栏导航、数据表格和操作按钮的页面布局。”，它会引导你使用该库的Sidebar、Layout、DataTable和Button等组件，快速搭建出结构清晰、样式专业的页面框架，并给出具体的导入和组合代码示例。
介绍
tw-react-components 是一个专为构建现代、美观的仪表盘和后台管理系统而设计的React组件库。它解决了前端开发者在构建复杂UI界面时，需要重复编写样式和交互逻辑的痛点，提供了一套开箱即用、风格统一的组件集合。
使用该库非常简单。首先通过npm、yarn等包管理器安装，然后在项目的TailwindCSS配置文件中添加必要的插件和路径，最后在CSS中引入库的样式文件即可。开发者可以像使用普通React组件一样，导入并组合使用其提供的布局、导航、表单、数据展示等各类组件，极大提升了开发效率。
这个库非常适合需要快速搭建企业级后台、数据可视化平台或任何需要专业、一致UI界面的React项目的前端开发者。无论是个人项目还是团队协作，都能从中受益。
使用建议方面，由于该库深度依赖TailwindCSS 3，请确保你的项目已正确配置。其组件基于Radix UI构建，具有良好的可访问性，适合对无障碍有要求的项目。对于需要高度定制化样式的场景，可以通过覆盖TailwindCSS类名或使用其提供的主题配置进行灵活调整。
核心特点
与同类通用UI库（如MUI、Ant Design）相比，它专为仪表盘场景深度优化，组件设计更贴合数据展示和后台操作逻辑；同时，它完全基于TailwindCSS构建，样式定制和主题切换更加灵活和一致，无需在CSS-in-JS和传统CSS间切换。
注意事项
由于深度绑定TailwindCSS，不适合未使用或不愿使用TailwindCSS的React项目。
常见问题
这个库支持暗黑模式吗？
是的，组件库内置了完整的亮色和暗色主题支持，可以方便地通过ThemeSelector组件或CSS变量进行切换。
需要安装哪些TailwindCSS插件？
需要安装@tailwindcss/forms和tailwindcss-animate插件，并可选择性地引入库自带的tailwindcss插件以获得额外功能。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/tw-react-components/raw/index.md 读取 tw-react-components 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/tw-react-components/raw/index.md（查看排版版本）