mcpField
T
tailwindcss-v4

tailwindcss-v4

github.com/tlq5l设计与 UI51 次安装
代码仓库

关于 tailwindcss-v4

这是一项 Tailwind CSS v4 参考技能，介绍 CSS 优先配置、指令、变体以及从 v3 迁移，适用于使用 Tailwind CSS 构建或更新界面的开发者。

主要功能

  1. 01用 @theme 配置设计令牌
  2. 02创建工具类与变体
  3. 03用 @source 控制类名检测
  4. 04配置 PostCSS 与 Vite
  5. 05迁移 v3 配置

适用场景

  1. 01在 CSS 中定义项目主题
  2. 02添加自定义工具类和变体
  3. 03将类名加入安全列表或扫描外部文件
  4. 04将 v3 配置更新至 v4

安装

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

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

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

包含的文件

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

AGENTS.md
CONTRIBUTING.md
LICENSE
README.md
metadata.json
package.json
.github/ISSUE_TEMPLATE/
bug_report.md
new_rule.md
.github/workflows/
skill-ci.yml
rules/
_sections.md
_template.md
customization-custom-variant.md
customization-gradients.md
customization-theme-inline.md
customization-utility.md
customization-variant.md
directive-custom-variant.md
directive-source.md
migration-container-queries.md
migration-dark-mode.md
migration-explicit-var.md
migration-oklch-colors.md
migration-ring-width.md
migration-shadow-scale.md
setup-entry-point.md
setup-framework-nextjs.md
setup-framework-vite.md
setup-source-detection.md
setup-theme-config.md
theme-options.md

详细介绍

Tailwind CSS v4 技能

CSS 优先配置、新指令以及从 v3 迁移。

快速参考

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;
}

主题标志

  • default：与默认主题合并
  • inline：将变量输出到结果中
  • static：使用值，但不输出变量
  • reference：使用值，但不输出 CSS
@theme inline {
  --font-sans: "SF Pro Text", system-ui;
}

新渐变语法


<div class="bg-linear-to-r/oklch from-blue-500 to-purple-500"></div>

新变体

  • @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 迁移

v3v4
@tailwind base/components/utilities@import "tailwindcss"
tailwind.config.js theme.extend@theme { --color-* }
PostCSS tailwindcss 插件@tailwindcss/postcss
使用配置值的 @apply先导入 @reference

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 文档、GitHub

评论

支持 Markdown