Tailwind CSS

Every page you visit starts as plain text files. A browser (Chrome, Firefox, Safari) downloads them and draws the page. Three languages share the work, and this course is about the second one.

Picture a small coffee shop’s website. HTML says “here is a menu with a latte at 3.50”. CSS says “make the menu a cream-coloured card with rounded corners”. Tailwind CSS, the tool this course teaches, is a faster way to write that CSS.

Browser

The program that downloads a page’s files and draws the page.

HTML

HyperText Markup Language: describes the content and structure of a page.

CSS

Cascading Style Sheets: describes how that content looks.

An element is one piece of content wrapped in tags. The opening tag <h2> says where it starts, the closing tag </h2> (with a slash) says where it ends, and the content sits between.

1<section>2  <h2>Our menu</h2>3  <p>Fresh coffee, roasted down the road.</p>4  <ul>5    <li>Espresso: 2.50</li>6    <li>Latte: 3.50</li>7  </ul>8  <img src="latte.jpg" alt="A latte with a leaf in the foam">9</section>

1<p>Open every day from 7am

An attribute is extra information inside an opening tag, written name="value". src tells an image which file to show. href tells a link where to go. And class gives an element one or more labels, separated by spaces.

1<a href="/menu" class="button big">See the menu</a>2<p class="note">Oat milk is free.</p>

A class does nothing by itself. It is a hook: CSS can say “everything with the class note is grey”. Tailwind is built entirely on classes, so you will write a lot of them.

1<button class="order now wide">Order</button>

When one element sits inside another, the outer one is the parent and the inner one is the child. Elements side by side with the same parent are siblings. The whole page becomes a tree, which the browser calls the DOM (Document Object Model).

Every browser has developer tools (devtools). Right-click anything on a page and choose Inspect: a panel opens with the element’s HTML on one side and the CSS that applies to it on the other. You can edit both live, and nothing is saved, so it is safe to experiment.

• HTML describes content as elements: an opening tag, content, a closing tag.
• Attributes add details. class gives an element labels that CSS can target.
• Elements nest into a tree: parents, children, siblings.
• The browser builds the tree, matches CSS to it, lays it out, then paints.
• CSS usually lives in one stylesheet file that every page links to.
• Devtools show you the HTML and the CSS of any element.

1h1 {2  color: brown;3  font-size: 32px;4}

Rule

A selector followed by declarations in braces.

Selector

The part that chooses which elements a rule styles.

Property

What to change: color, padding, font-size.

Value

What to change it to: brown, 16px, bold.

The browser collects every rule whose selector matches an element and applies all their declarations together. Rules don’t replace each other unless they set the same property.

p {  color: gray;  font-size: 16px;}.note {  font-style: italic;}

If two matching rules set the same property, only one value can win. The browser decides with the cascade, a fixed list of tie-breakers. The two you meet every day are specificity (how precise the selector is) and order (if precision ties, the rule written later wins).

1.note {2  color: green;3}4.note {5  color: orange;6}

Specificity is counted in three columns: ids, then classes (and attributes and pseudo-classes), then tags. Compare the first column; only if it ties, compare the next. An id beats any number of classes, and a class beats any number of tags.

1<style>2  .note { color: green; }3  p { color: orange; }4  p.note { color: purple; }5</style>6
7<p>A plain paragraph.</p>8<p class="note">A paragraph with the class note.</p>

1.note {2  color: green;3}4p {5  color: orange;6}

Set color or font-family on a parent and its children use it too, unless something sets their own. That is inheritance. Properties about text usually inherit. Properties about the box itself (padding, border, background) don’t.

1.menu {2  color: brown;      /* the li text inside turns brown */3  padding: 16px;     /* only .menu gets padding */4}

A pseudo-class starts with a colon and matches an element only in a certain situation: :hover while the pointer is over it, :focus while it has the keyboard’s attention, :first-child if it comes first among its siblings. A pseudo-element (two colons) styles a part of an element, such as ::placeholder in an input.

