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 Config：

// tailwind.config.js

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

样式在开发中可以完美地工作，但在生产中只能使用某些样式。在检查build文件夹中的CSS文件后，似乎某些CSS类没有被提取或清除，因此导致应用程序的部分样式化。

Answer 1

发现了问题，postcss配置丢失了内容数组中的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) || [],
              },
           }
         : {}),
   },
}

Answer 2

当我将一些类的名称动态注入到我的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是一个变量。

解决方案

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

You can specify content that should be analyzed by PurgeCSS with an array of filenames

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

/*
 ** 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 3

我也遇到了同样的问题。 Tailwind will purge classes created with string concatenation。

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

n = ‘row-start-2’;

className={n}

对于我的用例，我不能这样做。相反，我使用了 safelist greedy option。

在顺风配置文件中：


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

然后我将“安全”类添加到我使用字符串连接创建类的所有元素中。

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

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

3 个答案:

问题

解决方案