Typography

Install

pnpm i @tailwind/typography

Configure

tailwind.config.ts:

import tailwindTypography from '@tailwindcss/typography'

export default {
  plugins: [tailwindTypography()]
}

Element Modifiers

See Element Modifiers for a complete list of Tailwind Typography prose modifiers.

Usage

Using Tailwind's prose classes in HTML:

<div class="prose prose-sm prose-ul- :rounded-xl prose-headings:underline prose-a:text-blue-600">
  {{ markdown }}
</div

CSS:

.prose {
  /* Your custom styles here */
  max-width: 65ch; /* Example: limit the width of prose content */
}

.prose ul {
  /* Custom styles for unordered lists within prose */
}

prose ul > li::before {
  content: url('~icons/material-symbols-light:arrow-right');
  margin-right: 0.5rem;
}