在 Nuxt.js 降价内容中使用 Tailwind CSS 类答案

【问题标题】：Using Tailwind CSS classes in Nuxt.js markdown content在 Nuxt.js 降价内容中使用 Tailwind CSS 类
【发布时间】：2022-01-18 22:29:29
【问题描述】：

我将 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>

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

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

<!-- 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 都不够熟悉，还不知道从哪里开始。

有什么想法或建议吗？

【问题讨论】：

标签： nuxt.js markdown tailwind-css nuxt-content

【解决方案1】：

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

// file: tailwind.config.js

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

【讨论】：