不到一分钟即可将 Tailwind 集成到 React 项目中

步骤 1 — 使用 CRA 模板设置 React

步骤 2 — 安装 npm 包

步骤 3 — 设置 Tailwind 文件

步骤 4 — 创建 PostCSS 配置

步骤五——编写构建脚本

步骤 6 — 在代码中包含 Tailwind 指令

附加设置

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

上次我给 React 项目添加 Tailwind 的时候，花了大约 30 分钟做研究，参考之前的项目，才最终让那些实用类正常工作。所以我决定做一个清单，方便以后自己或其他人参考，在 React 中使用 Tailwind 时使用。

注意：以下方法并非将 Tailwind 添加到 React 项目的唯一途径，但对我来说，它们在大多数情况下都有效。如果您有任何想法，欢迎在下方留言分享您的方法，我可能会在未来几天将其添加到这篇博客中。

步骤 1 — 使用 CRA 模板设置 React

首先运行以下命令安装 CRA 模板：

npx create-react-app cool-demo

步骤 2 — 安装 npm 包

完成后，继续package.json查看所有已安装的软件包。现在，为了添加和配置Tailwind，我们需要添加一些额外的软件包以方便使用。

其他附加套餐包括：

yarn add tailwindcss postcss-cli autoprefixer @fullhuman/postcss-purgecss npm-run-all

1️⃣tailwindcss是 Tailwind 的官方 npm 包，也是我们项目的关键包。

2️⃣postcss-cli是一个使用 JS 插件转换样式的工具

3️⃣是一个 PostCSS 插件，它可以自动为引用caniuse.com 的autoprefixer内容添加供应商前缀，这真是太棒了。

4️⃣@fullhuman/postcss-purgecss是另一个 PostCSS 插件，它可以移除所有未使用的 CSS 样式，从而减小构建文件的大小。

5️⃣npm-run-all同时运行多个构建脚本或依次运行多个构建脚本

步骤 3 — 设置 Tailwind 文件

现在是时候将 Tailwind 文件添加到我们的项目中了。我们需要创建两个文件，一个用于tailwind.css指定要从 Tailwind 库引入哪些内容，另一个tailwind.config.js用于根据我们的需要配置 Tailwind。

手动创建以上两个文件，或者将以下内容复制粘贴到终端中创建。

touch src/tailwind.css tailwind.config.js

1️⃣tailwind.css

现在，npm 包会引用这个文件tailwindcss，然后生成一个包含我们所有实用类的庞大 Tailwind CSS 文件。

但首先，我们需要添加所需的类类型。所以请将此添加到您tailwind.css刚刚创建的文件中。

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

2️⃣tailwind.config.js

如上所述，您需要根据自身需求进行配置。Tailwind官方文档详细介绍了具体操作方法。就我个人而言，我更倾向于桌面优先的设计策略，这与 Tailwind 的默认设置完全相反，所以我通常会先从桌面端入手。

module.exports = {
  purge: [],
  theme: {
    extend: {},
    screens: {
      xl: { max: "1279px" },
      // => @media (max-width: 1279px) { ... }

      lg: { max: "1023px" },
      // => @media (max-width: 1023px) { ... }

      md: { max: "767px" },
      // => @media (max-width: 767px) { ... }

      sm: { max: "639px" },
      // => @media (max-width: 639px) { ... }
    },
  },
  variants: {},
  plugins: [],
};

专业提示：与其tailwind.config.js自己创建并复制粘贴任何样板代码，不如运行此npx命令来获得一个框架设置，以便快速上手。

npx tailwindcss init

--full最后还要传递该标志，以获取 Tailwind 的完整配置文件。

npx tailwindcss init --full

步骤 4 — 创建 PostCSS 配置

在我们的项目中配置postcss其附加插件。

postcss.config.js在根文件夹中创建一个名为的文件，或者直接将其复制到终端。

touch postcss.config.js

现在使用我们安装的插件和 Tailwind 更新该文件。

// Configure purgecss plugin
const purgecss = require("@fullhuman/postcss-purgecss")({
  // Specify the paths to all of the template files in your project
  content: [
    "./public/**/*.html",
    "./src/**/*.jsx",
    // etc.
  ],

  // This is the function used to extract class names from your templates
  defaultExtractor: content => {
    // Capture as liberally as possible, including things like `h-(screen-1.5)`
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

    // Capture classes within other delimiters like .block(class="w-1/2") in Pug
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

    return broadMatches.concat(innerMatches);
  },
});

