tailwindcss-v4

用途

Tailwind CSS v4 Skill 面向 Tailwind CSS v4 项目，整理该版本的 CSS 优先配置方式、新指令与从 v3 迁移的要点。适用场景为处理 Tailwind v4 相关代码与配置。

主要能力

v4 入口与指令

v4 的入口为：

@import "tailwindcss";

而不是 v3 的写法：

/* ❌ These cause errors in v4 */
@tailwind base;
@tailwind components;
@tailwind utilities;

关键指令包括：

@theme：定义设计令牌（颜色、间距、字体）
@utility：创建自定义工具类
@variant：定义自定义变体（hover、focus 等）
@source：控制类名检测与安全列表
@reference：在 @apply 场景下导入而不产出 CSS

主题配置（CSS 优先）

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #64748b;
  --font-display: "Inter", sans-serif;
  --spacing-18: 4.5rem;
}

而不是使用 tailwind.config.js：

// ❌ v3 pattern - don't use in v4
module.exports = {
  theme: {
    extend: {
      colors: { primary: '#3b82f6' }
    }
  }
}

自定义工具类

@utility content-auto {
  content-visibility: auto;
}

/* Functional utility must end in -* */
@utility tab-* {
  --tab-size: --value(--spacing-*, [integer]);
  tab-size: var(--tab-size);
}

自定义变体

使用 @custom-variant 定义新变体（不是 @variant）。

@custom-variant hocus (&:hover, &:focus);

/* Dark mode with class strategy */
@custom-variant dark (&:is(.dark *));

/* Body block with @slot */
@custom-variant hocus {
  &:hover, &:focus { @slot; }
}

主题配置细节

@theme {
  --color-primary: #3b82f6;

  /* Clear namespace */
  --color-*: initial;
}

主题标志（Theme Flags）：

default：与默认主题合并
inline：将变量输出到产物
static：使用值但不输出变量
reference：使用值但不输出 CSS

@theme inline {
  --font-sans: "SF Pro Text", system-ui;
}

新增渐变语法

<!-- v4 preferred - supports interpolation color space -->
<div class="bg-linear-to-r/oklch from-blue-500 to-purple-500"></div>

<!-- Also: bg-linear-to-b, bg-radial, bg-conic -->

新增变体

@min-[400px]: / @max-[600px]:（容器查询）
starting:（@starting-style）
details-content:（::details-content）
inverted-colors:、noscript:、print:

安全列表

/* Inline safelist */
@source inline("bg-red-500 text-white hidden");

/* From external source */
@source "../content/**/*.md";

从 v3 迁移

v3	v4
@tailwind base/components/utilities	@import "tailwindcss"
tailwind.config.js theme.extend	@theme { --color-* }
PostCSS tailwindcss plugin	@tailwindcss/postcss
@apply with config values	@reference import first

使用方式

PostCSS 设置

// postcss.config.js
export default {
  plugins: {
    '@tailwindcss/postcss': {}  // NOT 'tailwindcss'
  }
}

Vite 设置

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'

export default {
  plugins: [tailwindcss()]
}

适用场景与限制

适用于 Tailwind v4 项目的配置、自定义工具类与变体、安全列表控制，以及从 v3 迁移。资料未提供该技能的具体安装命令、适用平台、收费信息或效果数据。