Tailwind CSS v4 · plain CSS, no JavaScript

Typography extras

Four tiny packages for the CSS typography properties Tailwind doesn’t ship: hanging punctuation, small caps, drop caps and text rendering. Each one is a single CSS file of @utility rules, so variants and arbitrary values work as usual.

tailwind-hanging-punctuation

Hanging punctuation

Punctuation hangs outside the text block, so the letters, not the marks, line up with the edges. The blue hairlines mark both edges of the measure.

first
an opening quote or bracket at the start of the first line hangs left
last
a closing quote or bracket at the end of the last line hangs right
force-end
a comma or full stop at the end of any line hangs right
allow-end
a comma or full stop hangs only when the line wouldn’t fit otherwise (here every line fits, so nothing hangs)
book
first last force-end: what books do

“Good type is quiet, patient and kind: it lets you see the words, not the letters, the meaning, not the marks, the story, not the page, and then it steps aside.”

hanging-punctuation-none

tailwind-font-variant-caps

Small caps

Acronyms in full capitals shout in running text. Real small caps are drawn by the type designer at the height and weight of lowercase letters, so they sit calmly in a line. This page uses EB Garamond, which has true small caps and petite caps.

In 1975 the ESA and NASA teams met at 9 AM to compare notes on the Apollo–Soyuz docking.

font-variant-caps-normal

EB Garamond has no unicase or titling glyphs, so those two show the browser’s fallback: the text stays as it is.

tailwind-initial-letter

Drop caps

A drop cap that the browser sizes and aligns to the lines of text, with no floats or magic numbers. Use it with the first-letter: variant. The last option sets size and sink separately: three lines tall, sunk two lines.

Once the manuscript had been copied, the scribe left a square of empty parchment at the start of each chapter. Weeks later a second hand, the illuminator’s, would fill it with a single tall letter in red and gold, sized to sink exactly three lines into the text. Five centuries on, the browser can do the measuring for us.

first-letter:initial-letter-3

tailwindcss-text-rendering

Text rendering

A hint to the browser about what to favour when drawing text. Modern browsers already kern and use ligatures by default, so the difference is often subtle. speed may turn kerning and ligatures off; precision keeps glyph shapes exact when text is scaled.

Waffle office, AVATAR To Wo.

rendering-auto

Install

Requires Tailwind CSS v4. Install only the packages you need; each one is a single CSS file.

  1. Add the packages

    npm install \
  tailwind-hanging-punctuation \
  tailwind-font-variant-caps \
  tailwind-initial-letter \
  tailwindcss-text-rendering

  2. Import them after Tailwind in your CSS

    /* app.css */
@import "tailwindcss";
@import "tailwind-hanging-punctuation";
@import "tailwind-font-variant-caps";
@import "tailwind-initial-letter";
@import "tailwindcss-text-rendering";

  3. Use the classes, with any variant

    <blockquote
  class="hanging-punctuation-first">
<p class="first-letter:initial-letter-3">
<abbr class="font-variant-caps-all">
<h1 class="md:rendering-precision">

On Tailwind v3? Stay on the 1.x versions: npm install tailwind-hanging-punctuation@1 and add it to plugins in tailwind.config.js.