在 Create React App 中安装 Tailwind CSS

创建您的工程

如果您还没有建立一个新的 Create React App 项目，请先创建一个新的项目。最常见的方法是使用 Create React App：

初始化 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。

通过 npm 安装 Tailwind

安装 Tailwind 以及其它依赖项:

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

安装和配置 CRACO

由于 Create React App 不能让您覆盖原生的 PostCSS 配置，所以我们还需要安装 CRACO 才能配置 Tailwind。

npm install @craco/craco

安装完毕后，更新 ​package.json​ 文件中的 ​scripts​，将 ​eject ​以外的所有脚本都用 ​craco ​代替 ​react-scripts​。

  {
    // ...
    "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject"
    },
  }

接下来，在项目根部创建一个 ​craco.config.js​，并添加 ​tailwindcss ​和 ​autoprefixer ​作为 PostCSS 插件。

创建您的配置文件

接下来，生成您的 ​tailwind.config.js​ 文件：

npx tailwindcss-cli@latest init

这将会在您的项目根目录创建一个最小化的 ​tailwind.config.js​ 文件：

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

配置 Tailwind 来移除生产环境下没有使用到的样式声明

在您的 ​tailwind.config.js​ 文件中，配置 ​purge ​选项指定所有的 components 文件，使得 Tailwind 可以在生产构建中对未使用的样式进行摇树优化。

    // tailwind.config.js
    module.exports = {
        purge: [],
        purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
        darkMode: false, // or 'media' or 'class'
        theme: {
            extend: {},
        },
        variants: {
            extend: {},
        },
        plugins: [],
    }

在您的 CSS 中引入 Tailwind

打开 Create React App 默认为您生成的 ./src/index.css 文件 并使用 ​@tailwind​ 指令来包含 Tailwind的 ​base​、 ​components ​和 ​utilities ​样式，来替换掉原来的文件内容。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的样式文件。

最后，确保您的 CSS 文件被导入到您的 ​./src/index.js​ 文件中。

    // src/index.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import reportWebVitals from './reportWebVitals';

    ReactDOM.render(
        <React.StrictMode>
            <App />
        </React.StrictMode>,
        document.getElementById('root')
    );

  // ...

您已经完成了所有步骤！现在，当您运行 ​npm run start​, Tailwind CSS 就可以在您的 Create React App 项目中使用了。