Establishing Baseline Typography Styles in Tailwind

This is my preferred approach to configuring Tailwind v4 to establish my baseline typographical styles -- and overriding them on a case-by-case basis.

Defining text variants

A text variant should contain 4 properties: font-weight, letter-spacing, line-height and text-size. I like to use CSS clamp() for smooth font scaling (as seen on LeetBin.com), to avoid harsh breakpoints.

Define text variants in your Tailwind config file (ex: tailwind.css) like so:

cssCopy
@import 'tailwindcss';

@theme {
  --font-sans: 'Arial', sans;
  --font-mono: 'Roboto Mono', mono;

  --text-*: initial;

  --text-h1: clamp(1.625rem, 1.574rem + 0.196vw, 1.75rem);
  --text-h1--font-weight: 700;
  --text-h1--line-height: 1.2;
  --text-h1--letter-spacing: 0.0125em;

  --text-h2: clamp(1.5rem, 1.449rem + 0.196vw, 1.625rem);
  --text-h2--font-weight: 700;
  --text-h2--line-height: 1.2;
  --text-h2--letter-spacing: 0.0125em;

  --text-h3: clamp(1.375rem, 1.324rem + 0.196vw, 1.5rem);
  --text-h3--font-weight: 700;
  --text-h3--line-height: 1.2;
  --text-h3--letter-spacing: 0.0125em;

  --text-base: 1rem;
  --text-base--font-weight: 300;
  --text-base--line-height: 1.5;
  --text-base--letter-spacing: 0.0125em;

  --text-sm: 0.875rem;
  --text-sm--font-weight: 300;
  --text-sm--line-height: 1.5;
  --text-sm--letter-spacing: 0.0125em;

  --text-mono: 1rem;
  --text-mono--font-weight: 300;
  --text-mono--line-height: 1.6;
  --text-mono--letter-spacing: 0.0125em;
}

Adding base styles

Define your baseline element styles in your base layer (ex: base.css):

cssCopy
@layer base {
  body {
    @apply font-sans text-base;
  }

  h1 {
    @apply text-h1;
  }

  h2 {
    @apply text-h2;
  }

  h3 {
    @apply text-h3;
  }

  pre,
  code {
    @apply text-mono;
  }
}

Tying it all together

With your text variants and baseline element styles defined, you'll only need to manually apply typographical classes to override the defaults.

A couple example scenarios:

• If you needed some smaller text: <p className="text-sm">Small Text</p>
• If you needed an h3 that looked like an h2: <h3 className="text-h2">Actually an h3</h3>