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

Question

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

在那个项目中，我为负边距即时生成类，如下所示：

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

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

所以我终于发现 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 中并将被包括在内。

这看起来很老套！

现在回答我的问题：

在 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 is not available 用于此模式。生成所需 classes 的最佳方法是将一些存根文件（如 stub.html 放置在源目录中的某处，然后将所有需要的 classes 添加到此文件中，以便 tailwind 可以抢先生成他们的风格。

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

Answer 2

看来你用的不是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 的情况下使用。

Answer 3

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

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

Dynamically created classes not available when using 'nuxt build' - tailwindcss nuxtjs

postcss

nuxt.js

tailwind-css

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

Dynamically created classes not available when using 'nuxt build' - tailwindcss nuxtjs

postcss

nuxt.js

tailwind-css

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