关于 use-tailwind-v4
面向开发者的 Tailwind CSS v4 参考技能，整理新语法及从 v3 迁移时的变化，便于应用新约定并检查升级结果。
主要功能
- 01v4 导入与自定义工具类语法
- 02通过 CSS 变量使用主题值
- 03v3 到 v4 的工具类更名对照
- 04默认值与变体行为变化
- 05自动升级命令说明
适用场景
- 01将样式表从 v3 约定迁移
- 02迁移时核对更名的工具类
- 03检查默认值与变体顺序的变化
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/use-tailwind-v4确认已加载。
附带文件references/upgrade-guide.md
详细介绍
Tailwind CSS v4
v4 语法速览
导入和设置
/* v4 import (replaces @tailwind directives) */
@import "tailwindcss";
/* Custom utilities (replaces @layer utilities) */
@utility tab-4 {
tab-size: 4;
}
/* Loading JS config (if still needed) */
@config "../../tailwind.config.js";
主题的 CSS 变量
v4 将所有主题值公开为 CSS 变量。优先使用这些变量，而不是 theme()：
background-color: var(--color-red-500);
font-family: var(--font-sans);
快速参考：v3 → v4 变更
重命名的工具类
| v3 | v4 | 备注 |
|---|---|---|
shadow-sm | shadow-xs | 尺度调整 |
shadow | shadow-sm | 尺度调整 |
drop-shadow-sm | drop-shadow-xs | 尺度调整 |
drop-shadow | drop-shadow-sm | 尺度调整 |
blur-sm | blur-xs | 尺度调整 |
blur | blur-sm | 尺度调整 |
backdrop-blur-sm | backdrop-blur-xs | 尺度调整 |
backdrop-blur | backdrop-blur-sm | 尺度调整 |
rounded-sm | rounded-xs | 尺度调整 |
rounded | rounded-sm | 尺度调整 |
outline-none | outline-hidden | outline-none 现在会设置 outline-style: none |
ring | ring-3 | 默认值从 3px 改为 1px |
已弃用的工具类（使用不透明度修饰符）
<div class="bg-black bg-opacity-50">
<div class="bg-black/50">
此外：flex-shrink-* → shrink-*、flex-grow-* → grow-*、overflow-ellipsis → text-ellipsis
默认值变更
| 项目 | v3 默认值 | v4 默认值 |
|---|---|---|
| 边框颜色 | gray-200 | currentColor |
| Ring 宽度 | 3px | 1px |
| Ring 颜色 | blue-500 | currentColor |
| 按钮光标 | pointer | default |
变体堆叠顺序
顺序从从右到左改为从左到右：
<ul class="first:*:pt-0">
<ul class="*:first:pt-0">
任意值中的变量语法
<div class="bg-[--brand-color]">
<div class="bg-(--brand-color)">
前缀语法
<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
升级项目
迁移项目时，请运行自动升级工具：
npx @tailwindcss/upgrade
需要 Node.js 20+。请在新分支中运行并检查变更。
有关完整的迁移详情（PostCSS/Vite/CLI 配置、自定义工具类、特定框架的问题），请参阅 references/upgrade-guide.md。
评论
支持 Markdown