React安装TailwindCSS流程

首先按照官方文档进行安装：https://www.tailwindcss.cn/docs/guides/create-react-app

PS：在官方安装的指令改为

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

原因是react已经支持postcss 8。

 

跟随步骤安装完成后npm start产生如下错误

 

 

问题：TypeError: match.loader.options.plugins is not a function

解决办法：在craco.config.js文件里，将postcssOptions替换postcss，如下图：

 

 接下来继续 npm start 启动

浏览器报错：

 

 

在终端运行 

npm install postcss-preset-env --legacy-peer-deps

发生以下错误：
Error: PostCSS plugin tailwindcss requires PostCSS 8.

官方说react不支持PostCSS，但现在已经支持了，所以直接运行如下指令

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

安装最新版的postcss和autofixer。

接下来就可以使用了。