react脚手架项目craco可配置化后如何应用tailwindcss【待后续更新完善】

react

一些关键插件的版本:

全局插件:

create-reat-app:^3.4.1

npx:^6.9.0

项目插件

```

"@craco/craco": "^5.6.4",

"craco-less": "^1.17.0",

"postcss": "^8.1.4",

"postcss-loader": "^4.0.4",

"tailwindcss": "^1.9.6",

"typescript": "~3.7.2"

```

《craco配置create-react-app项目》参考我之前的博客

因为react脚手架的特殊，安装tailwindcss时需要手动集成postcss与postcss-loader

在craco.config.js中添加如下配置：

项目根目录添加如下内容的postcss.config.js

cd到根目录，执行npx tailwindcss init创建一个最小化的 tailwind.config.js 文件，亦或是npx tailwindcss init --full创建一个包含所有 Tailwind 默认配置的完整配置文件

关于purge参数，手动添加一下

选择一个项目根样式文件引入三个tailwindcss相关的三个css，（我的是App.less）

vs code添加代码提示插件

=============================================================================

解决这些讨厌的红线:

方法一，改变自己的写法，一个@apply引用一个类

参考https://stackoverflow.com/questions/61443484/how-to-solve-semi-colon-expected-csscss-semicolonexpected

如果不想改变自己的写法，上述链接里面还有有一个不改变写法的可行方案，vs code添加stylelint插件

然后在vscode的setting中添加 "less.validate": false

问题解决: