tailwindcss-v4

Name: tailwindcss-v4
Author: fusengine

github.com/fusengine设计与 UI3475 次安装1 天前更新

代码仓库

关于 tailwindcss-v4

面向从 v3 迁移的开发者，介绍 Tailwind CSS v4 的核心变化，重点涵盖主题变量与工具类映射、破坏性变更及升级命令行工具，不侧重日常配置或工具类查询。

主要功能

01说明 @theme 命名空间与生成工具类的映射
02列出 v3 到 v4 的破坏性变更
03介绍重命名和移除的工具类
04说明自定义工具类语法变化
05记录 @tailwindcss/upgrade 命令行工具

适用场景

01查找主题变量会生成哪些工具类
02在 v3 到 v4 迁移时更新样式表
03为已移除的工具类查找替代写法

安装

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

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

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

详细介绍

记录 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()）。

文档

CSS 主题变量、设计令牌、自定义配置 → tailwindcss-core
指令（@utility、@variant、@theme、@apply）→ tailwindcss-core
自定义工具类和变体 → tailwindcss-custom-styles
内容检测（@source 扫描）→ tailwindcss-core
从 v3 迁移到 v4 → 参见下方“v3 → v4 重大变更”部分

快速参考 - @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";

重命名工具类

v3	v4
`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-*

自定义工具类语法

/* 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

登录后评论