Build a modular type scale from a base size and a ratio, see every step set in the real face, and copy it as Tailwind theme variables.
Ship the interface, keep the code
Ship the interface, keep the code
Ship the interface, keep the code
Ship the interface, keep the code
Ship the interface, keep the code
Ship the interface, keep the code
Ship the interface, keep the code
@theme {
--text-sm: 0.8rem;
--text-sm--line-height: 1.67;
--text-base: 1rem;
--text-base--line-height: 1.6;
--text-lg: 1.25rem;
--text-lg--line-height: 1.53;
--text-xl: 1.563rem;
--text-xl--line-height: 1.46;
--text-2xl: 1.953rem;
--text-2xl--line-height: 1.39;
--text-3xl: 2.441rem;
--text-3xl--line-height: 1.32;
--text-4xl: 3.052rem;
--text-4xl--line-height: 1.25;
}
1.2 or 1.25 for an interface, where most sizes sit close together and the headings must not shout. 1.5 and up for editorial pages, where a large heading is the point.
Because leading is relative to the size. A heading set at body leading looks unfinished, so each step tightens a little; the scale here does it for you and you can override any of them.
Paste the @theme block into your CSS entry file. Tailwind v4 reads text sizes and their line heights from those variables, so text-2xl picks up both at once.