用途:为常见网站组件提供可直接复用的 Tailwind CSS 类名模式,减少设计漂移,适用于生产项目。
主要能力:包含区块容器、卡片(基础、带图标、定价)、响应式网格(含 auto-fit 与瀑布流)、按钮(主/次/描边/幽灵/危险及尺寸变体)、表单(输入、下拉、复选框、错误态)、排版(标题、正文、列表)、导航(吸顶头部、页脚)等模式;提供间距刻度、响应式断点与语义颜色令牌,支持明暗模式自动适配。
使用方式:直接复制类名组合到 JSX 中,例如容器使用 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8,区块使用 py-16 sm:py-24;网格使用 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6。templates/components/ 提供 hero-section.tsx、feature-grid.tsx、contact-form.tsx、footer.tsx 等可复制组件;references/ 目录含 layout、card、navigation、form、button、typography、dark-mode 等详细文档。
适用场景:使用 Tailwind 与 shadcn/ui 风格令牌的网站与前端项目,需要统一间距、响应式与主题的组件开发。
限制:资料未提供安装命令、收费与价格信息;要求使用语义颜色令牌而非原始颜色(如 bg-blue-500),并遵循移动优先与统一间距刻度。官方文档参考 tailwindcss.com/docs 与 ui.shadcn.com。