TailGrids 是一套基于 Tailwind CSS 开发的 UI 组件 / 区块套件（Freemium 免费 + 付费模式），主打复制粘贴即用，面向营销页、SaaS、仪表盘、电商、AI 应用开发。最新大版本 TailGrids 3.0，偏向 React 技术栈。
一、核心定位
和 Tailwind UI、Flowbite、DaisyUI 属于同类生态，但侧重点不同：
- Tailwind UI：官方出品，高质量，价格昂贵
- DaisyUI：底层组件库（插件形式）
- TailGrids：大量完整页面区块（Blocks）+ 基础组件，适合快速搭落地页、后台面板
二、支持框架
- HTML 原生代码片段
- React（TS 优先，3.0 主推）
- Vue
- 配套 Figma 设计源文件（Pro 付费）
完美兼容 Tailwind CSS v4
三、内容分类（600 + 组件 / 区块）
- Core 基础组件（免费）
按钮、表单、弹窗、下拉、标签、表格、卡片、提示框等通用元素 - Marketing 营销区块
导航栏、Hero 首页大图、定价模块、客户评价、FAQ、团队介绍、博客板块 - Dashboard 仪表盘区块
统计卡片、图表容器、数据表格、侧边菜单、筛选面板 - E-commerce 电商模块
商品卡片、购物车、商品详情、分类列表 - AI App 专用区块（新版亮点）
AI 聊天界面、Prompt 输入框、对话布局 - Bento Grid 现代网格布局
✅ 全部组件原生支持深色模式（Dark Mode），响应式布局。
四、版本 & 许可（重点）
1. TailGrids Core（免费开源）
- GitHub 开源，MIT 协议
- 可商用、可修改
- 包含基础组件 + 少量免费区块
- ❌ 不含完整模板、Figma 文件、大量高级区块
仓库：https://github.com/TailGrids/tailwind-ui-components
2. Pro / All-Access（付费一次性买断）
- 一次性付费，终身使用 + 免费更新
- 解锁全部 600 + 区块、完整页面模板
- 提供 Figma 设计套件、离线资源下载
📌 付费协议限制：
✅ 允许商用、客户项目、修改源码
❌ 禁止二次打包分发、不能嵌入在线网站生成器 / UI 模板平台售卖
五、两种使用方式
方式 1：复制粘贴（最简单，推荐新手）
官网浏览组件，一键复制 HTML/React/Vue 代码，直接粘贴到项目，无需额外安装包。
方式 2：CLI 工具（3.0 推荐，React 项目）
npx @tailgrids/cli@latest init
自动配置，按需导入组件，适合 Next.js/ Vite React 项目。
⚠️ 旧版
tailgridsnpm 包已废弃，改用@tailgrids/cli
六、优缺点总结
✅ 优势
- 区块丰富，不止基础组件，大量现成页面板块，搭建落地页效率极高
- 设计风格统一，现代简约，适合初创 SaaS、官网、管理后台
- 同时提供 HTML/React/Vue 三套代码，选型灵活
- 免费 Core 满足小型项目原型；买断制，无订阅费
- 代码干净，纯 Tailwind 原生类，无额外臃肿 CSS
⚠️ 不足
- 免费版资源有限，大量好看区块需要付费
- 不像 DaisyUI 是 Tailwind 插件，不能全局直接调用组件，以复制片段为主
- 交互逻辑偏基础，复杂弹窗、表格需要自行搭配 Headless UI、Radix UI
七、选型参考对比
| 库 | 模式 | 特点 |
|---|---|---|
| TailGrids | Freemium | 大量页面区块，适合快速搭建页面 |
| Tailwind UI | 付费订阅 | 官方顶级质量，交互完善 |
| DaisyUI | 免费开源插件 | 基础组件库，全局可用 |
| Flowbite | 免费 + 付费 | 配套 JS 交互组件较多 |