# typrose

Typography styles for Tailwind CSS v4. A CSS-native alternative to [@tailwindcss/typography](https://github.com/tailwindlabs/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

```bash
npm install typrose
```

## Usage

Import in your main CSS file:

```css
@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:

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

Scale font size independently from spacing:

```css
.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](https://github.com/AnswerDotAI/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](https://github.com/tailwindlabs/tailwindcss-typography) by [Tailwind Labs](https://tailwindcss.com).

## License

MIT