用途:使用 Tailwind CSS v4 的实用类优先方式编写现代、可维护的样式,适用于编写或修改 CSS 类、配置主题等场景。
主要能力:支持响应式前缀(sm:、md:、lg:、xl:、2xl:,移动优先)、状态变体(hover:、focus:、active:、disabled:、group-hover:、peer-checked:)、暗色模式(dark:)、任意值(如 top-[117px]、bg-[#bada55])与 CSS 变量(v4 语法 bg-(--my-color))。v4 采用 CSS 优先配置,通过 @theme { } 定义设计令牌,主题值同时生成实用类与 CSS 变量。
使用方式:用 @import "tailwindcss"; 替代 v3 的 @tailwind 指令。构建工具包包括 CLI(@tailwindcss/cli)、PostCSS(@tailwindcss/postcss)与推荐的 Vite(@tailwindcss/vite),不再需要 postcss-import 或 autoprefixer。自定义实用类用 @utility 替代 @layer utilities;Vue/Svelte/CSS Modules 等隔离样式块中用 @reference 引入上下文。指令还包括 @source、@variant、@custom-variant、@apply 等。
迁移与限制:可运行 npx @tailwindcss/upgrade 自动迁移。v4 重命名了部分实用类(如 shadow-sm→shadow-xs、ring→ring-3),移除了透明度实用类(改用 bg-black/50)、flex-shrink-→shrink- 等,并调整了边框色、环色、环宽、占位符与按钮光标等默认值。浏览器要求 Safari 16.4+、Chrome 111+、Firefox 128+,旧浏览器需用 v3.4。资料未提供收费、价格与平台信息。