🚀 Tailwind CSS v4: 下一代 CSS 引擎，不止于快

你好，前端开发者们！

随着 Tailwind CSS v4 的到来，我们迎来了一个由 Rust 驱动的全新高性能引擎 (Lightning CSS)，它不仅带来了极致的速度，还通过拥抱原生 CSS 特性，让我们的开发体验变得前所未有的流畅和现代化。

Tailwind CSS 不是一个 UI 组件库，而是一个工具类优先 (Utility-First) 的 CSS 框架。v4 版本在保留其核心理念的同时，将性能和易用性推向了新的高度。

为什么选择 Tailwind CSS v4？

• ⚡️ 新一代引擎，极致性能：v4 使用 Rust 编写的 Lightning CSS 作为其核心引擎，速度比 v3 的 JIT 引擎快了数倍。无论是开发环境的即时反馈，还是生产环境的构建，都快如闪电。
• 🎨 设计自由度极高：你可以构建任何你能想象到的设计，而不会被框架的样式所束缚。
• � 零配置，智能按需：v4 的 Vite 插件能够自动检测项目中的工具类，无需手动配置 content 路径。它只生成你用到的 CSS，打包体积极小。
• 🌍 原生 CSS，面向未来：v4 全面拥抱原生 CSS 特性，如 CSS 变量，使得主题定制和动态样式变得异常简单和强大。
• 🤝 维护性强：所有样式都位于 HTML 中，组件是完全自包含的，修改一个组件的样式不会影响到其他任何地方。

---

在 Vite + Vue 3 项目中安装 (v4)

Tailwind CSS v4 的安装和配置流程被极大地简化了，特别是对于 Vite 用户。

1. 安装依赖

v4 将 PostCSS 和 Autoprefixer 内置，你不再需要手动安装它们。

npm install -D tailwindcss

2. 集成到 Vite 配置中

v4 作为一个 Vite 插件开箱即用。

// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import tailwindcss from "tailwindcss"; // 直接导入

export default defineConfig({
  plugins: [
    vue(),
    tailwindcss(), // <-- 作为插件使用
  ],
});

3. 创建并引入 Tailwind CSS 文件

在你的 src 目录下创建一个 CSS 文件，例如 src/style.css。在 v4 中，你只需要一条 @import 指令：

/* src/style.css */
@import "tailwindcss";

这条指令会自动处理 Tailwind 的 base, components, 和 utilities 层。

最后，在你的主入口文件 main.js 中引入这个 CSS 文件。

// src/main.js
import { createApp } from "vue";
import "./style.css"; // <-- 引入你的主样式文件
import App from "./App.vue";

createApp(App).mount("#app");

4. 创建 Tailwind 配置文件 (可选)

如果你需要自定义主题，可以运行以下命令生成一个 tailwind.config.js 文件：

npx tailwindcss init

在 v4 中，一个最小化的配置文件看起来是这样的：

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  // v4 中，当使用 Vite 插件时，content 通常是自动处理的
  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
};

现在，你的项目已经完全配置好了，可以享受 v4 带来的极速体验了！

---

基本用法与核心概念

v4 的工具类语法与 v3 基本保持一致，所以你的知识仍然适用。

<template>
  <div
    class="max-w-sm mx-auto bg-white rounded-xl shadow-lg overflow-hidden md:max-w-2xl dark:bg-slate-800"
  >
    <div class="md:flex">
      <div class="md:shrink-0">
        <img
          class="h-48 w-full object-cover md:h-full md:w-48"
          src="/img/your-image.jpg"
          alt="Modern building architecture"
        />
      </div>
      <div class="p-8">
        <div
          class="uppercase tracking-wide text-sm text-indigo-500 font-semibold"
        >
          Case study
        </div>
        <a
          href="#"
          class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white"
        >
          Finding customers for your new business
        </a>
        <p class="mt-2 text-slate-500 dark:text-slate-400">
          Getting a new business off the ground is a lot of hard work. Here are
          five ideas you can use to find your first customers.
        </p>
      </div>
    </div>
  </div>
</template>

---

进阶技巧：拥抱 CSS 变量

Tailwind CSS v4 的一个核心变化是全面转向使用原生 CSS 变量。这让主题定制和动态样式变得无比强大。

1. 使用 CSS 变量定义主题

在 tailwind.config.js 中，你可以像以前一样定义主题，但 v4 会将它们编译成 CSS 变量。

// tailwind.config.js
export default {
  theme: {
    extend: {
      colors: {
        // 定义一个品牌色
        brand: "oklch(64.49% 0.15 258.44)",
      },
    },
  },
};

这会生成类似这样的 CSS 变量：

:root {
  --color-brand: oklch(64.49% 0.15 258.44);
}

你可以在代码中像 bg-brand 或 text-brand 这样使用它。

2. 在任意地方使用变量

你可以使用 theme() 函数在 CSS 中引用你的主题变量。

.custom-component {
  background-color: theme(colors.brand);
  padding: theme(spacing.4);
}

3. @apply 的演进

@apply 依然是你提取组件类的利器。在 v4 中，它的工作方式更接近原生 CSS，这使得行为更可预测。

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-brand text-white font-semibold rounded-lg shadow-md hover:bg-opacity-90;
  }
}

---

总结

Tailwind CSS v4 是一次巨大的飞跃。它通过采用更快的引擎和拥抱现代 CSS 标准，不仅解决了历史版本中的一些痛点，还为未来的 CSS 开发开辟了新的可能性。

简化的配置、极致的性能和强大的动态主题能力，使得 v4 成为任何新项目的首选 CSS 解决方案。如果你还没尝试过，现在就是最好的时机。