ByteNoteByteNote
字

字节笔记本

2026年2月22日

在 React 项目中设置 Tailwind CSS 完全指南

#前端技术

在 CSS 库和框架的发展中，许多优秀的库被构建出来以简化开发者创建直观界面的工作。然而，很多库（如 Bootstrap、Foundation）会施加难以撤销的设计决策；它们带有预定义的组件，因此消除了动态定制的需求。这就是为什么 Tailwind CSS 被认为是构建 21 世纪 Web 界面的好选择。

使用 Tailwind CSS，你可以创建适合你需求或正在进行的项目的组件。这些组件可以通过利用 Tailwind CSS 的 utility-first 能力来创建。如果你厌倦了使用 Bootstrap 及其类似框架，你会发现 Tailwind CSS 非常适合用于实现美丽界面，因为你使用它提供的 utility 类来实现你需要的设计。

本文将介绍 Tailwind CSS 是什么以及如何使用它。最后，你将构建一个使用 Tailwind CSS utility 类的个人资料卡片。之后，你可以继续构建一个展示你技能和其他作品的作品集网站。

什么是 Tailwind CSS？

Tailwind CSS 是一个基于 utility 的低级 CSS 框架，旨在简化 Web 应用程序的构建，让你可以更专注于编写自定义 CSS，同时不离开 HTML 代码的舒适区，却能实现出色的界面。

例如，你可以用几个类来样式化一个按钮（而不必总是在 HTML 之外声明一个大类并编写一堆属性来实现效果）：

html
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ml-4 mt-4">
  Button
</button>

其他 CSS 框架（如 Bootstrap、Foundation、Bulma 等）为你提供各种预定义组件（如模态框、按钮、警告、卡片）。但使用 Tailwind CSS，你可以制作自己的组件，或者根据你的项目模型被迫制作自己的组件。换句话说，你实际上拥有这些组件，你可以在任何你选择的组件上发挥你的定制能力。这意味着不再需要与框架作斗争，试图找出需要覆盖哪些类才能获得你最初想要的结果。

为什么要使用 Tailwind CSS？

也许你还没有准备好背叛其他框架，或者你还没有被说服接受 Tailwind CSS 带来的好处。让我给你几个你可能想要考虑 Tailwind CSS 的理由。

无需命名约定

编写自定义 CSS 最压力的部分之一是给类命名。在任何时候，你都在思考哪个类应该是通用的还是特定的。你如何组织它们并确保它们被正确级联？Tailwind CSS 通过提供可以一直使用的基于 utility 的类来无缝解决这些问题。

然而，在某些情况下，你可能需要给一些类命名。有时当你需要提取某些组件并在以后的设计中使用它们时（借助 @apply 指令），这种情况往往会发生。

缓存优势

当编写自定义 CSS（或使用任何其他传统 CSS 框架）时，你在设计中进行更改时总是必须更改 CSS 文件。使用 Tailwind CSS，你不必担心这一点，因为你在标记中一遍又一遍地使用相同的类。这意味着你不必每次都破坏 CSS 缓存来对设计进行小的更改。

什么时候不使用 Tailwind CSS？

你是不是说我应该在每个项目中都使用 Tailwind CSS？当然不是！在某些情况下，你可能不想使用 Tailwind CSS。

如果你正在做一个小项目

当你需要开始一个截止日期很短的迷你项目（特别是只有少数用户会使用或只有你自己使用）时，Tailwind CSS 不是最佳选择。在这种情况下，我建议使用 Bootstrap、Foundation 或任何其他框架。那是因为它们带有预定义的即用型组件（入门主题）。使用 Tailwind CSS，你必须创造性地创建自己的组件。

如果你是 CSS 初学者

在深入任何项目的 Tailwind CSS 之前，建议先了解 CSS。希望将 Tailwind CSS 用于基于 Web 的项目的初学者应该首先掌握一定程度的 CSS。它提供了与底层 CSS 相关联的 utility 类，因此，只有具有扎实 CSS 知识的人才能轻松地使用它构建。

如果你不喜欢给元素添加很多类

