css - [NextJs/TailwindCSS] : css classes are missing in production

Question

顺风版:v9.3.5
PostCSS 配置:

// postcss.config.js

module.exports = {
   plugins: {
      tailwindcss: {},
      autoprefixer: {},
      ...(process.env.NODE_ENV === 'production'
         ? {
              '@fullhuman/postcss-purgecss': {
                 content: ['./components/**/*.js', './pages/**/*.js'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              },
           }
         : {}),
   },
}

顺风配置:

// tailwind.config.js

module.exports = {
   theme: {
      extend: {
         colors: {
            tint: 'rgba(0,0,0,0.3)',
         },
      },
   },
   variants: {},
   plugins: [],
}

样式在开发中完美运行，但在生产中只有一些样式有效。在检查 build 文件夹中的 CSS 文件时，看起来某些 CSS 类没有被提取或可能被清除，因此导致应用程序的部分样式。

Answer 1

发现问题，postcss config 缺少内容数组中的部分文件夹，而且因为我的 js 文件有 jsx ，我也需要补充一下。

// 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: ['./components/**/*.jsx', './pages/**/*.js', './sections/**/**/*.jsx'],
                 defaultExtractor: content =>
                    content.match(/[\w-/:]+(?<!:)/g) || [],
              },
           }
         : {}),
   },
}