当使用Tailwind和Next.js时，为什么在生产环境中缺少CSS类？

Question

版本号为Tailwind 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配置：

// tailwind.config.js

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

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

- prvnbist

Answer 1

编辑：PurgeCSS 版本 3.0 添加了 safelist 选项，替换了 whitelist。

当我动态注入一些类名到我的 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前缀开头的类。
如您所见，我缺少的类有：[translate-x-1,-translate-x-1, translate-y-1, -translate-y-1] ...数字 1 是一个变量。

解决方案

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

您可以通过文件名数组指定应由PurgeCSS分析的内容

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

/*
 ** 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,
    },
  },
}

- BENMEDDAH Mohamed

---

这个解决方案是可行的，只不过现在应该使用“safelist”而不是“whitelist”。 - ankitjena

Answer 2

发现问题了，postcss配置中content数组缺少sections文件夹，并且由于我的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) || [],
              },
           }
         : {}),
   },
}

- prvnbist

Answer 3

我曾经也遇到过这个问题。Tailwind 会清除使用字符串拼接创建的类名。

解决方法之一是将类名保存为变量。

n = ‘row-start-2’;

className={n}

对于我的使用情况，我无法这样做。相反，我使用了safelist贪婪选项。

在Tailwind配置文件中：

module.exports = {
  purge: {
    content: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
    options: {
      safelist: {
        greedy: ["/safe$/"],
      },
    },
  },

然后我将“safe”类添加到所有元素中，其中我正在使用字符串连接来创建类。

className={`safe sm:grid-cols-${smCols} sm:grid-rows-${smRows} md:grid-cols-${mdCols} md:grid-rows-${mdRows}

- Dominic Marrone

---

这个答案是不正确的。首先，这只会将安全类列入白名单，而不是除安全类以外的所有类。其次，您必须使用正则表达式来匹配 safelist.greedy 模式，例如 /safe$/（不带引号）。 - Peter Slaný