Tailwind CSS Typography Basics: Fonts, Line Height & Text Styles

Q: How do I use custom fonts in Tailwind?

Extend the fontFamily configuration in tailwind.config , or use the arbitrary value syntax like font-["MyFont",sans-serif] . Remember to include the font file or CDN link in your HTML.

Q: What is the default size for text-base ? Can I change it?

text-base defaults to 16px. You can modify it through the fontSize configuration in tailwind.config , or use the @theme directive in CSS to customize it.

Q: How do I create a text gradient effect?

Combine text-transparent , bg-clip-text , and bg-gradient-to-r classes to clip a background gradient to the text shape.

Q: What is the difference between leading-tight and leading-[1.25] ?

They produce the same result. leading-tight is a preset semantic name. Prefer preset names for consistency, and only use arbitrary values for special requirements.

Font Family

Tailwind provides three default font families: font-sans (sans-serif), font-serif (serif), and font-mono (monospace). You can also add custom fonts.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Family Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            'custom': ['"Inter"', 'system-ui', 'sans-serif'],
          }
        }
      }
    }
  </script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-8">
    <div class="bg-white p-6 rounded-lg shadow">
      <p class="font-sans text-lg mb-4">font-sans - Sans-serif</p>
      <p class="font-serif text-lg mb-4">font-serif - Serif</p>
      <p class="font-mono text-lg mb-4">font-mono - Monospace</p>
      <p class="font-custom text-lg">font-custom - Custom Font</p>
    </div>

    <!-- Practical example -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-sans text-2xl font-bold mb-4">Headings use the sans font</h2>
      <p class="font-serif text-base leading-relaxed mb-4">
        Body text uses the serif font, ideal for long-form reading. Serif fonts are
        widely used in print media, guiding the reader's eye and improving readability.
      </p>
      <code class="font-mono bg-gray-100 px-2 py-1 rounded text-sm">
        console.log('Code uses the mono font');
      </code>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Font family reference:

Class	Font Type	Use Case
`font-sans`	Sans-serif	Headings, UI elements
`font-serif`	Serif	Body text, long-form reading
`font-mono`	Monospace	Code, data display

Traditional CSS vs Tailwind The traditional approach requires defining font-family properties and handling font fallbacks manually. Tailwind provides ready-to-use font stacks with sensible cross-platform fallbacks out of the box.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Size Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-4">
    <p class="text-xs text-gray-600">text-xs (12px) - Smallest size</p>
    <p class="text-sm text-gray-600">text-sm (14px) - Small size</p>
    <p class="text-base text-gray-700">text-base (16px) - Default size</p>
    <p class="text-lg text-gray-700">text-lg (18px) - Large size</p>
    <p class="text-xl text-gray-800">text-xl (20px) - Extra large size</p>
    <p class="text-2xl font-semibold">text-2xl (24px)</p>
    <p class="text-3xl font-semibold">text-3xl (30px)</p>
    <p class="text-4xl font-bold">text-4xl (36px)</p>
    <p class="text-5xl font-bold">text-5xl (48px)</p>
    <hr class="my-8">
    
    <!-- Practical example -->
    <h1 class="text-4xl font-bold text-gray-900 mb-4">Page Main Heading</h1>
    <h2 class="text-2xl font-semibold text-gray-800 mb-3">Section Heading</h2>
    <h3 class="text-xl font-medium text-gray-700 mb-2">Subsection Heading</h3>
    <p class="text-base text-gray-600 leading-relaxed">
      Body text uses the default font size to ensure a comfortable reading experience.
    </p>
    <p class="text-sm text-gray-500 mt-4">Notes and auxiliary text use a smaller size</p>
  </div>
</body>
</html>

▶ Try it Yourself

Font size reference:

Class	Size	Line Height
`text-xs`	12px	16px
`text-sm`	14px	20px
`text-base`	16px	24px
`text-lg`	18px	28px
`text-xl`	20px	28px
`text-2xl`	24px	32px
`text-3xl`	30px	36px
`text-4xl`	36px	40px
`text-5xl`	48px	1
`text-6xl`	60px	1
`text-7xl`	72px	1
`text-8xl`	96px	1
`text-9xl`	128px	1

Traditional CSS vs Tailwind The traditional approach requires memorizing exact pixel values, while Tailwind uses semantic size names that are easier to remember and use.

Tip: Use the arbitrary value syntax to set any font size, such as text-[22px] or text-[1.375rem].

Font Weight

Tailwind provides a full range of font weight options from font-thin (100) to font-black (900).

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Font Weight Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-3xl mx-auto space-y-4">
    <p class="font-thin text-xl">font-thin (100) - Thin</p>
    <p class="font-extralight text-xl">font-extralight (200) - Extra light</p>
    <p class="font-light text-xl">font-light (300) - Light</p>
    <p class="font-normal text-xl">font-normal (400) - Normal</p>
    <p class="font-medium text-xl">font-medium (500) - Medium</p>
    <p class="font-semibold text-xl">font-semibold (600) - Semibold</p>
    <p class="font-bold text-xl">font-bold (700) - Bold</p>
    <p class="font-extrabold text-xl">font-extrabold (800) - Extra bold</p>
    <p class="font-black text-xl">font-black (900) - Black</p>
    
    <hr class="my-8">
    
    <!-- Practical example -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h2 class="font-bold text-2xl mb-4">Bold for heading emphasis</h2>
      <p class="font-normal text-base mb-2">Normal weight for body text</p>
      <p class="font-light text-sm text-gray-500">Light weight for auxiliary text</p>
      <span class="font-semibold text-blue-600">Semibold for important labels</span>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires remembering numeric values like font-weight: 700, while Tailwind uses intuitive semantic names like font-bold.

Line Height

Line height controls the spacing between lines of text. Tailwind provides preset options from leading-none to leading-loose.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Line Height Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- Line height comparison -->
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-none (line-height 1)</h3>
        <p class="leading-none text-gray-700">
          This text uses the minimum line height with almost no spacing between lines. Best for headings or compact layouts.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-tight (line-height 1.25)</h3>
        <p class="leading-tight text-gray-700">
          This text uses a tighter line height, suitable for subtitles or text that needs a more compact display.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-normal (line-height 1.5)</h3>
        <p class="leading-normal text-gray-700">
          This text uses the default line height, ideal for most body text. It strikes a balance between reading comfort and space efficiency.
        </p>
      </div>
      
      <div class="bg-white p-6 rounded-lg shadow">
        <h3 class="font-semibold mb-4">leading-relaxed (line-height 1.625)</h3>
        <p class="leading-relaxed text-gray-700">
          This text uses a more generous line height, perfect for long-form reading. The extra spacing helps reduce visual fatigue.
        </p>
      </div>
    </div>

    <!-- Numeric line heights -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Exact Numeric Line Heights</h3>
      <div class="space-y-4">
        <p class="leading-[1] text-gray-700">leading-[1] - Exactly set to 1</p>
        <p class="leading-[2rem] text-gray-700">leading-[2rem] - Exactly set to 2rem</p>
        <p class="leading-[32px] text-gray-700">leading-[32px] - Exactly set to 32px</p>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Line height reference:

Class	Line Height	Use Case
`leading-none`	1	Headings, buttons
`leading-tight`	1.25	Subtitles
`leading-snug`	1.375	Compact text
`leading-normal`	1.5	Default body text
`leading-relaxed`	1.625	Long-form reading
`leading-loose`	2	Very loose spacing

Traditional CSS vs Tailwind The traditional approach requires setting line-height values separately for different text contexts, while Tailwind provides semantic line height options for quick selection.

Text Color