// Export all plugins our postcss should use
module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
  ],
};

如果你从未听说过Purgecss，它是 postcss 的另一个插件，可以帮助我们精简 Tailwind 生成的庞大 css 文件，并将其缩小到我们代码库中包含的类/样式。

请注意，我们仅在production开发阶段使用此插件，因为在开发过程中它并不重要，而且运行速度可能较慢，所以我们最好先解决这个问题。其余部分是，tailwindcss如前所述autoprefixer，供应商会为我们的 CSS 样式添加前缀，例如。

-o-transition: all 4s ease;
-webkit-transition: all 4s ease;
-ms-transition: all 4s ease;
-moz-transition: all 4s ease;
transition: all 4s ease;

步骤五——编写构建脚本

这就是我们将要用到这个npm-run-all 包的时候了。所以基本上，我们想要做的就是创建一些 npm 脚本，以便在我们对 Tailwind 文件进行任何更改时，都能监视并编译它。

为了不让你们感到困惑，我逐一解释。

1️⃣

"build:tailwind": "postcss src/tailwind.css -o src/tailwind.generated.css"

在发布构建版本之前，您需要运行一次该程序。该程序会接收一个输入文件，并根据src/tailwind.css需要将 CSS 类输出到指定位置。tailwind.generated.css-o

2️⃣

"watch:tailwind": "postcss -w src/tailwind.css -o src/tailwind.generated.css"

这与上面的唯一区别在于-w标志，即监视标志，现在每当您更新tailwind.css文件时，您都会立即看到更改生效。

3️⃣

"start": "react-scripts start"
"dev": "run-p watch:tailwind start"

现在终于将它们组合在一起了，运行后npm start我们的 React 可以正常工作，但要监视tailwind.css文件更改，我们需要添加run-p watch:tailwind命令。

run-p这是我们npm-run-all软件包中的一个组件，它的作用是并行运行我们指定的脚本。因此，我们可以同时运行这两个脚本，而无需切换终端npm run watch:tailwind。npm run start

4️⃣

"prebuild": "npm run build:tailwind",
"build": "react-scripts build",

最终我们需要构建命令来部署我们的应用程序，所以让我们添加它们。需要注意的是，pre这里的关键字很特殊，它意味着每次build执行我们的命令之前，都prebuild必须先执行其他命令。和prestart也是如此start。

还有一个post关键字可以实现反向操作，比如postbuild在运行一个脚本后再运行另一个脚本build。不过，我还没用过。

这是所有相同命令的列表，其中包含一些用于测试的默认命令。

"scripts": {
        "build:tailwind": "postcss src/tailwind.css -o src/tailwind.generated.css",
        "watch:tailwind": "postcss -w src/tailwind.css -o src/tailwind.generated.css",
        "start": "react-scripts start",
        "dev": "run-p watch:tailwind start",
        "prebuild": "npm run build:tailwind",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
},

现在我们已经完成了 Tailwind 运行脚本的设置，您可以根据自己的使用场景添加任何其他需要的脚本。

步骤 6 — 在代码中包含 Tailwind 指令

不使用 Tailwind CSS 代码时最糟糕的情况就是：你忘记将生成的 CSS 文件添加到项目的入口文件中。所以，请将这行代码添加到你的配置文件index.js或App.js其他任何你认为合适且有效的位置。

import "./tailwind.generated.css";

另外，你可能也想删除.gitignore这个文件，因为它是一个非常大的 CSS 文件，里面充满了实用类，你可能不想让它使你的 GitHub 项目变得杂乱无章。

我们来看看它是否有效。

尝试添加一些你从 Tailwind 中了解的类，例如字体颜色或边距，看看是否有效。

我对App.js文件进行了修改，并为文本元素添加了text-yellow-400类text-green-600，结果就得到了这个结果。

附加设置

在为这篇博客做研究时，我发现了一个名为cssnano 的软件包，它在 npm 上有超过 600 万次的下载量，你可以查看它的网站，上面展示了一个很棒的示例。

这是另一个 PostCSS 插件，它可以移除我们在 CSS 文件中编写的所有奇怪注释（例如“像这样”）和空格，并压缩文件以进一步减小打包后的大小。不妨试试看。

请在下方分享您的配置，或对我的做法提出任何见解，无论对错。欢迎随时在 Twitter 上联系我，我的账号是@heytulsiprasad。