Tailwind CSS Default Font Stacks

Tailwind CSS Default Font Stacks

Tailwind CSS ships with three built-in font family utilities. Understanding their composition helps you decide whether to use them as-is or customise them in tailwind.config.js.

font-sans

.font-sans {
  font-family: ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji",
    "Segoe UI Symbol", "Noto Color Emoji";
}

This stack uses the modern CSS generic keywords ui-sans-serif and system-ui to resolve to each platform's native sans-serif UI font. The emoji fonts at the end ensure colour emoji render correctly.

font-serif

.font-serif {
  font-family: ui-serif, Georgia, Cambria,
    "Times New Roman", Times, serif;
}

ui-serif resolves to the platform's default serif font (e.g., New York on macOS). Georgia and Cambria serve as screen-optimised fallbacks.

font-mono

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo,
    Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

ui-monospace resolves to SF Mono on macOS, Cascadia Mono on Windows 11, etc.

Customising in tailwind.config.js

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif'],
      serif: ['"Merriweather"', 'ui-serif', 'Georgia', 'serif'],
      mono: ['"JetBrains Mono"', 'ui-monospace', 'monospace'],
    },
  },
}

The ui-* Keywords

The ui-sans-serif, ui-serif, and ui-monospace keywords were introduced in the CSS Fonts Module Level 4 specification. They resolve to the OS's default font for that category, distinct from the older serif/sans-serif/monospace keywords which may resolve differently.