在 React / Next 中使用 Tailwind CSS

React 和 Next.js 是现代前端开发的巅峰组合。在 JSX 的灵活性加持下，我们可以非常轻松地根据 Props 或状态来动态控制 Tailwind CSS 类名。

在 React 中集成 Tailwind CSS

在标准的 “React + Vite” 项目中，我们通过官方的 Vite 插件来快速集成 Tailwind CSS。

1. 安装依赖

首先，执行以下命令来安装相关依赖：

npm i tailwindcss @tailwindcss/vite -D

2. 配置 Vite

在 vite.config.js （或 vite.config.ts）中添加插件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
    plugins: [
        react(),
        tailwindcss()
    ]
});

3. 引入 Tailwind CSS

最后，在项目入口 CSS 文件（如 App.css）的最顶部加入下面代码：

@import "tailwindcss";

在 Next.js 中集成 Tailwind CSS

最新的 Next.js 15 对 Tailwind CSS v4 版本提供了卓越的原生支持，我们只需要执行以下简单的 3 步即可。

1. 安装依赖

首先，执行以下命令来安装相关依赖：

npm i tailwindcss @tailwindcss/postcss postcss -D

2. 配置文件

在项目根目录创建 postcss.config.mjs，并进行配置：

export default {
    plugins: {
        "@tailwindcss/postcss": {}
    }
};

3. 全局引入

在 app/globals.css 中引入 @import "tailwindcss";，并确保该文件已经在根布局 layout.tsx 中导入。

在 JSX 中使用 Tailwind CSS

在 React 中，我们使用 className 属性来应用类名。得益于 JSX，处理动态样式变得非常直观。

const Card = ({ title, desc, isActive }) => {
    return (
        <div className={`
            flex flex-col gap-4
            w-80 p-6
            bg-white border rounded-2xl shadow-sm
            transition-all hover:shadow-md
            ${isActive ? "border-green-500 ring-2 ring-green-100" : "border-gray-100"}
        `}>
            <h3 className="text-xl font-bold text-gray-800">
                {title}
            </h3>
            <p className="text-sm text-gray-500 leading-relaxed">
                {desc}
            </p>
            <button className="cursor-pointer rounded-lg bg-green-500 py-2 font-bold text-white transition-colors hover:bg-green-600">
                立即学习
            </button>
        </div>
    );
};