在Nuxt.js标记内容中使用尾风CSS类

Question

我使用Nuxt与内容插件和尾风排版。我希望在标记文件中使用Tailwind类，以允许添加一些基本布局。

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

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

### Some markdown...

  </div>
  <div>

### Some other markdown...

  </div>
</div>

由于在<nuxt-content />中呈现的标记不是用Tailwind处理的，所以在其中使用的类不会包含在生成的样式中(除了在项目中使用elswhere )。

解决方法之一是使用非常聪明的Tailwind特性，它将包括注释中提到的类。我创建了一个全局组件，该组件包含可能在减价内容中使用的所有类。

<!-- 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运行减价内容来动态地获取类。我假设它需要一个定制的构建步骤，但是我对Nuxt.js或Tailwind还不太熟悉，还不知道从哪里开始。

有什么想法或建议吗？

Answer 1

事实证明，这是很容易解决的。我只需要将内容文件夹添加到Tailwind配置中。它是在Nuxt尾风文档中找到的，尽管没有明确提到。

// file: tailwind.config.js

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