NextJS：TailwindCSS 无法在生产环境中工作

Posted 2023-03-07

【中文标题】NextJS：TailwindCSS 无法在生产环境中工作

【英文标题】：NextJS: TailwindCSS not working in production

【发布时间】：2021-08-01 10:23:33

【问题描述】：

我正在使用 NextJS、TailwindCSS 和 Typescript。在开发中运行时，一切都按预期工作，但在生产中运行时，没有应用 tailwindcss 类。这是回购的链接：https://github.com/Capsule-app/next。

【参考方案1】：

由于清除而出现此问题。请查看official page

解决此问题的方法很少。 选项 A (Quick & Dirty Plus Lazy) : 在tailwind.config.js 文件中尝试purge: false

选项 B： 如果您使用的是 purge: ["./pages/**/*.js,jsx,ts,tsx", "./components/**/*.js,ts,jsx,tsx"], 或者如果您有自定义 css 类或第三方库类，则 follow Safelisting 使用 `install @fullhuman/postcss-purgecss 先尝试

// postcss.config.js

module.exports = 
   plugins: 
      tailwindcss: ,
      autoprefixer: ,
      ...(process.env.NODE_ENV === 'production'
         ? 
              '@fullhuman/postcss-purgecss': 
                 // added sections folder and changed extension to jsx
                 content: ['./src/components/**/*.jsx', './src/pages/**/*.js'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              ,
           
         : ),
   ,
`

注意：每个解决方案都取决于它的上下文。我请求你仔细阅读官方文档。

【讨论】：

将清除设置为此：purge: [ "./src/pages/**/*.js,jsx,ts,tsx", "./src/modules/**/*.js,ts,jsx,tsx", ], 为我工作

为什么有时在运行yarn build 时构建会以error Command failed with exit code 3221225477 失败，但是当我运行yarn cache clean 时，它会修复它？

@alexover1 你的 TailwindCSS 问题解决了吗？