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

Posted 2023-03-06

【中文标题】使用“nuxt build”时动态创建的类不可用 - tailwindcss nuxtjs

【英文标题】：Dynamically created classes not available when using 'nuxt build' - tailwindcss nuxtjs

【发布时间】：2021-07-16 15:28:56

【问题描述】：

我有一个与 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: [],

【问题讨论】：

你的顺风版本是什么？

最新 2.1.1 取消 @nuxt/tailwindcss 4.0.3

【参考方案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，所以安全列表必须是完整类名的列表。无法将正则表达式列入安全列表，因为没有预先生成的类名列表来匹配该正则表达式。

【讨论】：

查看我更新后的带有选项安全列表的 tailwind css 文件，但不起作用...

如果您使用的是帖子中未提及的 JIT，它将无法工作。使用 JIT，您现在可以做的最好的方法是放置一些存根文件，例如 stub.html，其中包含您需要提前生成的所有类

好的，我删除了 jit，现在它可以工作了，太好了！所以如果我理解正确的话，要么是快速开发并添加一个存根文件，要么是删除 jit 并有一个安全列表？

现在是的，但请留意文档，我相信顺风团队也会添加一些方法来为 JIT 模式生成类

感谢您花时间解释问题！

【参考方案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'
],

【参考方案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 的情况下使用。

【讨论】：

我在 nuxtjs 配置中使用 jit，但没有帮助。

剩下的呢（purge 包含数组的键）。

能否提供更多调试细节？

我也相信你没有完全理解我的问题...

我做了，只是没有花更多时间深入研究配置问题。另外，我更喜欢使用windy。很高兴您找到了解决方案。