【react项目引入tailwindcss不生效解决方案】

根据tailwindcss官网的操作步骤下来,样式未生效,且未报错,看了挺多的资料,还是并未解决。

后面在另一个项目尝试时,报了下面的问题:

Error: PostCSS plugin tailwindcss requires PostCSS 8

根据这个链接的提示,重新安装了兼容版本

javascript 复制代码
npm uninstall -D tailwindcss postcss autoprefixer

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat  postcss@^7 autoprefixer@^9

如果还未生效,可以检查webpack.config.js里postcss的配置

javascript 复制代码
{
   loader: require.resolve('postcss-loader'),
   options: {
     ident: 'postcss',
     plugins: () => [
       require('postcss-flexbugs-fixes'),
       require('postcss-preset-env')({
         autoprefixer: {
           flexbox: 'no-2009'
         },
         stage: 3
       }),
       require('tailwindcss'), // ~~新增~~
       postcssNormalize()
     ],
     sourceMap: isEnvProduction && shouldUseSourceMap
   }
 }

目前按照这个流程走下来,两个项目都可以使用tailwindcss了,呼~

相关推荐
bigyoung1 分钟前
如何使用 `react-i18next` 来国际化一段包含 React 组件的文本
前端·javascript
沐土Arvin3 分钟前
前端代码格式化工具HTML离线版
前端
舟舟好梦5 分钟前
SZU大学物理实验报告|光敏电阻
前端
林太白18 分钟前
NestJS-角色模块
前端·javascript·nestjs
种豆走天下21 分钟前
VUE进阶案例
前端·javascript·vue.js
陈随易26 分钟前
盘点微信开发者工具V1和V2的区别
前端·后端·程序员
zengyuhan50328 分钟前
使用Rust 串口通信 及 MTP文件获取
前端·rust
小宋搬砖第一名29 分钟前
阿里云部署小白教程
前端
陈随易31 分钟前
ECharts v6.0发布,新布局,新主题,新功能
前端·后端·程序员
HHW33 分钟前
更快更强的 JavaScript 运行时:Bun 入门与实践指南
前端·javascript