CODEWITHSUNDEEP
nuxt.jsmarkdowntailwind-cssnuxt-content
Andreas Korth
Andreas Korth

Reputation: 91

Using Tailwind CSS classes in Nuxt.js markdown content

I'm using Nuxt with the content plugin and Tailwind typography. I'd like to use Tailwind classes inside markdown files to allow for adding some basic layout.

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

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

### Some markdown...

  </div>
  <div>

### Some other markdown...

  </div>
</div>

Since rendered markdown in <nuxt-content /> isn't processed with Tailwind, the classes used within it will not be included in the generated styles (except they're used elswhere in the project).

One workaround is to use a very clever Tailwind feature which will include classes that are mentioned in comments. I created a global component that includes all classes that might be used in the markdown content.

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

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

<style>
/* Tailwind CSS

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

  gap-2
  gap-4
  [...]

*/
</style>

Then I just use that component in the markdown content instead:

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

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

I was wondering if there is a way to run the markdown content through Tailwind somehow to pick up the classes dynamically. I'd assume it requires a custom build step but I'm not familiar enough with either Nuxt.js or Tailwind yet to know where to start.

Any ideas or suggestions?

Upvotes: 5

Views: 2055

Answers (1)

Andreas Korth
Andreas Korth

Reputation: 91

This turned out to be easily solved. I just needed to add the content folder to the Tailwind config. It's found in the Nuxt Tailwind documentation, although not explicitely mentioned.

// file: tailwind.config.js

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

Upvotes: 3

Related Questions