react项目引入tailwindcss不生效解决方案
根据tailwindcss官网的操作步骤下来,样式未生效,且未报错,看了挺多的资料,还是并未解决。
后面在另一个项目尝试时,报了下面的问题:
Error: PostCSS plugin tailwindcss requires PostCSS 8
根据这个链接的提示,重新安装了兼容版本
npm uninstall -D tailwindcss postcss autoprefixernpm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
如果还未生效,可以检查webpack.config.js里postcss的配置
{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了,呼~