编写 Tailwind CSS 时，你总是必须编写很多类，这会使你的代码库（HTML）看起来繁忙且有时难以阅读。如果你喜欢保持代码整洁，你可能想考虑编写自定义 CSS 或使用任何其他 CSS 框架（如 Bootstrap）。

有了这些理由，是时候开始今天的正事了：让我们一起在 React 项目中设置 Tailwind CSS！

开始使用

要设置我们的项目，我们将使用 create-react-app 来搭建一个新的 React 应用程序。如果你已经完成了这个过程，请跳过，否则，运行下面的命令：

bash
npx create-react-app react-tailwindcss && cd react-tailwindcss

接下来，我们安装一些开发依赖项。你可以使用任何适合你的选项。

使用 npm

bash
npm install tailwindcss postcss-cli autoprefixer@9.8.6 -D

使用 Yarn

bash
yarn add tailwindcss postcss-cli autoprefixer -D

我们需要通过创建默认配置来初始化 Tailwind CSS。在终端中输入以下命令：

bash
npx tailwind init tailwind.js --full

这个命令会在你项目的基础目录中创建一个 tailwind.js；该文件包含配置，如我们的颜色、主题、媒体查询等。它是一个有用的文件，有助于预定义的属性集，这将有助于在需要时重新品牌某些约定或属性。

如何配置 PostCSS？

PostCSS 文档指出：

"PostCSS 是一个使用 JS 插件转换样式的工具。这些插件可以检查你的 CSS、支持变量和 mixins、转换未来 CSS 语法、内联图像等等。"

为什么需要 Autoprefixer？

有必要与 Tailwind CSS 一起安装 Autoprefixer，因为 Autoprefixer 通常会跟踪 caniuse.com 来查看哪些 CSS 属性需要添加前缀。因此，Tailwind CSS 不提供任何供应商前缀。如果你对 PostCSS 好奇，可以导航到他们的 文档。

在你的基础目录中手动或使用命令创建 PostCSS 配置文件：

bash
touch postcss.config.js

将以下代码行添加到你的 PostCSS 文件中：

javascript
const tailwindcss = require('tailwindcss');
module.exports = {
  plugins: [
    tailwindcss('./tailwind.js'),
    require('autoprefixer')
  ],
};

因为 PostCSS 是检查 CSS 所必需的，所以有这个配置。

代码步骤：

  • 我们获取了 Tailwind CSS 包并将其放在一个变量中。
  • 我们将 tailwind.js（我们的默认基础配置）包装在我们的 tailwindcss 变量中。
  • 我们获取了 autoprefixer 包。

如何将 Tailwind 的组件、Utilities 和基础样式注入到你的应用中

在你的 src 文件夹中创建一个文件夹，命名为 assets，这是你所有样式存储的地方。在该文件夹中，分别创建 tailwind.css 文件和 main.css 文件。tailwind.css 文件将用于我们导入 Tailwind CSS 样式，以及自定义配置和规则。main.css 将保存由于我们在 tailwind.css 文件中的内容而生成的样式。

接下来，我们需要导入基础样式和配置。我们将在上面创建的 CSS 文件之一中执行此操作。将以下内容添加到你的 tailwind.css 文件中。

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

请注意，我们使用 @tailwind 指令将 Tailwind 的 base、components 和 utilities 样式注入到我们的 CSS 中：

  • @tailwind base 这会注入 Tailwind 的基础样式，它是 Normalize.css 和一些额外基础样式的组合。
  • @tailwind components 这会注入基于我们配置文件中注册的插件的任何组件（可重用样式，如卡片和表单元素等）类。
  • @tailwind utilities 这会注入所有 Tailwind 的 utility 类（包括默认和你自己的 utilities），它们是根据我们的配置文件生成的。

Tailwind CSS 将在构建时用所有生成的 CSS 替换这些指令。如果你使用 postcss-import，请改用以下方式：

css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

如何配置你的应用来构建你的 CSS

接下来，我们需要配置我们的项目，以便在我们运行 npm start 或 yarn start 命令时每次构建我们的 CSS 样式。

