使用 create-react-app 设置 Tailwind

2025-05-27

使用 create-react-app 设置 Tailwind

什么是 Tailwind？

Tailwind 是一个功能齐全的 CSS 框架，它使用起来符合人体工程学，但功能足够低级，可以完全自定义。您可以配置它、添加插件并覆盖默认值。它会为您生成 CSS 类名，以便您在整个项目中使用它们。

我发现 Tailwind 特别适合开发 React 和 Vue 中的组件。

它看起来像什么？



import React from 'react'

export default function Input(inputProps) {
  return (
    <input 
      className="px-2 py-1 text-gray-700 bg-gray-200 rounded-lg shadow-md border-2 border-gray-800 focused:border-blue-400"
      {...inputProps} 
    />
  )
}
Enter fullscreen mode Exit fullscreen mode

这些类都是什么意思？大多数类的含义都一目了然。px-2和py-1分别表示水平 (x) 和垂直 (y) 的内边距。2和1表示尺寸。

Tailwind 默认会为您生成一组可自定义的尺寸。尺寸 1 的起始尺寸为0.25rem，之后每增加一级尺寸，尺寸都会递增0.25rem。

类名的命名遵循相当容易理解的约定，所以一旦你开始学习一些，你就能理解如何使用它们。例如，要设置 2rem 的垂直边距，你可以使用类名my-8. m，因为你设置的是边距，y因为你只想设置垂直轴边距，而且8你想要 2rem 的边距，而尺寸是 4rem。

可以接受颜色值的东西，比如文本、边框或背景，都有它们的前缀text、border和bg，后跟颜色名称text-gray、border-gray或，bg-gray然后是 100-900 之间的值，以 100 为单位跳变。因此，text-gray-700文本会变成相当深的灰色，而bg-gray-200背景会变成相当浅的灰色。

当元素的焦点伪类处于活动状态时，该类focused:border-blue-400将对边框应用蓝色 400 颜色。

rounded有多个后缀会影响类，例如sm、lg和 。full如果没有后缀，则默认为中等圆角边框。甚至可以单独更改任意角。

shadow类似于 ，rounded但默认值为 small 且无后缀，大小一直到2xl。其他适用于框阴影的修饰符也可用，例如inner或outline。

你为什么要使用它？

当您进入流程时，它就像使用简写编写常规 CSS，只不过您不必在单独的文件中执行此操作，不必想出一堆类名，也不必在每次更改单个元素的样式时都更新两个文件。

它使你的代码更容易删除。我们稍后会详细介绍这一点，但传统的 CSS 是追加式的，这意味着很难知道何时可以删除某些样式。

您可以使用 Tailwind 完全实现基于组件的样式，当不再需要组件时，您可以将样式与组件一起删除。

Tailwind 也完全可扩展。想要添加不同的颜色，或者更改 Tailwind 自带的颜色？完全可以，而且相关的 API文档完善，易于理解。

我们如何设置 create-react-app 来使用 Tailwind？

让我们通过使用 搭建一个新的 React 应用来设置我们的项目create-react-app。如果你还没有安装，可以使用 npx。



npx create-react-app setting-up-tailwind && cd setting-up-tailwind
Enter fullscreen mode Exit fullscreen mode

现在我们需要安装一些开发依赖项。



yarn add -D tailwindcss autoprefixer postcss-cli
Enter fullscreen mode Exit fullscreen mode

在项目的根目录中创建一个postcss.config.js文件并在您喜欢的编辑器中打开它。



module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}
Enter fullscreen mode Exit fullscreen mode

如果你有兴趣了解更多关于 PostCSS 的信息，请查看Github

建议与 Tailwind 一起安装 Autoprefixer，因为 autoprefixer 会自动跟踪 caniuse.com 以查看哪些 CSS 属性仍需要添加前缀，而开箱即用的 Tailwind 不提供任何供应商前缀。

现在我们应该初始化 Tailwind。这将在项目根目录中创建一个 tailwind.config.js 文件，其中包含默认配置。此步骤是可选的，但我通常在设置 Tailwind 项目时执行此操作，以便以后可以自定义配置，而无需返回。



npx tailwind init
Enter fullscreen mode Exit fullscreen mode

如果你打开它，它现在看起来相当简陋。也许我会在另一篇文章里讲解如何添加插件，或者自定义 Tailwind。



// tailwind.config.js
module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
}
Enter fullscreen mode Exit fullscreen mode

我们还需要创建一个输入 CSS 文件，以便 PostCSS 使用 Tailwind 进行处理。我通常会将其命名为tailwind.css，并将其添加到src我的 React 项目中的文件夹中，但您可以随意命名，并将其放置在任何您认为合适的位置。



/* src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

这些是 Tailwind 指令，用于添加核心 Tailwind 的三个主要部分。如果您不需要它们，可以省略一个或多个，以缩小您的软件包体积。但为了充分利用 Tailwind，您最终可能需要使用每个部分中的至少几个类。

当 Tailwind（PostCSS 中的第一个插件）看到这些指令时，它会@tailwind <name>用一些 CSS 替换每个指令。

为了方便以后修改，tailwind.config.js我们应该在文件中添加一些脚本package.json。将以下三个脚本添加到脚本对象中。



// package.json
{
  //...
  "scripts": {
    //... place these after the four scripts created by CRA
    "build:styles": "postcss src/tailwind.css -o src/styles.css", 
    "prebuild": "yarn build:styles",
    "prestart": "yarn build:styles"
  }
}
Enter fullscreen mode Exit fullscreen mode

或者如果你使用 npm 更改yarn为npm run



{
  //...
  "scripts": {
    //... place these after the four scripts created by CRA
    "build:styles": "postcss src/tailwind.css -o src/styles.css",
    "prebuild": "npm run build:styles",
    "prestart": "npm run build:styles"
  }
}
Enter fullscreen mode Exit fullscreen mode

构建我们的 React 组件

让我们删除 create-react-app 为我们创建的一些不必要的东西。



rm src/App.test.js src/App.css src/index.css src/logo.svg
Enter fullscreen mode Exit fullscreen mode

打开src/index.js并进行以下更改。



// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './styles.css' // <- change './index.css' to './styles.css'
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Enter fullscreen mode Exit fullscreen mode

现在打开src/App.js，删除所有内容并从头开始。



// src/App.js
import React from "react";
import Button from "./components/button";

function App() {
  return (
    <div className="flex flex-col w-3/4 mx-auto my-12 items-center">
      <h1>Super cool page</h1>
      <Button onClick={() => console.log("I was clicked")}>
        I am a button
      </Button>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

让我们创建一个简单的按钮组件，它将是一个普通按钮的小包装，但包含一些样式。我将这个组件放在components目录下src，但你可以将它放在任何你想要的地方。



// src/components/button.js
import React from "react";

export default function Button({ children, ...buttonProps }) {
  return (
    <button
      className="px-2 py-1 rounded-lg bg-green-400 text-green-800 text-xl font-light uppercase shadow-md hover:shadow-lg"
      {...buttonProps}
    >
      {children}
    </button>
  );
}
Enter fullscreen mode Exit fullscreen mode

如果您现在运行 yarn start，您应该看到 PostCSS 正在为我们处理样式，然后您应该看到类似这样的内容。

如此美丽，简直让人难以忘怀！

检查我们的应用程序是否已投入生产

因此，我们的应用程序现在看起来很棒，我们已准备好将其推向世界，但首先我们需要进行生产构建。



yarn build
Enter fullscreen mode Exit fullscreen mode

现在要检查我们的生产版本，我们可以使用类似的工具serve。您可以全局安装它，yarn global add serve也可以使用 npx。

如果你全局安装，你将使用



serve -s build
Enter fullscreen mode Exit fullscreen mode

或者如果你想使用 npx



npx serve -s build
Enter fullscreen mode Exit fullscreen mode

太棒了！我的页面看起来棒极了，我得承认。现在，我们打开浏览器的开发者工具，点击“网络”标签页，刷新页面，看看我们新版的 CSS 有多简洁……

看看 CSS 包的大小。350KB……哎呀！怎么这么大！？

Tailwind 会生成很多类。它生成的样式表超过 3000 行。但我们现在只使用了其中的一小部分，该怎么办呢？

瘦身

有一个名为 PurgeCSS 的实用程序，它会解析所有与给定文件匹配的文件，以便使用 CSS 中的选择器。如果匹配的文件中不存在选择器，它会从 CSS 中删除相应的样式，最终精简构建过程。

PurgeCSS 有一个 PostCSS 插件，因此我们只需安装新的依赖项，并添加一些设置即可postcss.config.js。



yarn add -D @fullhuman/postcss-purgecss
Enter fullscreen mode Exit fullscreen mode

打开你的postcss.config.js文件并进行一些添加。以下设置直接取自 Tailwind 文档。



// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project 
  content: [
    './src/**/*.js',
    './public/index.html',
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}
Enter fullscreen mode Exit fullscreen mode

PurgeCSS 插件中的 content 属性接受一个文件通配符数组，用于检查是否包含 CSS 选择器。在 create-react-app 项目中，我们希望它检查所有 React 组件，因此我们传入了./src/**/*.jswhich 属性，这意味着检查 src 目录下所有嵌套文件夹中是否存在以 为扩展名的文件.js。我们还希望它检查我们的./public/index.html文件，因为 Tailwind 使用 Normalize 规则，如果不检查项目的 HTML 页面，它会破坏我们希望它包含的许多 Normalize 规则。

PurgeCSS 存在一些缺陷，例如它实际上不会渲染您的组件来检查动态类的使用情况，因此您需要避免在动态渲染中使用部分类名，而是坚持使用完整的类名。



import React from 'react'

// DO NOT DO THIS
function Button({ color, children }) {
  return <button className={`text-${color}`}>{children}</button>
}

const App = () => (
  <Button color="red-300">Do not click me</Button>
)

///////////////////////////////////
// Instead do this!

function Button({ color, children }) {
  return <button className={`${color}`}>{children}</button>
}

const App = () => (
  <Button color="text-red-300">Do not click me</Button>
)
Enter fullscreen mode Exit fullscreen mode

我们需要做的另一件事是对 中的一个脚本进行一些小修改package.json。将 添加NODE_ENV=production到我们的prebuild脚本中将为 create-react-app 在后台使用的 Webpack 设置环境变量，并触发 PostCSS cli 在构建样式时使用 PurgeCSS。



// package.json
{
  "scripts": {
  //...
    "prebuild": "NODE_ENV=production yarn build:styles"
  }
}
Enter fullscreen mode Exit fullscreen mode

现在让我们构建生产环境，提供我们的应用程序，打开开发工具并再次检查我们的网络选项卡。



yarn build && serve -s build
Enter fullscreen mode Exit fullscreen mode

好多了！

如果您想进一步精简构建，那么有关于如何控制Tailwind 大小的详细文档。

现在你已经了解了如何在 create-react-app 项目中设置 Tailwind，以及如何使用 PurgeCSS + PostCSS 获得不错的生产环境效果。如果你有任何疑问，或者喜欢这篇文章，请在评论区留言告诉我。

文章来源：https://dev.to/hagnerd/setting-up-tailwind-with-create-react-app-4jd
Devto 翻译
PREV
现代 CSS 重置
NEXT
将模式匹配引入 TypeScript 🎨 介绍 TS-Pattern 将模式匹配引入 TypeScript