Tailwind CSS v4.0 发布和纯 CSS 配置

介绍

Tailwind CSS v4.0 标志着从基于 JavaScript 的配置到 CSS 优先架构 的范式转变。 tailwind.config.js 文件消失了；设计标记现在使用 @theme 直接在 CSS 中定义。此版本还集成了 Lightning CSS 以实现极快的构建，采用了 CSS 嵌套和 @layer 等现代 CSS 功能，并提供了完全重写的引擎。本文详细介绍了 v3 的主要变化并提供了实用的迁移指南。

使用 `@theme` 进行 CSS 优先配置

在 v3 中，自定义设计令牌需要 JavaScript：

// tailwind.config.js (v3)
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#0f172a' },
      fontFamily: { display: ['Inter', 'sans-serif'] },
    },
  },
};

在 v4 中，相同的配置完全位于主 CSS 文件中：

@import "tailwindcss";

@theme {
  --color-brand: #0f172a;
  --font-family-display: 'Inter', sans-serif;
}

@theme 指令自动生成相应的实用程序类（bg-brand、font-display）。令牌不需要 JavaScript 构建步骤。

基于 `@import` 的设置和 Lightning CSS

Tailwind v4 作为单个 CSS 层导入：

@import "tailwindcss";
@import "./custom-components.css" layer(components);

该框架使用 Lightning CSS 作为其底层 CSS 解析器和压缩器，取代了 PostCSS + Autoprefixer 链。在大型项目中，与 v3 相比，构建速度快 3-10 倍。

要启用 Lightning CSS 功能（例如本机嵌套和供应商前缀）：

@import "tailwindcss" source(none);
@import "./src/input.css" source("src");

现代重置和 `@layer` 支持

Tailwind v4 使用基于 box-sizing: border-box 全局、所有元素上 margin: 0 的 现代 CSS 重置，并改进了表单元素默认值。它还尊重 @layer 级联层，允许您将 Tailwind 实用程序与您自己的分层样式交错：

@layer base, components, utilities;
@import "tailwindcss" layer(base);
@import "./my-components.css" layer(components);

主要实用程序变更

几个实用程序类出现了突破性的改进：

v3 类	v4 等效	笔记
占位符_0	占位符_1	为保持一致性而重命名
占位符_0	占位符_1	现在使用 `overflow: clip`
`ring` 变体	占位符_1	默认戒指颜色已更改
占位符_0	占位符_1	过滤器现在按实用程序选择加入

@variant 指令允许自定义状态变体：

@variant supports-hover {
  @media (hover: hover) { @content; }
}

v3 的迁移指南

删除 tailwind.config.js 和 postcss.config.js。
安装 v4 软件包：npm install tailwindcss@next。
替换您的主 CSS 入口点以使用 @import "tailwindcss"。
将主题值移动到 @theme 块中。
**尽可能将 @apply 替换为常规 CSS 或 @layer （v4 仍然支持 @apply 但建议在复杂情况下使用纯 CSS）。
更新更改了实用程序名称（shadow-sm → shadow-xs）。
使用 npx tailwindcss --input src/input.css --output dist/output.css 进行测试。

结论

Tailwind CSS v4.0 消除了配置的 JavaScript 构建依赖性，采用本机 CSS 功能，并通过 Lightning CSS 提供显着更快的开发人员体验。 CSS 优先的 @theme 系统使设计令牌更加透明和可移植。从 v3 迁移的团队应该计划配置检修，但会受益于降低的构建复杂性和改进的运行时性能。