1a {2  : orange;3}

A media query wraps rules in a condition about the device. The most common asks how wide the screen is. Inside it, rules apply only while the condition is true, and the browser re-checks as the window resizes.

1.menu {2  font-size: 16px;3}4@media (min-width: 768px) {5  .menu {6    font-size: 20px;   /* only on screens 768px or wider */7  }8}

• A rule is a selector plus declarations; a declaration is a property and a value.
• Selectors pick elements by tag (p), class (.note), id (#logo) or position (.menu li).
• Every matching rule applies; they only compete for the same property.
• The cascade picks the winner: specificity first, then the later rule.
• Text properties inherit from parents; box properties don’t.
• Pseudo-classes (:hover) and media queries (@media) apply rules conditionally.

The browser draws every element as a rectangle. From the inside out, the box model has four layers. Getting comfortable with them is most of what “spacing” means in CSS and in Tailwind.

1.menu-card {2  padding: 16px;          /* breathing room inside */3  border: 1px solid tan;  /* a thin line */4  margin: 24px;           /* distance from neighbours */5}

1<style>2  body { background: oldlace; }3  .menu-card {4    background: white;5    padding: 16px;6    border: 1px solid tan;7    margin: 24px;8  }9</style>10
11<div class="menu-card">Espresso: 2.50</div>12<div class="menu-card">Latte: 3.50</div>

By default, width sets only the content. Padding and border are added on top, so a width: 200px box with 16px padding and a 1px border is really 234px wide. box-sizing: border-box makes width include padding and border, which is far easier to reason about. Tailwind turns it on for every element.

1<style>2  .box {3    width: 200px;4    padding: 16px;5    border: 1px solid tan;6    margin-bottom: 8px;7    background: oldlace;8  }9  .border-box { box-sizing: border-box; }10</style>11
12<div class="box">content-box</div>13<div class="box border-box">border-box</div>

Two more values, flex and grid, turn a box into a layout container for its children. They get whole modules later.

When two block boxes sit one above the other, the bottom margin of the first and the top margin of the second don’t add up: the bigger one wins. This is margin collapsing. It surprises everyone once.

rem stands for “root em”: it is relative to the font size of the <html> element. If someone raises their browser’s default text size to 20px, every rem grows with it, so the page scales for people who need larger text. A pixel value would ignore their choice.

Add a slash and an alpha to make a colour see-through: rgb(0 0 0 / 0.5) is half-transparent black. Tailwind’s built-in colours are written in oklch, a format where equal steps in lightness look equal to the eye, which makes palettes more even.

1background-color: rgb(0 0 0  );

A custom property, usually called a CSS variable, is a property whose name starts with two dashes. You set it once and read it anywhere with var(). Children inherit it, and a rule lower down can change it. Tailwind 4 is built on them: every colour, size and font it knows is a variable like this.

1:root {2  --coffee: #6f4e37;3}4h1 {5  color: var(--coffee);6}7.button {8  background-color: var(--coffee);9}

• Every element is a box: content, padding, border, margin.
• border-box makes width include padding and border; Tailwind sets it everywhere.
• Block boxes stack and fill the width; inline boxes flow with text and ignore width.
• Vertical margins between blocks collapse to the larger one.
• rem scales with the reader’s text size; it is Tailwind’s main unit.
• Colours take an optional alpha after a slash. Tailwind’s palette uses oklch.
• CSS variables (--name, read with var()) keep a value in one place.

With plain CSS you invent a class for each thing (menu-card), then write a rule for it in a stylesheet. It works, but as a site grows the stylesheet grows with it, and three problems appear.

<div class="menu-card">  <h2 class="menu-card-title">    Latte  </h2></div>

.menu-card {  padding: 1.5rem;  border-radius: 0.5rem;  background: white;}.menu-card-title {  font-weight: 700;}

• Naming: every new box needs a name, and good names are hard (card-inner-wrapper-2).
• Two places: to change how something looks you jump between the HTML and the CSS.
• Fear of deleting: nobody knows which pages still use .menu-card, so old CSS piles up.

A utility class sets one property (or a few that belong together) to one value. p-6 sets padding. rounded-lg rounds the corners. font-bold makes text bold. You style an element by listing utilities in its class attribute, so the look is written right where the element is.

<div class="menu-card">  <h2 class="menu-card-title">    Latte  </h2></div>

<div class="p-6 rounded-lg bg-white">  <h2 class="font-bold">    Latte  </h2></div>

Nothing to name, nothing to keep in sync, and deleting the HTML deletes its styles. This approach is called utility-first, and Tailwind CSS is the most widely used tool for it.

1<div class="p-6 rounded-lg bg-white shadow">2  <h2 class="font-bold">Latte</h2>3  <p class="text-stone-600">Espresso and steamed milk.</p>4</div>

The part before a colon, like hover:, is a variant: it says when the utility applies. You will meet many variants; they all work with all utilities.

Tailwind doesn’t ship a giant stylesheet of every possible class. It scans your project’s files for words that look like class names, and writes CSS for exactly those. Use p-4 and bg-amber-100, and your stylesheet contains those two rules and nothing else of that kind.

Utilities live in the HTML, like a style attribute, but they can do what style can’t, and they keep a site consistent.

It does, and that is the most common complaint. In practice it matters less than it seems:

• You read classes left to right like a description: padding, corners, background.
• Repeated markup is usually made by a loop or a component, so the classes are written once.
• Editor extensions complete class names and show the CSS behind each one.
• When you delete an element, its styles go with it: nothing is left behind.

Here is a rule from the coffee shop’s old stylesheet. Rewrite it as utilities. A hint: 1rem is spacing step 4, and font-weight: 700 is font-bold.

1.badge {2  padding: 1rem;3  font-weight: 700;4  border-radius: var(--radius-lg);5}

1<span class="  ">New</span>

• Custom class names bring naming, two-file editing and CSS nobody dares delete.
• A utility class does one small thing; you combine them in class.
• Names read as property then value: p-4, text-lg, bg-amber-100.
• A prefix with a colon is a variant: hover:, md:.
• Tailwind scans your files as text and writes CSS only for classes it finds.
• Unlike style, utilities use a shared scale and support states and screen sizes.

Terminal

A window where you type commands instead of clicking. Terminal on macOS and Linux, PowerShell or Terminal on Windows.

Node.js

A program that runs JavaScript outside the browser. Tailwind’s tools run on it. Install the LTS version from nodejs.org.

npm

Node’s package manager, installed with it. A package is code someone else published; npm install downloads it into your project.

Code editor

Where you write files. VS Code is free and has an official Tailwind extension.

1node --version2npm --version

Vite is a small tool that serves your files to the browser while you work, and refreshes the page when you save. It is the quickest way to try Tailwind. These commands make a folder called coffee-shop with a plain HTML and JavaScript starter.

1npm create vite@latest coffee-shop -- --template vanilla2cd coffee-shop3npm install

Replace everything in src/style.css with a single line. It pulls in Tailwind’s theme (its colours, sizes and fonts), its base styles and its utilities. Tailwind 4 needs no other configuration file to start.

1@import "tailwindcss";

1 "";

Browsers give elements a default look: big bold headings, bullets on lists, margins on paragraphs. Each browser does it slightly differently. Tailwind starts with Preflight, a set of base styles that removes most of it, so a page looks the same everywhere and only shows what you asked for.

• Margins on headings, paragraphs and lists are removed.
• Headings are the same size and weight as normal text.
• Lists have no bullets or numbers.
• Images are display: block and never wider than their container.
• Every element uses box-sizing: border-box.

1. Is the dev server running, and is the page the one it serves?
2. Does the stylesheet with @import "tailwindcss"; actually load? Check devtools for the CSS file.
3. Is the class spelled right? bg-amber-100, not bg-amber100 or background-amber-100.
4. Inspect the element. If no rule for the class exists, Tailwind never generated it.
5. If a rule exists but is crossed out, another rule won: read which one.

• You need a terminal, Node.js with npm, and an editor.
• With Vite: install tailwindcss and @tailwindcss/vite, then add the plugin.
• @import "tailwindcss"; in your CSS is the whole setup in Tailwind 4.
• Preflight removes browser defaults, so headings and lists start plain.
• Unknown or misspelt classes produce no CSS and no error: inspect to check.

Tailwind’s theme has one variable for spacing, --spacing, set to 0.25rem (4px at default text size). A spacing utility multiplies it: p-4 is 4 × 0.25rem = 1rem. Because every gap comes from the same step, things line up without you measuring.

Any whole number works (p-13, p-30), and so do quarter steps such as p-1.5 or p-2.5. Tailwind 3 only had a fixed list; Tailwind 4 calculates the value from the number.

Margin utilities use the same prefixes with m: m-4, mt-2, mx-6. Two extras are worth learning now. A minus sign in front makes a negative margin, which pulls an element outwards (-mt-4). And mx-auto sets the left and right margins to auto, which centres a block that has a width.

1<main class="mx-auto max-w-3xl px-4">2  <h1 class="mt-12 text-3xl font-bold">Our menu</h1>3  <p class="mt-4">Everything is made fresh every morning.</p>4</main>

Most spacing is between siblings, such as menu items in a list. Two tools do it from the parent, so the children don’t each need a margin.

1<ul class="flex flex-col gap-3">2  <li>Espresso</li>3  <li>Flat white</li>4  <li>Cortado</li>5</ul>

1<ul class="flex flex-col gap-3">2  <li class="bg-amber-100 p-2">Espresso</li>3  <li class="bg-amber-100 p-2">Flat white</li>4  <li class="bg-amber-100 p-2">Cortado</li>5</ul>

A max width stops a box from growing past a size but lets it shrink on small screens. That is what you want for page columns and paragraphs. max-w-* uses a separate scale of container sizes, from max-w-3xs (16rem) to max-w-7xl (80rem), plus max-w-prose, a width of about 65 characters that is comfortable to read.

1<main class="  ">…</main>

Sometimes you need an exact value: a logo that must be 137px wide. Put any CSS value in square brackets and Tailwind writes it as is: w-[137px]. Spaces aren’t allowed in a class, so write an underscore where the CSS needs a space. To read a CSS variable, use round brackets: p-(--card-padding).

1<img src="logo.svg" alt="Corner Coffee" class="w-[137px]">2<div class="h-[calc(100dvh_-_4rem)]">…</div>3<section class="p-(--card-padding)">…</section>

• Spacing utilities multiply --spacing (0.25rem): p-4 is 1rem. Any whole or quarter number works.
• p, px, py, pt…: all sides, an axis, one side. Margins use m the same way.
• mx-auto centres a block that has a width; -mt-2 is a negative margin.
• Space between children with gap on a flex or grid parent.
• w-*, h-*, size-* set sizes; max-w-* caps them for readable columns.
• […] takes any value; (--var) reads a variable. Use them sparingly.

A font family is a typeface, like Helvetica or Georgia. Tailwind’s theme has three: font-sans (no little feet on the letters, the default for the page), font-serif (with them, like a newspaper) and font-mono (every letter the same width, for code). Each is a list of fonts; the browser uses the first one the device has.

1<h1 class="font-serif text-4xl">Corner Coffee</h1>2<p class="font-sans">Open 7am to 6pm.</p>3<code class="font-mono">WIFI: ask at the counter</code>

Sans-serif

Letters without small strokes at their ends. Clean on screens.

Serif

Letters with small strokes at their ends. Classic, bookish.

Monospace

Every character the same width. Used for code.

Line height is the height of each line of text, which sets the space between lines. Big text needs relatively less of it. Each text-* size sets a sensible one for you; add a slash to choose another: text-lg/7 is size lg with a line height of 7 spacing steps (1.75rem).

1<article class="max-w-md">2  <h2 class="text-2xl font-bold">Our house blend</h2>3  <p class="text-base text-stone-700">4    Beans from two farms, roasted medium dark, with notes of5    chocolate and plum. Good as an espresso, better with milk.6  </p>7</article>

Tailwind calls line height leading (the strips of lead printers put between lines) and letter spacing tracking. leading-* takes a spacing step (leading-6 is 1.5rem) or a name (leading-tight is 1.25, leading-relaxed 1.625). tracking-* uses names: tracking-tight, tracking-wide, tracking-widest.

1<h2 class="text-5xl font-bold leading-tight tracking-tight">2  Slow coffee for fast mornings3</h2>4<p class="text-xs uppercase tracking-widest text-stone-500">5  Since 20146</p>

1<p class=" ">Our beans…</p>

Text colour uses text- plus a colour name and shade: text-stone-700. (The next module covers colours in full.) Alignment uses text-left, text-center, text-right and text-justify. text-start and text-end follow the reading direction.

1<article class="text-center">2  <h3 class="text-2xl font-semibold text-amber-900">Latte</h3>3  <p class="text-stone-600">Espresso and steamed milk.</p>4  <p class="mt-2 text-lg font-bold text-amber-700">3.50</p>5</article>

Preflight removes bullets from lists. Put them back with list-disc (bullets) or list-decimal (numbers), plus list-inside or some left padding so they have room. Links keep their colour from the surrounding text; add underline and choose the line’s look with decoration-* and underline-offset-*.

1<ul class="list-disc pl-5">2  <li>Single-origin beans</li>3  <li>Oat, almond and whole milk</li>4</ul>5<a href="/visit" class="underline decoration-amber-5006  decoration-2 underline-offset-4 hover:decoration-amber-800">7  Find us8</a>

To use a font such as one from Google Fonts, load it in the page’s <head>, then add it to the theme as a --font-* variable. Tailwind creates a utility from the name. The @theme block gets its own module later; for now, read it as “add these to Tailwind’s design settings”.

1@import "tailwindcss";2
3@theme {4  --font-display: "Fraunces", Georgia, serif;5}

1<h1 class="font-display text-5xl">Corner Coffee</h1>

• font-sans, font-serif, font-mono pick a family; font-bold and friends pick a weight.
• text-* sizes include a line height; text-lg/7 overrides it.
• leading-* is line height, tracking-* is letter spacing.
• truncate and line-clamp-* limit long text; text-balance and text-pretty wrap it nicely.
• Lists need list-disc or list-decimal back after Preflight.
• A --font-* variable in @theme creates a font-* utility.

Tailwind’s theme has a couple of dozen colour families (red, amber, green, sky, stone and more), each in eleven shades from 50 (nearly white) to 950 (nearly black). 500 is the middle. There are also black, white and transparent.

The greys come in several warmths: slate and gray lean blue, zinc and neutral are flat, stone leans warm. A coffee shop might pair warm stone greys with amber browns.

Shade

One step of a colour family, from 50 (lightest) to 950 (darkest).

Palette

The full set of colours a design uses.

Add / and a percentage to any colour utility to make it see-through: bg-black/50 is black at 50%. Only that colour fades, unlike opacity-50, which fades the whole element, text and children included.

1<div class=" text-white">Fresh roast today</div>

Round one corner or one side with a position: rounded-t-lg (top two corners), rounded-bl-xl (bottom left). A photo inside a rounded card pokes out of the corners unless the card also has overflow-hidden.

1<article class="overflow-hidden rounded-2xl border border-stone-200">2  <img src="cortado.jpg" alt="A cortado in a small glass">3  <h3 class="p-4 font-semibold">Cortado</h3>4</article>5<img src="barista.jpg" alt="Sam, our head barista"6  class="size-16 rounded-full">

shadow-2xs to shadow-2xl add a drop shadow, from barely there to deep. inset-shadow-* draws one inside the box instead, for pressed-in looks. Give a shadow a colour to make it warmer: shadow-lg shadow-amber-900/20.

1<div class="rounded-xl bg-white p-6 shadow-md">2  Gift cards available3</div>4<button class="rounded-lg bg-amber-600 px-4 py-2 text-white5  shadow-lg shadow-amber-900/30">6  Buy one7</button>

A border takes up room in the box model, so adding one can nudge the layout. A ring (ring, ring-2) is drawn with a shadow, and an outline (outline-2) is drawn outside the box: neither moves anything. That makes them ideal for showing keyboard focus. ring-offset-2 leaves a gap between the element and its ring.

1<button class="rounded-lg bg-amber-600 px-4 py-2 text-white2  focus-visible:outline-2 focus-visible:outline-offset-23  focus-visible:outline-amber-600">4  Order5</button>

Designers often hand over a list of styles. Turning that list into classes is most of the daily work with Tailwind. Here the component is written in React, where the attribute is className instead of class; the classes are the same.

1export default function OfferCard() {2  return (3    <article className="">4      <h3 className="">Seasonal blend</h3>5      <p className="">12.00 a bag</p>6    </article>7  )8}

• Colour families come in shades 50 to 950; pick text and background far apart for contrast.
• The same colour names work with bg-, text-, border-, ring-, fill- and more.
• bg-black/50 fades one colour; opacity-50 fades the whole element.
• border is 1px and currentColor in Tailwind 4: add a colour.
• rounded-* rounds corners; add overflow-hidden to clip images inside.
• Shadows and rings need a size class; a colour class alone draws nothing.
• Rings and outlines don’t move the layout, which makes them good for focus.

Block boxes stack top to bottom. To put a logo and some links side by side you need a layout system. Flexbox is the one for a single line of things: give a parent display: flex (the flex class) and its direct children become flex items, laid out along one line.

Flex container

The parent with display: flex.

Flex item

A direct child of a flex container. Grandchildren are not affected.

Main axis

The direction items are placed in: across by default.

Cross axis

The direction at right angles to the main axis.

In a row, items-* controls vertical alignment. The default, items-stretch, makes every item as tall as the tallest. items-center centres them, which is what you want for an icon next to text. items-start, items-end and items-baseline (line up the baselines the letters sit on) cover the rest.

By default flex items stay on one line and squeeze to fit. flex-wrap lets them move to a new line when they run out of room, which is handy for a row of tags. gap-* spaces them in both directions; gap-x-* and gap-y-* set each one.

1<ul class="flex flex-wrap gap-2">2  <li class="rounded-full bg-stone-100 px-3 py-1">Vegan</li>3  <li class="rounded-full bg-stone-100 px-3 py-1">Gluten free</li>4  <li class="rounded-full bg-stone-100 px-3 py-1">Nut free</li>5  <li class="rounded-full bg-stone-100 px-3 py-1">Decaf available</li>6</ul>

1<ul class="flex  ">…</ul>

Centring something both ways used to be a famous CSS puzzle. With flexbox it is two classes on the parent: one per axis.

1<section class="flex   min-h-dvh">2  <p>Closed today. See you tomorrow.</p>3</section>

• flex makes a container; its direct children become items in a row.
• flex-col turns the main axis vertical.
• justify-* places items along the main axis; items-* across it.
• flex-wrap and gap-* handle rows that run out of room.
• flex-1 shares space, shrink-0 protects a size, min-w-0 lets text truncate.
• ml-auto pushes an item, and everything after it, to the far end.