Tailwind CSS v4 新特性全面指南

Tailwind CSS v4 概述

Tailwind CSS v4 是迄今为止最大的一次更新，完全重写了引擎，带来了显著的性能提升和更好的开发体验。

新特性一览

1. 全新的 CSS 优先配置

在 v4 中，不再需要 tailwind.config.js，所有配置都可以直接在 CSS 中完成：

@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --font-heading: "Inter", sans-serif;
}

2. 增强的暗色模式

<div class="bg-white dark:bg-gray-900">
  <h1 class="text-gray-900 dark:text-white">
    Dark Mode 支持
  </h1>
</div>

3. 性能提升

v4 的引擎完全用 Rust 重写，构建速度提升了 10 倍以上。

内置导入

/* 自动导入所有 Tailwind 功能 */
@import "tailwindcss";

/* 或者选择性导入 */
@import "tailwindcss/theme" layer(theme);
@import "tailwindcss/utilities" layer(utilities);

实际应用示例

响应式布局

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="p-4 rounded-xl shadow-sm hover:shadow-md transition-shadow">
    <!-- 卡片内容 -->
  </div>
</div>

迁移指南

1. 删除 tailwind.config.js

2. 在 CSS 中使用 @theme 定义主题

3. 将 @apply 替换为 CSS 自定义属性

总结

Tailwind CSS v4 代表了 CSS 工具类框架的未来方向，更快的速度、更简洁的配置、更强大的功能。