Tailwind Typography Plugin Preview

Preview and customize @tailwindcss/typography prose classes live.

Prose Size

Color Modifier

Preview

Color: slate

HTML

How to Use

Select a prose size (sm, default, lg, xl, 2xl) to see how the typography scales.
Choose a color modifier to match your site's design system (slate, gray, zinc, neutral, stone).
Preview the rendered content live. The prose class is applied automatically to the wrapper.
Copy the HTML code to use in your project. Requires @tailwindcss/typography plugin installed.

How do I install the typography plugin?

Run npm install -D @tailwindcss/typography and add require('@tailwindcss/typography') to your tailwind.config.js plugins array.

Can I combine prose with other Tailwind classes?

Yes. Add additional classes to the container alongside prose. For example, class="prose prose-lg dark:prose-invert" handles dark mode too.