Tailwind CSS 是一个基于原子类的 CSS 框架，能让你快速构建美观、响应式的 UI，而无需编写自定义 CSS。它适用于 React，结合 JSX 语法，可以极大提升开发效率。

目录

  1. 安装 Tailwind CSS
  2. 配置 Tailwind CSS
  3. 基本使用
  4. 常见样式
  5. 使用 Tailwind 自定义主题
  6. Dark Mode (暗黑模式)
  7. 动画与过渡效果
  8. 与 React 组件结合
  9. 参考资料

1. 安装 Tailwind CSS

在 React 项目（Vite 或 Create React App）中安装 Tailwind CSS：

1.1 使用 Vite 创建 React 项目（推荐）

npm create vite@latest my-tailwind-app --template react
cd my-tailwind-app
npm install

1.2 安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

该命令会生成：

  • tailwind.config.js（Tailwind 配置文件）
  • postcss.config.js（PostCSS 配置）

2. 配置 Tailwind CSS

修改 tailwind.config.js 以启用 Tailwind 在 React 项目中的支持。

配置 tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

在 src/index.css 引入 Tailwind

@tailwind base;
@tailwind components;
@tailwind utilities;

✅ Tailwind 已成功集成 React 项目！

3. 基本使用

在 App.jsx 中直接使用 Tailwind 类：

import React from "react";

export default function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="p-6 bg-white shadow-lg rounded-xl text-center">
        <h1 className="text-2xl font-bold text-gray-800">Hello Tailwind CSS!</h1>
        <p className="text-gray-600 mt-2">React + Tailwind 组合</p>
      </div>
    </div>
  );
}

✅ 无需写 CSS，直接在 className 里添加 Tailwind 类名。

4. 常见样式

4.1 布局

<div className="flex justify-center items-center h-screen bg-gray-100">
  <div className="w-96 p-4 bg-white shadow-md">内容</div>
</div>
  • flex：开启弹性布局
  • justify-center：水平居中
  • items-center：垂直居中

4.2 颜色

<div className="bg-blue-500 text-white p-4">蓝色背景</div>
  • bg-blue-500：背景色
  • text-white：字体颜色

4.3 按钮

<button className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
  提交
</button>
  • rounded：圆角
  • hover:bg-green-600：鼠标悬停颜色变化

4.4 响应式

<div className="p-4 bg-gray-200 md:bg-red-200 lg:bg-blue-200">
  在小屏幕是灰色，中等屏幕是红色，大屏幕是蓝色
</div>
  • md:bg-red-200：中等屏幕变为红色
  • lg:bg-blue-200：大屏幕变为蓝色

5. 使用 Tailwind 自定义主题

在 tailwind.config.js 里扩展主题：

theme: {
  extend: {
    colors: {
      primary: "#ff5722",
    },
    spacing: {
      '72': '18rem',
      '84': '21rem',
    },
  },
}

使用自定义样式

<div className="bg-primary text-white p-4">自定义主题色</div>

✅ 自定义样式让 Tailwind 适配你的 UI 需求。

6. Dark Mode (暗黑模式)

启用 Dark Mode

修改 tailwind.config.js：

darkMode: 'class',

实现暗黑模式切换

import { useState } from "react";

export default function DarkModeToggle() {
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div className={darkMode ? "dark bg-gray-900 text-white h-screen" : "bg-white h-screen"}>
      <button
        onClick={() => setDarkMode(!darkMode)}
        className="px-4 py-2 bg-blue-500 text-white rounded m-4"
      >
        切换暗黑模式
      </button>
      <p className="dark:text-gray-300">这是暗黑模式文本</p>
    </div>
  );
}

✅ 只需在 dark: 前缀加样式，就能自动适配暗黑模式！

7. 动画与过渡效果

<button className="bg-green-500 text-white px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-green-700">
  悬停变色
</button>
  • transition duration-300：动画时长 300ms
  • ease-in-out：缓动效果

8. 与 React 组件结合

封装一个 Tailwind 组件

const Card = ({ title, content }) => {
  return (
    <div className="p-6 bg-white shadow-lg rounded-lg">
      <h2 className="text-xl font-semibold">{title}</h2>
      <p className="text-gray-600 mt-2">{content}</p>
    </div>
  );
};

export default function App() {
  return (
    <div className="p-8 bg-gray-100 flex justify-center">
      <Card title="React + Tailwind" content="组合开发高效美观的 UI" />
    </div>
  );
}

✅ 可复用组件，Tailwind 让开发更加简洁。

9. 参考资料

出站链接

站内链接

总结

特点Tailwind CSS 的优点缺点
开发速度直接在 className 写样式，快速构建 UI类名较长，可能增加 HTML 代码体积
响应式设计使用 sm: md: lg: 实现不同屏幕适配需要熟悉类名语法
自定义扩展tailwind.config.js 支持定制主题需要额外配置
动画 & 过渡transition、animate 类实现动效高级动画仍需 CSS/JS

✅ 适用于 前端开发、SaaS、管理后台、营销页面 等场景，推荐结合组件化开发！ 🚀