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

Question

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

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

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

整个项目在本地运行良好，但如果我运行nuxt build; nuxt start;，它会被正确编译，但似乎没有一个动态类可以运行。

所以我终于发现nuxt build进程做了一些css tree shaking，而且由于这些类没有包含在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: [],
}

Answer 1

您可以尝试 PurgeCss 配置的安全列表选项：

// tailwind.config.js
module.exports = {
  purge: {
    // Configure as you need
    content: ['./src/**/*.html'],
    // These options are passed through directly to PurgeCSS
    options: {
      // List your classes here, or you can even use RegExp
      safelist: ['bg-red-500', 'px-4', /^text-/],
      blocklist: [/^debug-/],
      keyframes: true,
      fontFace: true,
    },
  },
  // ...
}

编辑：似乎 OP 正在使用 JIT tailwind mode，safelist 是 not available 现在这种模式。生成所需类的最佳方法是将一些存根文件（如 stub.html）放在源目录中的某个位置，然后将所有需要的类添加到该文件中，以便 Tailwind 可以抢先为它们生成样式。

EDIT2： safelist 现在可用于 jit！但它不支持正则表达式。因为默认情况下不生成 CSS，所以安全列表必须是完整类名的列表。无法将正则表达式列入安全列表，因为没有预先生成的类名列表来匹配该正则表达式。

Answer 2

您可以使用 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'
],}

Answer 3

你好像没有使用tailwind的JIT，你看一下：它会在本地开发时帮助你，只生成需要的类。

https://tailwindcss.com/docs/just-in-time-mode

然后，你的配置文件应该是这样的

module.exports = {
  mode: 'jit',
 // These paths are just examples, customize them to match your project structure
 purge: [
   './public/**/*.html',
   './src/**/*.{js,jsx,ts,tsx,vue}',
 ],
 ...
}

---

免责声明，我自己（还）没有尝试过，但这应该可以正常工作。即使是 IMO，动态类也只能在启用 JIT 的情况下使用。