Tailwind provides a comprehensive color system covering all common text color needs.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Color Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Basic colors -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Basic Text Colors</h3>
      <div class="space-y-2">
        <p class="text-gray-900">text-gray-900 - Darkest gray</p>
        <p class="text-gray-600">text-gray-600 - Medium gray</p>
        <p class="text-gray-400">text-gray-400 - Light gray</p>
      </div>
    </div>

    <!-- Semantic colors -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Semantic Text Colors</h3>
      <div class="space-y-2">
        <p class="text-blue-600">text-blue-600 - Links/info</p>
        <p class="text-green-600">text-green-600 - Success</p>
        <p class="text-yellow-600">text-yellow-600 - Warning</p>
        <p class="text-red-600">text-red-600 - Error</p>
        <p class="text-purple-600">text-purple-600 - Special emphasis</p>
      </div>
    </div>

    <!-- Opacity -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Color Opacity</h3>
      <div class="space-y-2">
        <p class="text-blue-600 opacity-100">opacity-100 - Fully opaque</p>
        <p class="text-blue-600 opacity-75">opacity-75 - 75% opaque</p>
        <p class="text-blue-600 opacity-50">opacity-50 - 50% opaque</p>
        <p class="text-blue-600 opacity-25">opacity-25 - 25% opaque</p>
      </div>
    </div>

    <!-- Gradient text -->
    <div class="bg-gray-900 p-6 rounded-lg">
      <h3 class="text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-500 text-3xl font-bold">
        Gradient Text Effect
      </h3>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires defining color variables or hex values in CSS, while Tailwind provides a semantic color system (e.g., text-red-600) that directly expresses visual intent.

Text Alignment & Decoration

Tailwind provides complete text alignment and decoration options for various typography needs.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Alignment & Decoration Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto space-y-8">
    <!-- Text alignment -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Alignment</h3>
      <div class="space-y-4">
        <p class="text-left bg-gray-100 p-3 rounded">text-left - Left-aligned text</p>
        <p class="text-center bg-gray-100 p-3 rounded">text-center - Center-aligned text</p>
        <p class="text-right bg-gray-100 p-3 rounded">text-right - Right-aligned text</p>
        <p class="text-justify bg-gray-100 p-3 rounded">
          text-justify - Justified text. This paragraph demonstrates justified alignment, where text is distributed evenly across the container when it spans multiple lines.
        </p>
      </div>
    </div>

    <!-- Text decoration -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Decoration</h3>
      <div class="space-y-4">
        <p class="underline">underline - Underlined text</p>
        <p class="overline">overline - Overlined text</p>
        <p class="line-through">line-through - Strikethrough text</p>
        <p class="no-underline">no-underline - No decoration</p>
      </div>
    </div>

    <!-- Text transform -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Text Transform</h3>
      <div class="space-y-4">
        <p class="uppercase">uppercase - Uppercase transformation</p>
        <p class="lowercase">LOWERCASE - Lowercase transformation</p>
        <p class="capitalize">capitalize - Capitalize first letter</p>
        <p class="normal-case">normal-case - Normal casing</p>
      </div>
    </div>

    <!-- Decoration color and thickness -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Decoration Line Styles</h3>
      <div class="space-y-4">
        <p class="underline decoration-blue-500">Blue underline</p>
        <p class="underline decoration-2">Thick underline (2px)</p>
        <p class="underline decoration-4 decoration-wavy">Wavy decoration</p>
        <p class="underline decoration-dashed">Dashed decoration</p>
        <p class="underline decoration-dotted">Dotted decoration</p>
      </div>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting text-align, text-decoration, text-transform, and other properties individually, while Tailwind uses concise class names like text-center, underline, and uppercase.

List Styles

Tailwind provides list style controls, including list marker type and position.

