software

如何在 React 应用中添加 Tailwind CSS（分步指南）

发布: (2025年12月26日 GMT+8 00:41)
4 min read
原文: Dev.to

Source: Dev.to

介绍

在本指南中，我们将讨论 Tailwind CSS 是什么、如何在 React 项目中使用它，以及为什么开发者会选择它。

Tailwind CSS – 一个实用优先的 CSS 框架，内置了 flex、pt-4、text-center、rotate-90 等类，可直接在标记中组合使用，以构建任何设计。—— Tailwind CSS 官方网站

前置条件

  • 系统已安装 Node.js。（前往 Node.js 官网 免费下载安装。）
  • 已有一个 React 项目（或准备创建一个——见下文步骤）。
  • 基础的 React 知识。

注意： 如果你还没有创建 React 应用，不用担心——我们将在下一节进行讲解。

为什么选择 Tailwind CSS？

  • 提供实用优先的方式，拥有大量预定义类。
  • 帮助开发者更快构建 UI，无需为每个元素编写自定义 CSS。
  • 直接在标记中实现响应式设计。
  • 与 React 组件无缝配合。
  • 被 Shopify、Cursor 等现代站点和工具使用。—— 来源：Tailwind CSS 官方网站

步骤 1 – 创建 React 应用

使用 Vite 创建项目

npm create vite@latest project-name

Vite 是 React 文档推荐的快速开发工具。（参见我的详细博客《如何创建 React 应用》进行更深入的对比。）

安装 Tailwind CSS

npm install tailwindcss @tailwindcss/vite

上述依赖将被添加到 package.json 中。

配置 Vite 插件

打开 project-name/vite.config.js 并添加 Tailwind 插件：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

// https://vite.dev/config/
export default defineConfig({
  plugins: [react(), tailwindcss()],
});

引入 Tailwind CSS

编辑 project-name/src/index.css，将内容替换为：

@import "tailwindcss";

在组件中使用 Tailwind 类

// src/App.tsx (or App.jsx)
function App() {
  return (
    <>
      {/* Add Tailwind classes to style your elements */}
      Hello World
    </>
  );
}

export default App;

在此示例中，背景、文字颜色、字体大小、字体族、文本对齐和外边距等都由 Tailwind 实用类控制。

结论

我们介绍了 Tailwind CSS 的概念、流行原因，以及如何在使用 Vite 构建的 React 项目中安装和使用它。步骤面向初学者，避免了可能让新人感到困惑的深度探讨。

如果在安装或使用 Tailwind CSS 时遇到任何问题，欢迎留言——我很乐意提供帮助。

进一步阅读

Back to Blog

相关文章

阅读更多 »