如何使用 Webpack 从零开始配置 React 项目并设置 Tailwind CSS | 分步指南

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

Tailwind CSS 是一个实用性优先的 CSS 框架，它允许开发者无需切换到 CSS 文件即可设计自定义 Web 组件。在本指南中，我将一步步引导您完成在从零开始配置的 React 项目中设置 Tailwind CSS 的过程（不使用任何预配置组件create-react-app）。我们将安装和配置 Tailwind CSS 和 PostCSS，将它们与 CSS 和 Webpack 集成，最后将 Tailwind 样式添加到我们的 React 代码库中。（非常有趣！）

注意！
本文是“从零开始搭建 React 环境”系列文章的第四部分。在本系列文章中，我们已经从头开始搭建了一个 React 项目，安装了 ESLint、Prettier 和 husky，并使用 Jest 和 React Testing Library 配置了测试环境。在本文中，我们将在此基础上添加 Tailwind CSS 来进行样式设置。

你可以从这个GitHub 仓库中找到初始代码。

先决条件

• 我假设您已经从头开始配置了一个 React 项目。您可以参考上面提供的仓库，但如果您需要本文用于其他任何目的，仍然可以继续阅读。

• 您的机器上已安装 VS Code 和 Node。

让我们概览一下我们将要使用的工具。

为什么选择 Tailwind CSS？
Tailwind CSS 自诩为实用性优先的 CSS 框架。它并不关注样式元素的具体功能，而是着重于如何呈现样式。

无需离开HTML，即可快速构建现代网站。

使用 Tailwind CSS，您可以直接在代码中设置样式，html也jsx可以使用 Tailwind CSS 预定义的类，从而以更优雅、更高效的方式编写 CSS。但这并不意味着您应该始终使用 Tailwind CSS，因为它对于小型项目来说可能过于复杂，并且需要对 CSS 有相当的了解。点击此处了解更多关于 Tailwind CSS 的信息。

PostCSS
是一个使用 JavaScript 插件转换样式的工具。这些插件可以从多个方面改进你的样式。例如，就像JavaScript 的ESLint一样，PostCSS 允许你使用插件来检测 CSS 代码中的错误，或者使用下一代 CSS 语法（有点像 CSS 版的 Babel），等等。Tailwind CSS 就是这些插件之一，因此要使用 Tailwind，我们需要安装 PostCSS。点击此处
了解更多关于 PostCSS 的信息。

稍后我们会更详细地介绍这些工具，现在让我们开始吧。

请按照以下步骤操作

1. 安装 Tailwind 依赖项
运行以下命令安装 Tailwind CSS（作为开发依赖项）。

npm install tailwindcss autoprefixer --save-dev

// using yarn

yarn add tailwindcss autoprefixer --dev

• tailwindcss是一个用于安装 Tailwind CSS 的核心软件包
• autoprefixer这是一个 PostCSS 插件，Tailwind CSS 使用它来自动添加浏览器厂商前缀，从而编写出所有浏览器都支持的样式。

2. 配置 Tailwind CSS：
在根文件夹中创建一个名为 `.css` 的文件tailwind.config.cjs，用于存放 Tailwind 的配置和自定义设置。
我们之所以使用 `.css` 扩展名，是.cjs因为我们将使用requireES 模块中的语法。

添加tailwind.config.cjs以下代码

module.exports = {
    content: ['./src/**/*.{js,jsx}', './public/index.html'],
    theme: {
        extend: {
            colors: {
                primary: '#1B73E8',
            },
        },
    },
    plugins: [],
};

这段代码是什么意思？

• 我们正在使用以下方式导出这些配置module.exports

• 这个content字段非常重要，因为它指定了我们将添加 Tailwind 代码的文件类型。在我们的示例中，我们告诉 Tailwind 查找src指定文件夹.js及其jsx扩展名下的所有文件，以及index.html公共文件夹中的所有文件。

• 在这个文件夹中，我们将通过扩展默认配置来存放我们的自定义设置。在我们的示例中，我们创建了一个名为“颜色代码”theme的颜色变量，因此，每当我们指定该颜色时，Tailwind CSS 都会插入它的值。基本上，您可以根据需要定义您的样式。primary'#1B73E8'primary

• 这个plugins字段用于放置我们想要与 Tailwind 一起使用的插件。在本例中，我们没有使用插件，所以数组为空。

请注意，还有更多配置选项，您可以根据需要进行自定义。点击此处了解更多关于 Tailwind 配置的信息。

3. 安装 PostCSS 依赖项
运行以下命令安装 PostCSS（作为开发依赖项）。

npm install postcss --save-dev

// using yarn

yarn add postcss  --dev