Example

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>List Style Demo</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="min-h-screen bg-gray-50 p-8">
  <div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-8">
    <!-- Unordered lists -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Unordered List Styles</h3>
      <ul class="list-disc space-y-2 pl-5">
        <li>list-disc - Solid bullet</li>
        <li>Second list item</li>
        <li>Third list item</li>
      </ul>
      
      <ul class="list-[square] space-y-2 pl-5 mt-4">
        <li>list-[square] - Solid square</li>
        <li>Using arbitrary value syntax</li>
      </ul>
      
      <ul class="list-none space-y-2 mt-4">
        <li>list-none - No marker</li>
        <li>Good for custom list styles</li>
      </ul>
    </div>

    <!-- Ordered lists -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">Ordered List Styles</h3>
      <ol class="list-decimal space-y-2 pl-5">
        <li>list-decimal - Numbered</li>
        <li>Second list item</li>
        <li>Third list item</li>
      </ol>
      
      <ol class="list-[upper-alpha] space-y-2 pl-5 mt-4">
        <li>Uppercase letter numbering</li>
        <li>list-[upper-alpha]</li>
      </ol>
      
      <ol class="list-[lower-roman] space-y-2 pl-5 mt-4">
        <li>Lowercase Roman numerals</li>
        <li>list-[lower-roman]</li>
      </ol>
    </div>

    <!-- List position -->
    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">List Marker Position</h3>
      <ul class="list-disc list-inside space-y-2 bg-gray-100 p-4 rounded">
        <li>list-inside - Marker inside the content area</li>
        <li>Long list item text wraps below the marker without indentation</li>
      </ul>
    </div>

    <div class="bg-white p-6 rounded-lg shadow">
      <h3 class="font-semibold mb-4">List Marker Position</h3>
      <ul class="list-disc list-outside space-y-2 pl-5 bg-gray-100 p-4 rounded">
        <li>list-outside - Marker outside the content area</li>
        <li>Long list item text maintains its indentation</li>
      </ul>
    </div>
  </div>
</body>
</html>

▶ Try it Yourself

Traditional CSS vs Tailwind The traditional approach requires setting list-style-type and list-style-position properties, while Tailwind uses concise class names like list-disc and list-inside.

Tip: Use the arbitrary value syntax to set any list style, such as list-[upper-alpha] or list-[lower-roman].

❓ FAQ

Q How do I use custom fonts in Tailwind?

A Extend the fontFamily configuration in tailwind.config, or use the arbitrary value syntax like font-["MyFont",sans-serif]. Remember to include the font file or CDN link in your HTML.

Q What is the default size for text-base? Can I change it?

A text-base defaults to 16px. You can modify it through the fontSize configuration in tailwind.config, or use the @theme directive in CSS to customize it.

Q How do I create a text gradient effect?

A Combine text-transparent, bg-clip-text, and bg-gradient-to-r classes to clip a background gradient to the text shape.

Q What is the difference between leading-tight and leading-[1.25]?

A They produce the same result. leading-tight is a preset semantic name. Prefer preset names for consistency, and only use arbitrary values for special requirements.

📖 Summary

Tailwind provides three default font families: font-sans, font-serif, and font-mono
Font sizes range from text-xs to text-9xl, covering 12px to 128px
Font weights range from font-thin (100) to font-black (900) in 9 levels
Line heights range from leading-none to leading-loose, with arbitrary values for precise control
Text colors use semantic naming, such as text-blue-600 and text-red-600
Text alignment, decoration, and transformation all have corresponding concise class names

📝 Exercises

⭐ Create an article page with a heading (using text-4xl font-bold), subtitle, body text, and notes, showcasing different font size and weight combinations
⭐⭐ Create a pricing card that uses gradient text for the price, includes an original price (line-through) and a discounted price, demonstrating practical use of text decoration
⭐⭐⭐ Create a complete content page that includes ordered and unordered lists, blockquotes, code blocks, and implements text color adaptation for dark/light mode switching

Tailwind CSS Typography Basics: Fonts, Line Height & Text Styles

Font Family

Example

Font Size

Example

Font Weight

Example

Line Height

Example

Text Color

Example

Text Alignment & Decoration

Example

List Styles

Example

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好