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

sulingliang2025-02-12 14:35

根据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了，呼~