Effortlessly Style Your Articles with Tailwind Typography

This Vue.js code will render an article containing HTML generated from parsed Markdown:

<script setup>
import { marked } from 'marked';

const markdown = marked.parse(/* some markdown code */)
</script>

<template>
  <article v-html="markdown"></article>
</template>

As you can see, the article has no styles because the project uses Tailwind, and by default, Tailwind resets all default styling on HTML tags.

Styling the article manually with Tailwind classes isn't practical since the tags are dynamically generated from Markdown.

To solve this, use the Tailwind Typography plugin. By simply adding the prose class to the article, typography styles will be automatically applied.

<script setup>
import { marked } from 'marked';

const markdown = marked.parse(/* some markdown code */)
</script>

<template>
<article class="prose" v-html="markdown"></article>
<template>

To use Tailwind Typography, you need to install the plugin first:

npm install -D @tailwindcss/typography

Then, register the plugin in your tailwind setup.

If you're using Tailwind version 4, open your main CSS file and add the @plugin directive with the value @tailwindcss/typography:

@import "tailwindcss";
@plugin "@tailwindcss/typography";

If you're using Tailwind version 3, open the tailwind.config.js file and add @tailwindcss/typography to the plugins array:

module.exports = {
  theme: {},
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Once registered, just add the prose class to any HTML element where you want typography styles to be applied:

<article class="prose">
  <!-- typography content -->
</article>

For advanced usage, refer to the official documentation at https://github.com/tailwindlabs/tailwindcss-typography.