用途:提供可直接复用的 Tailwind CSS 组件模式,用于构建常见网站界面,如响应式布局、卡片、导航、表单、按钮和排版。
主要能力:包含区块容器、标准页容器、基础/功能/定价卡片、自动响应式与 auto-fit 网格、瀑布流布局、主次/描边/幽灵/危险按钮、输入框、下拉框、复选框、错误状态、标题与正文排版、页头页脚导航等模式。兼容 Tailwind v3.x 与 v4.x,示例基于 shadcn/ui 语义色板,支持暗色模式自动适配。附带模板组件(hero-section.tsx、feature-grid.tsx、contact-form.tsx、footer.tsx)及 references 下的扩展参考文档。
使用方式:将对应 className 复制到 JSX 元素中,按移动优先顺序在基础样式上叠加 sm:、md:、lg: 等断点前缀;容器使用 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。建议统一使用 4、6、8、12、16、24 的间距刻度,并用 rounded-none、shadow-[4px_4px_0px_0px_#000000] 等方式应用项目 Swiss 风格覆盖。
适用场景:营销页、博客、后台界面等常见页面的快速搭建,以及需要暗色模式兼容与统一设计规范的前端项目。
限制:仅以文档和示例形式提供模式,未提供安装命令、包名、依赖版本或授权收费信息;官方文档地址为 https://tailwindcss.com/docs。