Nuxt•2y ago

Markdown not rendering style with Tailwind

I have the @nuxtjs/tailwindcss and @nuxt/content installed. Doing a simple page like so:

<template>
  <main>
    <ContentDoc path="terms-of-service" />
  </main>
</template>

<script setup lang="ts">
</script>

<template>
  <main>
    <ContentDoc path="terms-of-service" />
  </main>
</template>

<script setup lang="ts">
</script>

With my content/terms-of-service.md looking like this:

---
title: 'Terms of Service'
---

# Hi
This is a test

---
title: 'Terms of Service'
---

# Hi
This is a test

I get no styling for the markdown text Where am I going wrong?

7 Replies

manniL•2y ago

Tailwind does reset default styles of e.g. h1 you can, for example, use the typography plugin + prose class

manniL•2y ago

https://tailwindcss.com/docs/typography-plugin

@tailwindcss/typography - Tailwind CSS

Beautiful typographic defaults for HTML you don't control.

GiuliopimeOP•2y ago

I tried that but I didn't know I needed a plugin for that thanks. I wish the docs would cover that

manniL•2y ago

the tailwind docs should cover the preflight/reset 🙂

manniL•2y ago

https://tailwindcss.com/docs/preflight#headings-are-unstyled

Preflight - Tailwind CSS

An opinionated set of base styles for Tailwind projects.

GiuliopimeOP•2y ago

Yeah that does, but the nuxt ones don't iirc

manniL•2y ago

True. But that’s also a bit difficult: how much info to put on the module page, how much do you “assume” that people know. (Because they know the library/css framework/…)

Gaming

Programming

Markdown not rendering style with Tailwind