参考教程 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.jsmodule.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.jsmodule.exports = {purge: [],darkMode: false, // or 'media' or 'class'theme: {extend: {},},variants: {extend: {},},plugins: [],}
每个配置键的含义：
purge：这用于指定 Tailwind CSS 应该扫描的文件并查看正在使用哪些 Tailwind CSS 类，以便它可以删除生产中所有未使用的样式和类。darkMode：这指定了项目中暗模式的行为。该值可以是media- 意味着将根据暗模式媒体查询应用暗模式样式，这取决于用户操作系统的默认模式。它也可以是class，这意味着当 HTML 文档中的父元素具有dark类时，将应用暗模式样式。theme：这可以用于修改主题的调色板、字体、断点等。我们将在本教程后面看到如何更改主题。variants：这允许您将其他变体应用于 Tailwind CSS 的核心插件。我们将在后面的教程中看到它是如何工作的。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.jsimport './index.css';
