[NextJs/TailwindCSS]：生产中缺少 css 类

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

编辑：PurgeCSS 版本 3.0 添加安全列表选项，替换白名单

当我将某些类的名称动态注入到我的 html 模板中时，我遇到了同样的问题。
我使用的是nuxt.js/tailwindcss所以你需要先阅读文档来解决你的问题。

问题

这是生成生产中缺少的类的代码

 computed: {
    axeY() {
      return this.y < 0 ? `-translate-y${this.y}` + ' ' : `translate-y-1` + ' '
    },
    axeX() {
      return this.x < 0 ? `-translate-x${this.x}` : `translate-x-${this.x}`
    },

PostCSS 会将所有文件分析到内容表中（在配置文件中声明），
请注意，我的文件不包含带有翻译前缀 的类
，如您所见，我缺少的类是：[translate-x-1，-translate-x -1, translate-y-1, -translate-y-1] ...数字 1 是一个变量。

解决方案

• 我需要通过将这些类添加到白名单来告诉purgecss不要删除它们
  
• 或者您可以将它们使用到您的文件中，例如通过创建一个 except 文件（由 PostCSS 分析的文件）

您可以使用文件名数组指定 PurgeCSS 应分析的内容

• 通过指定您正在使用的所有核心插件来维护 TailWindCSS 的配置文件
• 在复杂的情况下，您可以在配置文件中使用正则表达式。
  就我而言，我可以通过在选项变量中传递白名单来直接在TailWindCSS的配置文件中配置清除，这是我使用第一个解决方案时的配置文件：
  

/*
 ** TailwindCSS Configuration File
 **
 ** Docs: https://tailwindcss.com/docs/configuration
 ** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
 */
const num = [1, 2, 3, 4, 5, 6, 8, 10, 12]
const whitelist = []
num.map((x) => {
  whitelist.push('translate-x-' + x)
  whitelist.push('-translate-x-' + x)
  whitelist.push('translate-y-' + x)
  whitelist.push('-translate-y-' + x)
})
module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
  },
  theme: {},
  variants: {
    backgroundColor: ['hover', 'focus', 'active'],
  },
  plugins: [],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
    options: {
      whitelist,
    },
  },
}

Answer 2

发现问题，postcss配置在内容数组中缺少部分文件夹，而且由于我的 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) || [],
              },
           }
         : {}),
   },
}