## Typography in Tailwind CSS Typography is what makes your interface feel polished instead of looking like raw [HTML](/courses/html) from 2007. 😄 [Tailwind](/courses/tailwindcss) gives you utility classes for almost every common text property, so you can control things like: * font size * font weight * text alignment * line height * letter spacing * text color all directly inside your markup. --- ## Font Size [Tailwind](/courses/tailwindcss) provides a simple scale for text sizes. Some commonly used classes are: ```text text-xs text-sm text-base text-lg text-xl text-2xl text-3xl text-4xl ``` For example: ```html

Small text

Normal text

Bigger heading

``` The larger the number, the larger the text. Pretty straightforward. --- ## Font Weight You can control how bold or light your text appears using `font-*` utilities. Common classes include: ```text font-light font-normal font-medium font-semibold font-bold font-extrabold ``` Example: ```html

Light text

Medium text

Bold text

``` Font weight is useful for creating visual hierarchy. For example: ```html

Dashboard

Here's what happened today.

``` Your heading immediately feels more important than the paragraph below it. --- ## Text Alignment Tailwind makes text alignment simple. Use: ```text text-left text-center text-right text-justify ``` For example: ```html

Welcome

``` Or: ```html

Last updated 2 minutes ago

``` You can also combine alignment with responsive modifiers: ```html

Responsive Heading

``` This means: ```text Small screens → centered md and above → left aligned ``` --- ## Line Height Line height controls the vertical spacing between lines of text. Tailwind calls this **leading**. Some useful classes are: ```text leading-none leading-tight leading-snug leading-normal leading-relaxed leading-loose ``` For example: ```html

This paragraph has more breathing room between each line, making longer text easier to read.

``` For headings, tighter line heights often look better: ```html

Build Better Interfaces

``` For paragraphs, relaxed spacing can improve readability: ```html

Longer content becomes much easier on the eyes.

``` Typography isn't only about making text bigger or smaller. Spacing matters too. --- ## Letter Spacing Tailwind also gives you control over the spacing between letters using `tracking-*`. Common utilities include: ```text tracking-tight tracking-normal tracking-wide tracking-wider ``` Example: ```html

Modern UI Design

``` Or: ```html Featured ``` Letter spacing is especially useful for: * headings * labels * navigation * uppercase text * badges --- ## Creating Visual Hierarchy A good design makes it obvious what users should notice first. For example: ```html

Tailwind CSS

Utility-First Styling

Build custom interfaces quickly.

``` The user can instantly understand: ```text Main heading ↓ Secondary heading ↓ Supporting text ``` That's visual hierarchy. Without it, everything starts screaming for attention at the same time. 😭 --- ## Tailwind's Color Palette Tailwind comes with a large built-in color palette. Common color families include: ```text slate gray zinc red orange amber yellow green emerald teal cyan sky blue indigo violet purple pink rose ``` Each color usually has multiple shades. For example: ```text blue-50 blue-100 blue-200 blue-300 blue-400 blue-500 blue-600 blue-700 blue-800 blue-900 blue-950 ``` Smaller numbers are lighter. Larger numbers are darker. So: ```text blue-100 → very light blue blue-500 → medium blue blue-900 → very dark blue ``` --- ## Text Colors Use `text-*` utilities to change text color. ```html

Blue text

``` Another example: ```html

Secondary information

``` A very common text hierarchy is: ```html

Heading

Main paragraph

Extra information ``` Different shades help create depth without using completely different colors everywhere. --- ## Background Colors Use `bg-*` utilities for backgrounds. ```html

Light red background

``` Or: ```html ``` A common pattern is combining a lighter background with darker text: ```html

Payment successful

``` That works nicely for things like: * alerts * status badges * notifications * tags --- ## Border Colors Colors can also be applied to borders. ```html

Success Box

``` You can combine this with text and background colors: ```html

New update available

``` Now the entire component follows the same color family. Clean and consistent. --- ## Color States Tailwind colors also work with modifiers. For example: ```html ``` Or: ```html ``` You can also combine colors with responsive modifiers: ```html

``` The same color utilities work almost everywhere. --- ## Typography Example Let's put several typography utilities together. ```html

The Art of Typography in Tailwind

Tailwind makes it incredibly easy to create beautiful, readable text. By combining different sizes, weights, and colors, you can establish a clear visual hierarchy.

Good design should make content easier to understand, not harder.

``` Let's break down the heading: ```text text-4xl → large text font-extrabold → very bold text-slate-900 → dark text tracking-tight → slightly tighter letter spacing mb-4 → spacing below the heading ``` The paragraph uses: ```text text-lg → larger paragraph text leading-relaxed → comfortable line spacing text-slate-700 → softer than the heading ``` The blockquote uses: ```text border-l-4 → thick left border border-indigo-500 → indigo border pl-4 → padding on the left italic → italic text text-slate-600 → muted text color ``` A handful of utilities can completely change the feel of a page. --- ## A Simple Typography Pattern A practical article layout might look like this: ```html

Learn Tailwind CSS

A beginner-friendly guide to utility-first styling.

Tailwind gives you small reusable utilities that can be combined to create almost any interface.

``` Notice that we didn't use a different crazy color for every line. Good typography often comes from subtle differences in: * size * weight * spacing * shade Not from turning the page into a rainbow boss fight. 🌈 --- ## Key Takeaway Tailwind gives you simple utility classes for controlling typography and color. For typography, you'll commonly use: ```text text-* font-* leading-* tracking-* text-left text-center text-right ``` For colors, you'll frequently use: ```text text-blue-500 bg-red-100 border-emerald-300 ``` The biggest skill isn't memorizing every utility. It's learning how to combine **size, weight, spacing, and color** to create a clear visual hierarchy. Throughout **asif.to**, we'll use these typography and color utilities in real UI examples so you learn how to make interfaces not just functional, but clean, readable, and genuinely pleasant to use.