CSS-only version of Tailwind Typography plugin for Tailwind CSS v4 with all prose variants.
npm install --save-dev tw-prose@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);
}Then use in your HTML:
<article class="prose">
<h1>Your content here</h1>
<p>Beautiful typography without any JavaScript.</p>
</article>
<!-- Size variants must be used with base prose class -->
<article class="prose prose-lg">
<h1>Larger typography</h1>
</article>tw-prose- Core CSS library with complete prose styling for Tailwind CSS v4
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
Dark mode:
.prose-invert- Dark theme variant (or use with CSSdark:classes)
- ✅ Complete prose styling for all HTML elements
- ✅ 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-proseclass
✅ What this includes:
- All core prose styling (headings, paragraphs, lists, tables, code blocks, etc.)
- Size variants:
prose-sm,prose-lg,prose-xl,prose-2xl - Dark mode support with
prose-invert - CSS-only approach (no plugin required)
❌ 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
Choose this if you want simple, lightweight typography without the full plugin overhead.
See the package README for complete documentation and usage examples.
This is a monorepo workspace:
# Install dependencies
npm install
# Start demo server
npm run dev
# Build all packages
npm run build
# Format code
npm run formatMIT