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

Question

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

Answer 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) || [],
              },
           }
         : {}),
   },
}`

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