typrose

Typography styles for Tailwind CSS v4. A CSS-native alternative to @tailwindcss/typography.

What is this?

The official Tailwind Typography plugin provides beautiful typographic defaults for rendering prose content (like markdown). This package started as a CSS-only port of that plugin, although it's since been further restructured for clarity and correctness.

By using plain CSS instead of a JavaScript plugin, customization becomes simpler and more direct. We've also reduced the default vertical spacing to be more in line with traditional book-style typography, which many find more visually balanced for long-form reading.

Installation

npm install typrose

Usage

Import in your main CSS file:

@import "typrose";

Then apply the prose class to your content just like with the original typography plugin. The same variants (prose-sm, prose-lg, prose-xl, prose-2xl) can be added. The same themes (prose-slate, prose-zinc, prose-neutral, prose-stone) are also available. And dark mode is supported using the prose-invert class.

Tailwind 4 utility variant

Typrose ships as plain CSS classes, so it works with or without Tailwind. If you use Tailwind 4 and want prose and friends to compose with variants (e.g. md:prose-lg), convert the classes to utilities with a one-line find/replace on the file: replace .prose with @utility prose (and likewise for the variant and theme classes, e.g. .prose-sm to @utility prose-sm). Tailwind then emits them as first-class utilities.

Custom spacing

One advantage of this CSS-native approach is the ability to control spacing and font size through simple CSS variables, rather than needing to configure a plugin or override utilities.

Reduce or increase all vertical spacing:

.prose-tight { --prose-scale: 0.6; }
.prose-loose { --prose-scale: 1.2; }

Scale font size independently from spacing:

.prose-large-text {
  --prose-font-scale: 1.25;
  --prose-scale: 1; /* keep normal spacing */
}

Releasing

The tree carries the next release's version (bump-after-release), so what ships is the version already in package.json. With a clean tree, run ship-release --yes (from fastship): it tags v<version>, pushes branch and tag, then bumps package.json and pushes the bump. The Release workflow (.github/workflows/release.yml) does the publishing: npm via trusted publishing — no tokens or login, with provenance attestation — then the GitHub release with generated notes. Verify with npm view typrose version once the Actions run is green.

Notes: provenance validation checks repository.url against the GitHub repo case-sensitively, so keep it spelled AnswerDotAI/typrose. Each released version is served at https://cdn.jsdelivr.net/npm/typrose@<version>/typrose.css. If a run fails before anything reaches npm, fix, then move the tag to the fixed commit and re-push it.

Attribution

Based on @tailwindcss/typography by Tailwind Labs.

License

MIT