4. 配置 PostCSS：
在根文件夹中创建一个名为 `postcss.yml` 的文件postcss.config.cjs，该文件将保存 PostCSS 的配置信息，并添加以下代码。

const tailwindcss = require('tailwindcss');
const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [tailwindcss('./tailwind.config.cjs'), autoprefixer],
};

这段代码是什么意思？

• 我们正在导入之前安装的 Tailwind CSS 和 autoprefixer 包，require如果您使用 ES 模块，可以使用 import 语句。
• 在配置导出中，我们指定了 PostCSS 在解析 CSS 文件时将使用的插件。在本例中，我们指定了 Tailwind 和 AutoPrefixer。对于 Tailwind，我们指定了 Tailwind 配置文件的路径（ ）。点击此处tailwind.config.cjs了解更多关于 PostCSS 配置的信息。

5. 在 CSS 文件中注入 Tailwind CSS
我们已经在代码库中安装并配置了 Tailwind CSS 和 PostCSS，但是如何在 React 组件中添加 Tailwind CSS 呢？如上所述，Tailwind CSS 使用与实际 CSS 属性对应的预定义类。即使我们不直接编写 CSS，从技术上讲，我们仍然需要 CSS 文件。

• 在 src 文件夹中App.jsx（之前文章中已创建），创建一个名为 `my-main-CSS` 的文件app.css，这将是我们的主 CSS 文件。
• 添加app.css以下代码

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

这将使用 Tailwind 指令将 Tailwind 样式注入到我们的 CSS 文件中。这就像导入 Tailwind 样式，使其被识别为真正的 CSS 语法。点击此处了解更多关于 Tailwind 指令的信息。

• 最后，将该 CSS 文件导入到 React 项目的入口文件中。在本例中，我将其放在一个App.jsx文件中。

你app.jsx应该看起来像这样

import React from 'react';
import './app.css'; //added line

function App() {
    return <h1>Hello world! I am using React</h1>;
}

export default App;

6. 使用 Webpack 支持 CSS
在第一篇文章中，我们使用 Webpack 配置了 React 项目，将所有文件打包成一个单独的 JavaScript 文件，并通过我们的 .js 文件提供服务index.html。Webpack的问题在于它并非开箱即用地支持所有类型的文件。每次添加新的文件类型时，我们需要使用 Webpack 的加载器来识别它们。我们在第一篇文章中对 .js和 .js文件
也做了同样的处理。.jsjsx

本文中，我们刚刚.css在代码库中添加了一个文件，因此我们需要安装 CSS 加载器，以便 Webpack 能够识别它。

运行以下命令安装 Webpack CSS 加载器（作为开发依赖项）。

npm install style-loader css-loader postcss-loader

// using Yarn

yarn add style-loader css-loader postcss-loader --dev

- style-loader: webpack 使用该库将 CSS 注入 DOM。
- css-loader: webpack 使用该库来解释和解析 CSS 中的导入。
- postcss-loader: webpack 使用该库来处理 PostCSS，因为我们之前安装了 PostCSS。

安装这些加载器后，我们需要webpack.config.js通过在模块对象中添加新规则来将它们添加到我们的模块中。

{
  test: /\.css$/i,
  use: ['style-loader', 'css-loader', 'postcss-loader'],
},

• 这里我们告诉 Webpack，当它遇到带有扩展名的文件时，.css应该使用我们安装的加载器来打包它们。

最终，你的完整 webpack.config.js 文件应该如下所示

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

module.exports = {
    entry: 'index.jsx',
    mode: 'development',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'index_bundle.js',
    },
    target: 'web',
    devServer: {
        port: '5000',
        static: {
            directory: path.join(__dirname, 'public'),
        },
        open: true,
        hot: true,
        liveReload: true,
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: 'babel-loader',
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader', 'postcss-loader'],
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'public', 'index.html'),
        }),
    ],
};

7. 使用 Tailwind 为 React 组件添加样式
完成这些配置后，您应该可以在任何 React 组件中编写 Tailwind 代码而不会遇到任何问题。
在组件中app.jsx添加以下代码

import React from 'react';
import './app.css';

function App() {
    return <h1 className="text-primary text-4xl font-bold">Hello world! I am using React</h1>;
}

export default App;

primary我们刚刚添加了 Tailwind 类，用于更改我们配置的文本颜色tailwind.config.cjs，增大字体大小并将文本加粗。

运行应用程序后，npm start页面应如下所示

好了！这就是在用 Webpack 从零开始配置的 React 项目中配置 Tailwind CSS 的方法。你可以在这个GitHub 仓库中找到本文的代码。

测试方面呢？
目前，如果您尝试运行测试（npm test），它们会失败，因为导入了 CSS 文件，而 Jest 默认情况下无法识别 CSS 文件，因此我们需要模拟它们，这将是下一篇文章的主题……