nuxt.js - 具有 JIT 模式的 TailwindCSS 不应用 .yaml 文件中的类

Question

我在 JIT 模式下使用@nuxtjs/tailwindcss: "^4.1.2" 和基本设置，因为我真的需要在不编写自定义 CSS 的情况下生成任意样式的可能性。

我有一个 .yaml 文件，其中包含我使用Nuxt Content 模块获取的一些块

blocks:
  - type: "img"
    src: "/images/an-image.jpg"
    alt: "Image alt"
    width: 400
    height: 400
    sizes: "sm:400px md:800px lg:1200px"
    classes: "max-w-[200px] my-10"
  - type: "another type""
    ...

因此，例如，在索引页面中，我从 .yaml 文件中获取内容，如下所示：

async fetch(this: PageIndex) {
const currentLang = this.$i18n.locale

const page = await this.$content('pages')
  .where({ name: this.$route.name })
  .where({ lang: currentLang })
  .fetch()
  .catch((err) => {
    err({ statusCode: 404, message: 'Page not found' })
  })

this.page = page[0]

}

当然，这些块在页面对象内，我循环每个块并作为道具传递给每个组件

<component
  :is="getBlock(block.type)"
  v-for="block in blocks"
  :key="block._key"
  :block="block"
/>

然后，我想使用 .yaml 文件中的类（例如“max-w-[200px] my-10”）并直接在 Vue 组件中应用，所以我有一个计算属性：

get classes(): string {
  return this.block.classes || ''
}

在 Vue 模板中应用如下：

 <div :class="`${column} ${align}`">
    <nuxt-picture
      loading="lazy"
      :src="`${block.src}`"
      provider="static"
      legacy-format="jpg"
      :alt="block.alt"
      :width="block.width"
      :height="block.height"
      :sizes="block.sizes"
      :class="`${classes}`"
    />
  </div>

但是来自 .yaml 文件的类在源代码中应用，但没有关联的 css 样式规则。

有办法让这种模式按预期工作吗？

我的 tailwind.config.js 是：

module.exports = {
  mode: 'jit',
  purge: {
    enabled: true,
    content: [
      '~/components/**/*.{vue,js}',
      '~/layouts/**/*.vue',
      '~/pages/**/*.vue',
      '~/content/**/*.yaml',
    ],
    options: {
      keyframes: true,
    },
  },
}

标签： nuxt.jstailwind-cssjitnuxt-content