tw-prose

CSS-only version of Tailwind Typography plugin for Tailwind CSS v4 with all prose variants.

Installation

``bash npm install --save-dev tw-prose`

`Usage`

`$3`

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); }`

`$3`

`html


  Your Beautiful Typography

  This paragraph will have perfect typography styling.

  
    Lists work great

    With proper spacing


  Compact Typography

  Smaller text for dense layouts.


  Large Typography

  More spacious and comfortable reading.


  Dark Theme

  Perfect for dark backgrounds.


Available Classes
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)

`Features`

- ✅ 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 - ✅ Semantic HTML styling with opt-out.not-prose class

`What's Different from Official @tailwindcss/typography?`

✅ What this includes:

- All core prose styling (headings, paragraphs, lists, tables, code blocks, blockquotes, etc.) - Size variants:prose-sm, prose-lg, prose-xl, prose-2xl- Dark mode support withprose-invert- CSS-only approach (no plugin required) - Smaller bundle size

❌ What this doesn't include:

- Element-specific modifiers (prose-headings:{utility}, prose-p:{utility}, etc.) - Color variants (prose-red, 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

`Supported HTML Elements`

This library styles all standard prose elements:

- Headings: h1, h2, h3, h4, h5, h6- Text:p, strong, em, small, mark, sub, sup- Lists:ul, ol, li, dl, dt, dd- Links:a- Code:code, pre, kbd- Quotes:blockquote, cite- Tables:table, thead, tbody, tr, th, td- Media:img, figure, figcaption- Other:hr, and more

`Important Usage Notes`

⚠️ Size variants must be used with the base prose class:

`html

Content

This follows the same pattern as the official Tailwind Typography plugin.

License

MIT

tw-prose

CSS-only version of Tailwind Typography plugin for Tailwind CSS v4 with all prose variants.

Installation

``bash npm install --save-dev tw-prose`

`Usage`

`$3`

Add the imports and required theme configuration to your CSS file:

`css @import 'tailwindcss'; @import 'tw-prose';

@custom-variant dark (&:where(.dark, .dark *));

`$3`

`html


  Your Beautiful Typography

  This paragraph will have perfect typography styling.

  
    Lists work great

    With proper spacing


  Compact Typography

  Smaller text for dense layouts.


  Large Typography

  More spacious and comfortable reading.


  Dark Theme

  Perfect for dark backgrounds.


Available Classes
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)

`Features`

`What's Different from Official @tailwindcss/typography?`

✅ What this includes:

❌ What this doesn't include:

When to use this:

`Supported HTML Elements`

This library styles all standard prose elements:

`Important Usage Notes`

⚠️ Size variants must be used with the base prose class:

`html

Content

This follows the same pattern as the official Tailwind Typography plugin.

License

MIT