Choose size and line height
Current Tailwind documentation includes size utilities such as text-sm, text-base and text-xl. A slash form such as text-lg/7 combines size with line height. A custom value can use text-[18px].
Read the size scale in the version installed in your project. Theme customization can change a named utility’s value, so a class name is not a universal pixel guarantee.
Choose a family and load the resource
The documented family utilities include font-sans, font-serif and font-mono. In the current v4 documentation, custom theme families use --font-* variables within @theme; a --font-display entry produces a font-display utility.
The CSS stack still needs the intended font to be available. Use a supported stylesheet service or a properly configured font resource. A family name alone cannot fetch an arbitrary file.
Separate color from size
A utility such as text-blue-600 controls foreground color; text-lg controls size. The shared text prefix does not make those properties interchangeable.
For an illustrative element, <p class="font-sans text-lg/7 text-blue-600">A readable example.</p> combines separate choices. Adapt the classes to your configured theme and check the actual text against its background.
Keep the underlying typography understandable
Compare CSS font-family, CSS size and text color to understand what a utility changes. Current v4 theme configuration differs from older Tailwind setup examples.
For the visual design, compare font pairing principles. A framework utility cannot choose a coherent heading and body relationship on its own.
Your questions, answered.
Does font-sans download a font?
No. It applies the configured family stack. The requested resources still need to be available to the browser.
Why does an older tutorial use different configuration?
Tailwind versions can use different configuration conventions. This guide follows the linked current v4 documentation and directs older projects to their matching docs.
Sources & background
Sources supporting this page’s explanations. Practical examples are our editorial suggestions.