如何将 TailwindCSS 与 ReactJS 集成？（9 个简单步骤）

1）创建一个 React 应用程序（使用您选择的名称）：

create-react-app tailwind-react

2）安装以下开发依赖项：

npm i -D tailwindcss postcss-cli autoprefixer

3）生成 tailwind 配置文件（包含所有类的列表）：

npx tailwind init tailwind.js -full

4）创建postcss.config.js文件：

touch postcss.config.js

5）在postcss.config.js中写入以下代码：

const tailwind = require("tailwindcss");
module.exports = {
    plugins: {
        tailwindcss("./tailwind.js)
        require("autoprefixer)
    }
}

6）在 src 文件夹中创建一个新文件夹“assets”，并创建两个新文件“tailwind.css”和“main.css”

cd src

mkdir assets && cd assets

touch tailwind.css main.css

7）在 tailwind.css 中写入以下一段代码：

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utility";

8）现在，在 package.json 中添加以下内容

"scripts":{}

"start": "npm run watch:css && react-scripts start",
"build": "npm build build:css && react-scripts build",
"build:css":"postcss src/assets/tailwind.css -o src/assets/main.css",
"watch:css":"postcss src/assets/tailwind.css -o src/assets/main.css",

您的脚本对象应该看起来像这样：

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css"
  },

9）最后，运行你的 React 应用程序：

npm run start

或者

npm start

有关整个过程的视频演示，请参阅@traversymedia的视频
https://www.youtube.com/watch?v=FiGmAI5e91M&t=488s

文章来源：https://dev.to/korosensei27/how-to-integrate-tailwindcss-with-reactjs-in-9-easy-steps-1omn