打开你的 package.json 文件，并使用下面的代码片段替换你 package.json 文件的脚本部分：

json
"scripts": {
  "start": "npm run watch:css && react-scripts start",
  "build": "npm run watch:css && react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
}

导入我们的 CSS

我们需要适当地导入我们的 CSS 文件，以确保当我们运行 yarn start 或 npm start 时它被正确监视和构建。

打开你的 index.js 文件并进行以下更改：

  • 导入我们的 main.css 文件并删除 import './index.css';
javascript
import './assets/main.css'

你的 index.js 在进行更改后应该看起来像这样：

javascript
import React from "react";
import ReactDOM from "react-dom";
import './assets/main.css';
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
  • 转到 App.js 并删除 import logo from './logo.svg';，只保留 import React from 'react';。还要删除 App 组件内的所有内容。（不要担心我们的 App.js 现在看起来很贫瘠——我们将在本文后面添加一些代码。）

让我们构建一个个人资料卡片项目

现在我们的设置工作正常，一切看起来都很好，让我们构建一个个人资料卡片。不过，我想向你展示我们开始之前应用程序的状态。

要启动你的应用程序，输入这个命令 npm start 或 yarn start。

你会观察到我们的 Tailwind CSS 正在 main.css 中构建所需的文件。

让我们开始我们的项目。以下是我们的代码（App.js）在没有实现 Tailwind CSS 类时的样子。

javascript
import React from 'react';

function App() {
  return (
    <div className="">
      <img className="" src={require('./profile.jpg')} alt="Display" />
      <div className="">
        <div className="">
          Blessing Krofegha
        </div>
        <p className="">
          When i'm not coding i switch to netflix with biscuits and cold tea as my companion.
          <span></span>😜
        </p>
      </div>
      <div className="">
        <span className="">#Software Engineer</span>
        <span className="">#Writter</span>
        <span className="">#Public Speaker</span>
      </div>
    </div>
  );
}

export default App;

上述代码片段的结果如下：所有文本默认都左对齐。图像相当大，因为没有样式。App 组件有四个主要的 div，我们将向它们添加类。这将改变元素的样式。

第一个 div

javascript
import React from 'react';

function App() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img className="w-full" src={require('./profile.jpg')} alt="Display" />
      <div className="">
        <div className="">
          Blessing Krofegha
        </div>
        <p className="">
          When I'm not coding, I switch to Netflix with biscuits and cold tea as my companion.
          <span></span>😜
        </p>
      </div>
      <div className="">
        <span className="">#Software Engineer</span>
        <span className="">#Writter</span>
        <span className="">#Public Speaker</span>
      </div>
    </div>
  );
}

export default App;

代码步骤：

  • 我们使用 max-w-sm 给 div 设置了小屏幕的最大宽度，并使用 rounded 类添加了 border-radius。为了防止滚动条出现，我们使用了 overflow-hidden。
  • 在第一个 div 上，我们使用 shadow-lg 类为背景添加了阴影效果。使用这个意味着我们将有一个从顶部 0px、右侧 10px、底部 15px、左侧 -3px 的 box-shadow（在左侧轴上有淡淡的黑色）。

图像

javascript
import React from 'react';

function App() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img className="w-full" src={require('./profile.jpg')} alt="Display" />
      <div className="">
        <div className="">
          Blessing Krofegha
        </div>
        <p className="">
          When I'm not coding, I switch to Netflix with biscuits and cold tea as my companion.
          <span></span>😜
        </p>
      </div>
      <div className="">
        <span className="">#Software Engineer</span>
        <span className="">#Writter</span>
        <span className="">#Public Speaker</span>
      </div>
    </div>
  );
}

export default App;

代码步骤：

  • 我们使用 w-full 将图像宽度设置为 100%。这相当于 width: 100%。

第二个 div

javascript
import React from 'react';

