Typography — Tailwind Demo

← Back to index

# Typography

Scale, weight, color, spacing, lists, code, and article layouts.

## Type Scale

text-xs

The quick brown fox jumps over the lazy dog.

text-sm

The quick brown fox jumps over the lazy dog.

text-base

The quick brown fox jumps over the lazy dog.

text-lg

The quick brown fox jumps over the lazy dog.

text-xl

The quick brown fox jumps over the lazy dog.

text-2xl

The quick brown fox jumps.

text-3xl

The quick brown fox.

text-4xl

The quick brown.

text-5xl

The quick.

text-7xl

Aa

## Font Weight

font-thin (100)

Tailwind CSS

font-light (300)

Tailwind CSS

font-normal (400)

Tailwind CSS

font-medium (500)

Tailwind CSS

font-semibold (600)

Tailwind CSS

font-bold (700)

Tailwind CSS

font-extrabold (800)

Tailwind CSS

font-black (900)

Tailwind CSS

## Colors & Treatments

Default — gray-900

Muted — gray-500

Placeholder — gray-400

Brand — indigo-600

Link — blue-500

Success — green-600

Danger — red-500

Warning — yellow-500

Underline

Strikethrough

Italic

Uppercase tracked

Highlighted

Gradient text

## Heading Hierarchy

h1

# The Platform Built for Scale

h2

## Why teams choose Acme

h3

### Deploy in seconds

h4

#### Zero-config setup

h5

##### Getting started

h6

###### Prerequisites

## Paragraph Styles

Lead

Tailwind CSS is a utility-first framework that gives you the building blocks to craft any design without fighting the framework.

Body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Small / Caption

Published on May 20, 2026 · 5 min read · Licensed under CC BY 4.0

Fine print

By continuing you agree to our Terms of Service and Privacy Policy. Prices shown exclude applicable taxes and are subject to change without notice.

## Lists

Unordered

- Utility-first workflow
- Responsive by default
- Dark mode support
- Custom design tokens
- JIT compilation

Ordered

1. Install Tailwind CSS
2. Configure your template paths
3. Add the directives
4. Start the build process
5. Write your first utility class

Custom icon list

- ✓ Free forever plan
- ✓ No credit card needed
- ✓ Cancel any time
- ✗ Custom domains
- ✗ Priority support

## Blockquotes

> "Tailwind CSS is the only framework that I've seen scale on large teams. It's easy to customize, adapts to any design, and the build size is tiny."

> "

> Designing in the browser with Tailwind feels like finally having the right tool for the job. The feedback loop is instant and the result is always consistent.

## Code & Keyboard

Inline code

Use the `text-{size}` utilities to control font size, and `font-{weight}` to adjust weight. Combine with `leading-{size}` for line-height control.

tailwind.config.js JS

    /** @type {import('tailwindcss').Config} */
    module.exports = {
      content: ["./src/**/*.{html,js}"],
      theme: {
        extend: {
          colors: {
            brand: "#6366f1",
          },
        },
      },
      plugins: [],
    };

Keyboard shortcuts

`⌘` + `K` Open command palette
`⌘` + `S` Save document
`Shift` + `?` Show shortcuts

## Article Layout

Technology · May 20, 2026 · 6 min read

# How Utility-First CSS Changed the Way We Build

Jane Doe

Staff Engineer · Acme Inc.

For years, the conventional wisdom was to write semantic CSS — classes that described what something was, not how it looked. Then Tailwind arrived and broke every rule.

## The old way

Traditional CSS architectures like BEM, SMACSS, and OOCSS tried to solve the scaling problem through abstraction and naming conventions. They worked — until they didn't. Stylesheet bloat, specificity wars, and dead code became the norm on large teams.

> "The hardest part of CSS isn't writing it — it's knowing what to delete."

## A different mental model

Tailwind flips the model. Instead of naming abstractions, you compose low-level utilities directly in your markup. The result is a smaller stylesheet, zero naming overhead, and a design system that stays consistent by construction.

Whether you find it verbose or liberating says a lot about your background — but the productivity numbers don't lie. Teams that adopt Tailwind consistently ship faster and maintain more coherent UIs at scale.

👍 142 likes 💬 38 comments 🔖 Save