用途:Tailwind CSS v4 实用类优先(utility-first)样式开发指南,帮助在项目中有效使用实用类并保持样式一致。
主要能力:覆盖布局(flex、grid、相对绝对定位)、间距(spacing 比例)、排版、颜色、响应式断点与容器、状态变体(hover/focus/active/group-hover/disabled)、深色模式、任意值、@apply,以及官方插件(@tailwindcss/forms、typography、aspect-ratio、container-queries)。
使用方式:v4 采用 CSS 优先配置,在入口 CSS 中 @import "tailwindcss",并通过 @theme 定义自定义颜色、间距、字体与断点;v3 兼容的 tailwind.config.js 仍受支持。安装插件示例:npm install @tailwindcss/forms。
适用场景:React/Next.js 等使用 className 的组件样式、响应式网格、卡片、按钮、表单与深色模式界面。
限制:v4 自动扫描模板文件,无需 content 配置;官方资料称完整构建约快 3.5 倍(约 100ms),浏览器需 Safari 16.4+、Chrome 111+、Firefox 128+;建议减少 @apply 使用、避免重复长类列表。具体项目配置与性能数据暂未提供更多细节。