在react脚手架中使用Tailwind CSS （入门）

参考教程  Build a Website with React and Tailwind CSS - SitePoint

本文翻译外网，主要自用

1. 安装 Tailwind CSS 所需的依赖项

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

我们正在安装具有 PostCSS 7 兼容性版本的 Tailwind CSS，因为在撰写本文时，Create React App（或 CRA）不支持 PostCSS 8。 

2. 安装 CRACO 来覆盖 PostCSS 配置并添加tailwindcss插件

npm install @craco/craco

3. 修改package.json ，将react-scripts修改为craco

// package.json 

"scripts": {
  - "start": "react-scripts start",
  - "build": "react-scripts build",
  - "test": "react-scripts test",

  + "start": "craco start",
  + "build": "craco build",
  + "test": "craco test",

}

4. 在根目录下创建craco.config.js

// craco.config.js

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

此配置文件将tailwindcss和autoprefixer插件添加到postcss

5. 为 Tailwind CSS 生成配置文件

npx tailwindcss init

注意：如果您使用的是 Node.js v14，则会报告有关运行此命令时抛出的错误的问题，该命令显示“找不到模块 'autoprefixer'”。更新到 Node.js v15 应该可行

这将tailwind.config.js在项目的根目录中创建文件，有如下内容

// tailwind.config.js

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

每个配置键的含义：

1. purge：这用于指定 Tailwind CSS 应该扫描的文件并查看正在使用哪些 Tailwind CSS 类，以便它可以删除生产中所有未使用的样式和类。
2. darkMode：这指定了项目中暗模式的行为。该值可以是media- 意味着将根据暗模式媒体查询应用暗模式样式，这取决于用户操作系统的默认模式。它也可以是class，这意味着当 HTML 文档中的父元素具有dark类时，将应用暗模式样式。
3. theme：这可以用于修改主题的调色板、字体、断点等。我们将在本教程后面看到如何更改主题。
4. variants：这允许您将其他变体应用于 Tailwind CSS 的核心插件。我们将在后面的教程中看到它是如何工作的。
5. plugins：添加插件的部分，可以添加额外的实用程序类、自定义变体、基本样式或更多。

 更改purge密钥

purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"],

6. 将一些 Tailwind CSS 样式包含在src/index.css

/* src/index.css*/

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

该@tailwind指令基本上将样式导入到index.css 

7. 将src/index.css导入到src/index.js

// index.js
import './index.css';