mcpField
T
tailwindcss-v4

tailwindcss-v4

github.com/fusengine开发3475 次安装2 周前更新
代码仓库

关于 tailwindcss-v4

面向使用 Tailwind CSS 的开发者，整理 Tailwind CSS v4.3 的核心特性及从 v3 迁移时的变化。内容涵盖主题变量到工具类的映射、破坏性变更和升级 CLI，并区分于日常配置与工具类查询参考。

主要功能

  1. 01速查主题命名空间与工具类映射
  2. 02列出 v3 到 v4 的破坏性变更
  3. 03说明工具类重命名与移除项
  4. 04介绍自定义工具类语法变化
  5. 05提供升级 CLI 命令及要求

适用场景

  1. 01评估项目从 v3 迁移至 v4
  2. 02查找旧工具类在 v4 中的替代项
  3. 03使用 CLI 升级 Tailwind CSS

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/fusengine/agents --skill tailwindcss-v4

安装后在 Claude Code 中输入/tailwindcss-v4确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
api-functions.md
configuration.md
installation-support.md

详细介绍

记录 Tailwind CSS v4（当前稳定版本 v4.3）中与 v3→v4 迁移相关的核心功能：`@theme` 命名空间到生成工具类的映射（`--color-*`→`bg-*`/`text-*`、`--spacing-*`→`p-*`/`m-*`/`gap-*` 等）、v3→v4 的重大变更（移除 `@tailwind` 指令、工具类重命名，如 `shadow-sm`→`shadow-xs`、移除 `bg-opacity-*`/`flex-shrink-*`、`@utility` 自定义工具类语法变更、任意值中的变量语法、重要修饰符的位置），以及 `@tailwindcss/upgrade` CLI 工具。

不涵盖日常的 CSS 优先配置参考（tailwindcss-core 负责 @theme/@utility/@variant 用法），也不涵盖工具类查询（由各类别技能负责）。

Tailwind CSS v4.3 核心

当前稳定版本：tailwindcss 4.3.3（2026 年 7 月）。自 v4.0 以来的次要版本：v4.1（文本阴影、遮罩）、v4.2（mauve/olive/mist/taupe 调色板、@tailwindcss/webpack、逻辑方向的 pbs/mbs/inline-*/block-*/inset-s|e|bs|be 工具类、font-features-*；start-*/end-* 已弃用）、v4.3（滚动条工具类、@container-size、zoom-*、tab-*、堆叠/复合 @variant、函数式 @utility 中的 --default()）。

文档

快速参考 - @theme 命名空间

命名空间生成的工具类
--color-*bg-, text-, border-, fill-
--font-*font-*
--text-*text-xs、text-sm、text-base 等
--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 指令
/* v3 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* v4 */
@import "tailwindcss";
重命名工具类
v3v4
shadow-smshadow-xs
shadowshadow-sm
rounded-smrounded-xs
roundedrounded-sm
outline-noneoutline-hidden
ringring-3
移除已弃用的工具类
  • bg-opacity-* → 改用 bg-black/50
  • text-opacity-* → 改用 text-black/50
  • flex-shrink-* → 改用 shrink-*
  • flex-grow-* → 改用 grow-*
自定义工具类语法
/* v3 */
@layer utilities {
  .tab-4 {
    tab-size: 4;
  }
}

/* v4 */
@utility tab-4 {
  tab-size: 4;
}
任意值中的变量

<div class="bg-[--brand-color]"></div>


<div class="bg-(--brand-color)"></div>
重要修饰符的位置

<div class="!bg-red-500">


<div class="bg-red-500!">

升级工具

npx @tailwindcss/upgrade

需要 Node.js 20+

详细参考

  • configuration.md - 在编写 CSS 优先的 @theme 配置或使用 @utility/@variant/@custom-variant 指令时加载
  • api-functions.md - 在使用 --alpha()/--spacing() CSS 函数或 @apply 时加载
  • installation-support.md - 在安装 Tailwind v4（npm/Vite/CLI/webpack）或检查浏览器支持情况时加载

评论

支持 Markdown