在 create-react-app 中引入 Tailwind CSS

Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。

步骤一、安装依赖

npm install tailwindcss@compat postcss@^7 autoprefixer@^9

注意：如果直接按照 tailwindcss 官网中的安装方式 npm install tailwindcss 可能会出现版本问题。

步骤二、在构建链中将 Tailwind 添加为PostCSS插件。

   在文章：create-react-app 修改 webpack 配置 讲述了如何配置 webpack，现在我们需要在 create-react-app 修改 webpack 配置 这篇文章的基础上进行配置。

执行完步骤一后，在 config-overrides.js 中添加如下代码。

2-1

步骤三、将 Tailwind 添加到你的 CSS 代码中

 在 create-react-app 文件的 index.css 文件中添加如下代码：

@import"tailwindcss/base";

@import"tailwindcss/components";

@import"tailwindcss/utilities";

步骤四、创建您的Tailwind配置文件（可选）

执行命令：npx tailwindcss init 会自动在项目根目录下创建一个 tailwind.config.js 文件，文件内容为

4-1

当然除了使用命令 npx tailwindcss init 创建  tailwind.config.js 也可以手动创建。

在 tailwind.config.js  中可以对 tailwindCSS 做一些自定义配置，详情见官网

参考网址：https://stackoverflow.com/questions/64903529/postcss-plugin-errors-with-rails-6-and-tailwindcss