Your Beautiful Typography
This paragraph will have perfect typography styling.
- Lists work great
- With proper spacing
CSS-only version of Tailwind Typography plugin (v4) with all prose variants
npm install tw-proseCSS-only version of Tailwind Typography plugin for Tailwind CSS v4 with all prose variants.
``bash`
npm install --save-dev tw-prose
Add the imports and required theme configuration to your CSS file:
`css
@import 'tailwindcss';
@import 'tw-prose';
@custom-variant dark (&:where(.dark, .dark *));
@theme {
/ Required theme variables for tw-prose /
--tw-prose-body: var(--color-gray-700);
--tw-prose-headings: var(--color-gray-900);
--tw-prose-lead: var(--color-gray-600);
--tw-prose-links: var(--color-gray-900);
--tw-prose-bold: var(--color-gray-900);
--tw-prose-counters: var(--color-gray-500);
--tw-prose-bullets: var(--color-gray-400);
--tw-prose-hr: var(--color-gray-200);
--tw-prose-quotes: var(--color-gray-900);
--tw-prose-quote-borders: var(--color-gray-200);
--tw-prose-captions: var(--color-gray-500);
--tw-prose-kbd: var(--color-gray-900);
--tw-prose-kbd-shadows: var(--color-gray-900);
--tw-prose-code: var(--color-gray-900);
--tw-prose-pre-code: var(--color-gray-200);
--tw-prose-pre-bg: var(--color-gray-800);
--tw-prose-th-borders: var(--color-gray-300);
--tw-prose-td-borders: var(--color-gray-200);
/ Dark theme variables (for prose-invert) /
--tw-prose-invert-body: var(--color-gray-300);
--tw-prose-invert-headings: var(--color-white);
--tw-prose-invert-lead: var(--color-gray-400);
--tw-prose-invert-links: var(--color-white);
--tw-prose-invert-bold: var(--color-white);
--tw-prose-invert-counters: var(--color-gray-400);
--tw-prose-invert-bullets: var(--color-gray-600);
--tw-prose-invert-hr: var(--color-gray-700);
--tw-prose-invert-quotes: var(--color-gray-100);
--tw-prose-invert-quote-borders: var(--color-gray-700);
--tw-prose-invert-captions: var(--color-gray-400);
--tw-prose-invert-kbd: var(--color-white);
--tw-prose-invert-kbd-shadows: var(--color-white);
--tw-prose-invert-code: var(--color-white);
--tw-prose-invert-pre-code: var(--color-gray-300);
--tw-prose-invert-pre-bg: oklch(from var(--color-black) l c h / 0.5);
--tw-prose-invert-th-borders: var(--color-gray-600);
--tw-prose-invert-td-borders: var(--color-gray-700);
}
`
` This paragraph will have perfect typography styling.html
Your Beautiful Typography
Smaller text for dense layouts.
Compact Typography
More spacious and comfortable reading.
Large Typography
Perfect for dark backgrounds.
Dark Theme
`
Base class (always required):
- .prose - Default typography styling
Size variants (use with .prose):
- .prose prose-sm - Small/compact typography.prose prose-lg
- - Large typography.prose prose-xl
- - Extra large typography.prose prose-2xl
- - 2X large typography
Theme variants:
- .prose-invert - Dark theme colors (use with dark backgrounds)
- ✅ Complete prose styling for all HTML elements (headings, paragraphs, lists, tables, code, etc.)
- ✅ Multiple size variants with proportional scaling
- ✅ Dark mode support with CSS variables
- ✅ No JavaScript required - pure CSS implementation
- ✅ Compatible with Tailwind CSS v4 stable release
- ✅ Low specificity using CSS :where() pseudo-class.not-prose
- ✅ Semantic HTML styling with opt-out class
✅ What this includes:
- All core prose styling (headings, paragraphs, lists, tables, code blocks, blockquotes, etc.)
- Size variants: prose-sm, prose-lg, prose-xl, prose-2xlprose-invert
- Dark mode support with
- CSS-only approach (no plugin required)
- Smaller bundle size
❌ What this doesn't include:
- Element-specific modifiers (prose-headings:{utility}, prose-p:{utility}, etc.)prose-red
- Color variants (, prose-blue, etc.)
- Advanced plugin-generated utilities
- Prose color customization per element
When to use this:
- You want simple, beautiful typography without plugin complexity
- You're using Tailwind CSS v4 and prefer CSS-only solutions
- You don't need element-specific customization
- You want a smaller bundle size
This library styles all standard prose elements:
- Headings: h1, h2, h3, h4, h5, h6p
- Text: , strong, em, small, mark, sub, supul
- Lists: , ol, li, dl, dt, dda
- Links: code
- Code: , pre, kbdblockquote
- Quotes: , citetable
- Tables: , thead, tbody, tr, th, tdimg
- Media: , figure, figcaptionhr
- Other: , and more
⚠️ Size variants must be used with the base prose class:
`html
``
This follows the same pattern as the official Tailwind Typography plugin.
MIT