使用“nuxt build”时动态创建的类不可用 - tailwindcss nuxtjs

我有一个 nuxtjs 项目，与 tailwindcss 一起使用。

在该项目中，我动态生成负边距的类，如下所示：

<div class="mins-1" :class="['-mt-'+ m1*8]"></div>

整个项目在本地运行良好，但如果我运行nuxt build; nuxt start;它的编译没有错误，但似乎没有一个动态类可以工作。

所以我终于发现nuxt build过程做了一些CSS 树摇动，并且由于这些类不包含在 dom 中的任何位置，因此它们不包含在 css 构建过程中。

为了测试这一点，我创建了一个隐藏的 div，如下所示：

<div class="hidden -mt-8 -mt-16 -mt-24 -mt-32 -mt-40 -mt-48 -mt-56 -mt-64 -mt-72 -mt-80">ok needed classes</div>

瞧，这将使我的项目在之后可行nuxt build从现在开始，所需的类已存在于 dom 中并将被包含在内。

这看起来很hacky！

现在回答我的问题：

在 nuxtjs 项目的构建过程中包含动态创建的类的正确方法是什么？

更新了 tailwind.config.js（在打开 JIT 模式时不起作用！）

const colors = require("tailwindcss/colors")
module.exports = {
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
      // TypeScript
      'plugins/**/*.ts',
      'nuxt.config.ts'
    ],
    // UPDATE: safelist does NOT work in combination with JIT
    options: {
      safelist: ['mt-0', '-mt-8', '-mt-16', '-mt-24', '-mt-32', '-mt-40', '-mt-48', '-mt-56', '-mt-64', '-mt-72', '-mt-80'],
    }
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        emerald: colors.emerald,
        gray: colors.trueGray,
        cyan: colors.cyan
      },
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

您可以使用 Tailwind CSS 版本 3 将类列入安全列表。 我在 CMS 中使用 HTML 组件，为此我已将几个类列入安全列表！

module.exports = {
darkMode: "class",
content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
],
safelist: [
    'border-l-2',
    'border-blue-500',
    {
        pattern: /(bg|text|border)-(red|green|blue|purple|yellow)-(100|200|300|400|500)/,
    },
    {
        pattern: /(h|w)-(12|16|24|32|48|64|72|96)/,
    },
    'absolute',
    '-mt-9',
    '-ml-9',
    'pl-4',
    'overflow-scroll'
],}