function App() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img className="w-full" src={require('./profile.jpg')} alt="Display" />
      <div className="px-6 py-4">
        <div className="">
          Blessing Krofegha
        </div>
        <p className="">
          When I'm not coding, I switch to Netflix with biscuits and cold tea as my companion.
          <span></span>😜
        </p>
      </div>
      <div className="">
        <span className="">#Software Engineer</span>
        <span className="">#Writter</span>
        <span className="">#Public Speaker</span>
      </div>
    </div>
  );
}

export default App;

代码步骤：

  • 我们使用 px-6 在左右（x 轴）添加了 1.5rem 的 padding。
  • 我们使用 py-4 在上下（y 轴）添加了 1rem 的 padding。

第三个 div

javascript
import React from 'react';

function App() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img className="w-full" src={require('./profile.jpg')} alt="Display" />
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">
          Blessing Krofegha
        </div>
        <p className="text-gray-700 text-base">
          When I'm not coding, I switch to Netflix with biscuits and cold tea as my companion.
          <span></span>😜
        </p>
      </div>
      <div className="">
        <span className="">#Software Engineer</span>
        <span className="">#Writter</span>
        <span className="">#Public Speaker</span>
      </div>
    </div>
  );
}

export default App;

代码步骤：

  • 我们使用 font-bold 将字体粗细设置为粗体。
  • 我们使用 text-xl 将字体大小设置为 1.25rem。
  • 我们使用 mb-2 在底部添加了 0.5rem 的 margin。
  • 我们使用 text-gray-700 将文本颜色设置为深灰色。
  • 我们使用 text-base 将字体大小设置为 1rem。

第四个 div

javascript
import React from 'react';

function App() {
  return (
    <div className="max-w-sm rounded overflow-hidden shadow-lg">
      <img className="w-full" src={require('./profile.jpg')} alt="Display" />
      <div className="px-6 py-4">
        <div className="font-bold text-xl mb-2">
          Blessing Krofegha
        </div>
        <p className="text-gray-700 text-base">
          When I'm not coding, I switch to Netflix with biscuits and cold tea as my companion.
          <span></span>😜
        </p>
      </div>
      <div className="px-6 py-4">
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Software Engineer</span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Writter</span>
        <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#Public Speaker</span>
      </div>
    </div>
  );
}

export default App;

代码步骤：

  • 我们使用 inline-block 将 span 的 display 设置为 inline-block。
  • 我们使用 bg-gray-200 将背景颜色设置为浅灰色。
  • 我们使用 rounded-full 将 border-radius 设置为 9999px（完全圆形）。
  • 我们使用 px-3 在左右添加了 0.75rem 的 padding。
  • 我们使用 py-1 在上下添加了 0.25rem 的 padding。
  • 我们使用 text-sm 将字体大小设置为 0.875rem。
  • 我们使用 font-semibold 将字体粗细设置为半粗体。
  • 我们使用 text-gray-700 将文本颜色设置为深灰色。
  • 我们使用 mr-2 在右侧添加了 0.5rem 的 margin。

最终结果是一个漂亮的个人资料卡片，展示了 Tailwind CSS 的强大功能。

结论

在本文中，我们介绍了 Tailwind CSS 是什么，为什么你可能想要选择它而不是其他 CSS 框架，以及如何在 React 项目中设置它。我们还构建了一个个人资料卡片项目来演示如何使用 Tailwind CSS utility 类。

Tailwind CSS 是一个强大的工具，可以帮助你快速构建自定义设计，而无需离开 HTML。它提供了大量的 utility 类，让你可以精确控制每个元素的样式。虽然它可能需要一些时间来适应，特别是如果你习惯了传统的 CSS 编写方式，但一旦掌握，你会发现它是一个非常高效的工具。

希望这篇教程能帮助你开始使用 Tailwind CSS。如果你有任何问题或想要了解更多，请查看 Tailwind CSS 官方文档。

原文链接： Setting Up Tailwind CSS In A React Project 作者： Blessing Krofegha 发布日期： 2020年2月24日 来源： Smashing Magazine

前端技术
上一篇

Semi Design：字节跳动开源的现代化设计系统

下一篇

在 React 项目中设置 Tailwind CSS 完全指南

分享: