SuperAPI AI 工具集

tailwind-css-v4

前端与建站

查看项目

更新于 10-15 23:33

技能介绍

用途:Tailwind CSS v4 的语法参考,重点说明与 v3.x 的差异,供配置 Tailwind 或从旧版本迁移时查阅。

主要能力:配置改为 CSS 优先,用 @theme 指令替代 tailwind.config.js;引入方式改为 @import "tailwindcss",不再使用 @tailwind 指令。设计令牌以 CSS 变量形式提供,命名空间如 --color-、--font-、--text-、--breakpoint-、--spacing-* 等,可在 CSS 中用 var() 访问。间距基于单一 --spacing 值动态生成。新增内置容器查询(@container、@sm:、@max-md:)、3D 变换、渐变插值、inset-shadow-* 等。变体可组合,新增 starting、not-、inert、nth-、in-* 等。自定义可用 @utility、@custom-variant、@plugin。

使用方式:包名有变化,PostCSS 插件为 @tailwindcss/postcss,CLI 为 @tailwindcss/cli,Vite 插件为 @tailwindcss/vite,不再需要 postcss-import 和 autoprefixer。旧配置可用 @config 导入。前缀写法为 @import "tailwindcss" prefix(tw)。源文件默认自动检测,可用 @source 添加或 source(none) 关闭。Vue/Svelte 中用 @reference 配合 @apply。

限制:存在破坏性变更,如 bg-opacity-* 等已移除,shadow-sm、blur-sm、rounded-sm 等被重命名,默认边框色改为 currentColor、默认 ring 宽度改为 1px,任意值中 CSS 变量写法改为 bg-(--brand-color),堆叠变体改为从左到右应用。迁移前需核对上述变更。