在 Nuxt.js markdown 内容中使用 Tailwind CSS 类

Question

我正在使用 Nuxt 以及内容插件和 Tailwind 排版。我想在 Markdown 文件中使用 Tailwind 类以允许添加一些基本布局。

<!-- file: content.md -->

<div class="grid grid-cols-2 gap-4">
  <div>

### Some markdown...

  </div>
  <div>

### Some other markdown...

  </div>
</div>

由于渲染的 markdown<nuxt-content />不是用 Tailwind 处理的，因此其中使用的类不会包含在生成的样式中（除非它们在项目的其他地方使用）。

一种解决方法是使用非常聪明的 Tailwind 功能，该功能将包含注释中提到的类。我创建了一个全局组件，其中包含 Markdown 内容中可能使用的所有类。

<!-- file: grid.vue -->

<template>
  <div class="grid">
    <slot />
  </div>
</template>

<style>
/* Tailwind CSS

  grid-cols-1
  grid-cols-2
  [...]

  gap-2
  gap-4
  [...]

*/
</style>

然后我只是在降价内容中使用该组件：

<!-- file: content.md -->

<grid class="grid-cols-2 gap-4">
  <!-- ... -->
</grid>

我想知道是否有一种方法可以通过 Tailwind 运行 markdown 内容以动态获取类。我认为它需要自定义构建步骤，但我对 Nuxt.js 或 Tailwind 还不够熟悉，还不知道从哪里开始。

有什么想法或建议吗？

Answer 1

事实证明这个问题很容易解决。我只需要将内容文件夹添加到 Tailwind 配置中。它可以在Nuxt Tailwind 文档中找到，尽管没有明确提及。

// file: tailwind.config.js

module.exports = {
  purge: {
    content: [
      // ...
      './content/**/*.md'
    ]
  }