1

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

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

一种解决方法是使用非常聪明的 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 都不够熟悉，还不知道从哪里开始。

有什么想法或建议吗？

4

1 回答 1

1

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

// file: tailwind.config.js

module.exports = {
  purge: {
    content: [
      // ...
      './content/**/*.md'
    ]
  }
于 2022-01-18T14:29:29.280 回答