该技能聚焦 Tailwind CSS v4 的版本迁移与命名空间映射,不是日常 CSS-first 配置参考,也不是通用工具类查询。
用途:从 v3 升级到 v4 时对照破坏性变更;查询 @theme 命名空间与生成工具类的对应;查找 v3 中被重命名或移除的工具类。
主要能力:列举 @theme 命名空间映射,如 --color-* 生成 bg-、text-、border-、fill-;--font-* 生成 font-;--text- 生成 text-xs、text-sm 等;--spacing-* 生成 p-、m-、gap-、w-、h-;--radius- 生成 rounded-;--shadow- 生成 shadow-;--breakpoint- 生成 sm:、md:、lg:、xl:;--animate-* 生成 animate-spin、animate-bounce 等;--ease-* 生成 ease-in、ease-out、ease-in-out。
v3 到 v4 破坏性变更:移除 @tailwind 指令,改为 @import "tailwindcss";重命名 shadow-sm→shadow-xs、shadow→shadow-sm、rounded-sm→rounded-xs、rounded→rounded-sm、outline-none→outline-hidden、ring→ring-3;移除 bg-opacity-(改用 bg-black/50)、text-opacity-(改用 text-black/50)、flex-shrink-(改用 shrink-)、flex-grow-(改用 grow-);自定义工具类由 @layer utilities 改为 @utility;任意值变量由 bg-[--brand-color] 改为 bg-(--brand-color);important 修饰符由 !bg-red-500 改为 bg-red-500!。
升级工具:npx @tailwindcss/upgrade,要求 Node.js 20+。
版本变更摘要:v4.1 增加 text shadows、masks;v4.2 增加 mauve/olive/mist/taupe 调色板、@tailwindcss/webpack、逻辑属性工具类、font-features-,弃用 start-/end-;v4.3 增加 scrollbar 工具类、@container-size、zoom-、tab-*、stacked/compound @variant、--default()。
限制:CSS-first 配置与 @theme/@utility/@variant 使用归 tailwindcss-core,自定义工具与变体归 tailwindcss-custom-styles;浏览器支持细节需查安装支持文档。