用途:本技能面向 Tailwind CSS v4(当前稳定版 v4.3)的 CSS-first 配置方式,用 CSS 指令替代传统 tailwind.config.js,覆盖主题令牌、自定义工具类与变体、暗色模式、响应式断点、CSS 层结构以及插件集成。
主要能力:用 @import "tailwindcss" 作为入口加载基础工具类、响应式变体与 theme/base/components/utilities 各层;用 @theme 通过 CSS 自定义属性定义主题,如 --color-primary、--spacing-custom、--radius-lg,并生成对应工具类;用 @source 以 glob 模式纳入额外源文件供扫描生成工具类;用 @utility 定义自定义工具类,用 @custom-variant 定义新变体,用 @variant 在 CSS 中应用变体(v4.3 支持 hover:focus 堆叠与逗号复合形式);用 @apply 在自定义 CSS 中套用 Tailwind 类;用 @config 加载外部配置以兼容旧方式。
使用方式:在主 CSS 文件顶部写 @import "tailwindcss";随后按需添加 @theme 令牌、@layer components 与 @layer utilities 自定义、@plugin 加载插件并配合 @source 引入其文件。暗色模式默认 dark: 跟随 prefers-color-scheme,若改为类名控制可用 @custom-variant dark (&:where(.dark, .dark *))。响应式断点通过 @theme 的 --breakpoint-sm 等定义,再以 md:text-base 这类变体使用。
限制:官方说明 v4 不设计为与 Sass/Less/Stylus 合用;CSS-first 下导入与声明顺序决定优先级。资料未给出安装命令、收费情况或更多细节。