Glossary

98 terms from Tailwind CSS, in plain words, each with the chapter that teaches it.

Search the glossary

#

!important: A CSS flag that makes one declaration win over others. Tailwind adds it when you put `!` after a class, as in `bg-brand!`; use it rarely.
--minify: A CLI option that removes spaces and line breaks from `output.css` to make it smaller. Use it for the file you upload to the live site.
--watch: A CLI option that keeps Tailwind running and rebuilds `output.css` each time you save a file. Press Ctrl+C to stop it.
@apply: A Tailwind directive that copies the CSS of the utilities you list into your own rule. Kettle & Crane uses it to build `.btn` from utilities like `rounded-lg px-4 py-2`.
@container: A class that makes an element a size container, so children can change style based on the container's width rather than the screen's, using variants like `@md:`.
@custom-variant: A Tailwind directive in your input CSS that defines a new variant or redefines an existing one. For example, it can make `dark:` follow a `data-theme` attribute instead of the device setting, so visitors can choose a theme.
@layer base: A place in your input CSS for styles that apply to plain elements like `h1` and `a`. It sits next to Preflight, so any utility on the element still overrides it.
@layer components: The layer for your own component classes, such as `.btn`. It sits between base styles and utilities, so a utility like `px-8` can override it.
@plugin: A directive that loads a Tailwind plugin, a package that adds styles or utilities, such as `@plugin "@tailwindcss/forms";`.
@reference: A directive that loads your theme and utilities into a CSS file, such as a Vue, Svelte or module CSS file, so `@apply` works there without duplicating the CSS.
@source: A directive that tells Tailwind to also scan another folder for class names, useful when HTML lives outside the project folder.
@tailwindcss/cli: Tailwind's command-line tool. It reads `input.css` and your HTML files and writes the finished `output.css`.
@tailwindcss/forms: An official Tailwind plugin that gives all form controls a plain, consistent starting look that utilities can then restyle.
@tailwindcss/typography: An official plugin whose `prose` class styles long articles of plain HTML text nicely.
@tailwindcss/upgrade: A command (`npx @tailwindcss/upgrade`) that converts most version 3 projects, which use `tailwind.config.js`, to version 4, where settings live in `@theme`.
@tailwindcss/vite: Tailwind's plugin for Vite, which runs Tailwind inside Vite so you don't need the CLI.
@theme: The block in `input.css` where you add or change theme variables, like `--color-brand`. Each variable creates matching utilities such as `bg-brand`.
@utility: A directive that defines your own utility class from a name and some CSS, like `text-fluid`. It works with every variant.

A

alt attribute: An HTML attribute on images that describes the picture for screen readers and shows if the image fails. An empty `alt=""` marks a decorative image that screen readers skip.
Arbitrary value: A value in square brackets that isn't on Tailwind's scale, like `p-[13px]` or `bg-[#2b4a3f]`. Use it rarely so the consistent scale isn't weakened.
ARIA: A set of HTML attributes that give screen readers extra information, such as `aria-current="page"` marking the link for the current page. Tailwind can style elements by these attributes with variants like `aria-[current=page]:`.
aria-describedby: An attribute that tells screen readers which element describes a field, such as the error message for the email input.
aspect-ratio: A property (and Tailwind classes) that sets an element's width-to-height proportion so the height follows the width, like 4/3 for the shop photos.

B

BEM: A CSS naming convention (Block, Element, Modifier) that produces class names such as `.card__title`. Utility-first CSS with Tailwind removes the need to invent such names.
Breakpoint: A named screen width (`sm`, `md`, `lg`, `xl`, `2xl`) at which a variant starts to apply. Tailwind is mobile first, so each applies from that width upward.
Browser build: A script that reads your page's classes and writes Tailwind's CSS in the browser as the page loads. It's good for experiments but not for real sites.

C

Cascade layers: A CSS feature that orders groups of rules; a later layer wins over an earlier one regardless of specificity. Tailwind's order is base, components, then utilities.
className: The JSX attribute used instead of `class`, because `class` is a reserved word in JavaScript. Tailwind classes go inside it in React.
clsx: A small package that joins class names together, skipping empty ones. It helps with busy class lists in React.
color-scheme: A CSS property that tells the browser to draw its own parts, like scroll bars and form controls, in a light or dark theme. Tailwind's `scheme-light-dark` on `<html>` sets it.
Component (CSS): A small class of your own, such as `.btn`, that bundles several utilities and lives in `@layer components`.
Component (React): A JavaScript function that returns a piece of page as JSX and is written once and reused, like Kettle & Crane's `ProductCard`. Its name starts with a capital letter.
container (class): A Tailwind class that sets an element's `max-width` to a value that changes at each screen size. Fixed `max-w-` classes such as `max-w-5xl` are usually preferred because they are more predictable.
Contrast ratio: A number comparing two colors' brightness; higher is easier to read. The web accessibility guidelines (WCAG) ask for at least 4.5 for normal text.

D

Dark mode: A color scheme with a dark background, chosen by the device or by a visitor. In Tailwind the `dark:` variant applies a utility only when dark mode is on.
data-theme: An HTML attribute, typically set on `<html>`, that records which theme is chosen, such as `data-theme="dark"`. Combined with `@custom-variant`, it lets visitors pick light or dark regardless of their device setting.
Default value: The value a prop or parameter takes when none is given, as in `size = "sm"` for the `Button` component.
Design tokens: Named design values, such as Kettle & Crane's brand green, kept in one place so they're reused consistently.
DevTools: The tools built into a web browser for inspecting a page. They are used to read computed CSS values and to check colors and contrast.

F

Fieldset: An HTML element that groups related form controls, such as the delivery radio buttons. Its legend names the group.
Flexbox: A CSS layout system for rows and columns. In Tailwind you put `flex` on a parent and use classes like `items-center`, `justify-between` and `gap-4`.
focus-visible: A variant that applies a style when an element has keyboard focus, matching the CSS `:focus-visible`. It is used with outline utilities on buttons and links so keyboard users can see where they are, while mouse users don't get a ring on click.

G

Grid: A CSS layout system with rows and columns. `grid grid-cols-3` makes three equal columns, and `col-span-2` makes a cell wider.
Group: A parent marked with the class `group`, so its children can react to its state with variants like `group-hover:`.

H

Hover state: The look an element has while the pointer rests on it, styled with the `hover:` variant. Tailwind wraps it in `@media (hover: hover)` so taps on phones don't stick.

I

Inline styles: CSS written in an element's `style` attribute. Unlike utilities, it can't react to hover, screen width or dark mode and accepts any value instead of a fixed scale.

J

JSX: HTML-like code inside JavaScript that React turns into real elements. In JSX you write `className` instead of `class`.

L

line-clamp: A class that cuts text off after a set number of lines with "…", handy for product notes of varying length.
Lookup object: In JavaScript, an object is a set of `name: value` pairs in braces, and a lookup object uses one to map a prop value like `"sm"` to a string of complete class names. This lets Tailwind find every class, which it cannot do when class names are built from pieces.
LTS: Long-term support: the Node.js version meant for everyday use, which is the one to install.

M

Mobile first: Writing styles for the phone first, then adding changes at wider breakpoints. Unprefixed utilities apply everywhere, and prefixed ones apply from that width up.
motion-reduce: A variant that applies when the visitor has asked their system for less motion, as in `motion-reduce:transition-none`, so animation is turned off for them.
Multi-cursor editing: A VS Code feature for changing several copies of text at once: Ctrl+D (Cmd+D on a Mac) selects the next match, and Alt+Click adds a cursor where you click. It's a quick way to edit repeated class lists.

N

Namespace: The start of a theme variable's name, such as `--color-` or `--font-`, which decides which utilities it creates.
Node.js: A program that runs JavaScript outside the browser. Tailwind's tools need it.
node_modules: The folder where npm puts the packages your project installs. Never edit it by hand, and don't upload it to the live site.
npm: Node's package manager, which downloads and installs packages that other people have published.
npx: A command that runs a program from a package installed in your project, such as `npx @tailwindcss/cli`.

O

object-fit: `object-cover` makes a photo fill its box and get trimmed instead of stretched, so images of different shapes line up.
oklch(): A CSS color format based on how people see color, with lightness, chroma and hue. Tailwind's palette is written in it, and DevTools shows it when you read colors back.
Opacity modifier: A slash and number after a color class, like `bg-black/50`, makes just that color see-through. `opacity-50` instead fades the whole element and its contents.
outline-hidden: A Tailwind class that hides the browser's default focus outline but keeps one in Windows high-contrast mode. It is used when another style, such as a ring, replaces the outline.
output.css: The CSS file Tailwind builds from `input.css` and your HTML. It contains only the classes you used, and your pages link to it.

P

Package: A named bundle of published code that npm can install, like `tailwindcss`.
package.json: The file that describes a project and lists the packages it uses. `package-lock.json` records the exact versions and should be left alone.
Page width: The pattern `mx-auto max-w-5xl px-4` centers content in a box of at most 64rem with side padding, so text stays readable on wide screens and sections line up.
Palette: Tailwind's built-in colors, each with 11 shades from 50 (nearly white) to 950 (nearly black).
Peer: An input marked `peer`, so a later sibling can react to its state with variants like `peer-checked:`. The peer must come before the element you style.
Plugin: A package that adds styles or utilities to Tailwind, loaded with `@plugin`.
Position utilities: Classes that set `position` (`relative`, `absolute`, `sticky`) plus offsets like `top-2` and `inset-0` and stacking with `z-10`. A badge needs `relative` on its card and `absolute` on itself; a sticky header uses `sticky top-0 z-10`.
Preflight: Tailwind's reset, added by `@import "tailwindcss"`. It removes default margins, makes headings look like body text, removes list bullets and makes images block-level.
prettier-plugin-tailwindcss: A free Prettier plugin that sorts Tailwind classes into the recommended order every time you save, keeping long class lists consistent.
Props: Values passed to a React component, written like HTML attributes, such as `name="Decaf"` on `ProductCard`.

R

React: A JavaScript library for building pages from reusable components.
Ring: A solid line drawn around an element with `box-shadow`, so it follows rounded corners and takes no space. It's commonly used for focus on form fields.

S

Screen reader: Software that reads a page aloud for people who can't see it. Good HTML and attributes like `alt` and `aria-describedby` help it.
Sibling: An element that shares a parent with another, such as an input and the error message after it.
Source detection: Tailwind scanning your files as plain text for complete class names, so it writes only the CSS you use. A class built from pieces, like `text-{{size}}`, is never found.
space-y: A class on a parent that puts an even vertical gap between its children, giving every child except the last a bottom margin. Inside flex and grid, `gap-` is usually better.
Spacing unit: 0.25rem (4px), the step behind `p-4`, `w-64`, `gap-4` and other numbered sizes. `p-4` is 4 × 4px = 16px.
Specificity: The CSS rule for deciding which selector wins. `:where()` adds none, and cascade layers override it entirely.
Stacked variants: Variants combine and read left to right: `md:hover:underline` underlines on hover only from 48rem up. A `max-` variant such as `max-md:` targets screens narrower than a breakpoint.
Stylesheet: A CSS file the browser loads to style a page, such as `output.css`.

T

Tailwind CSS: A large set of ready-made utility classes, plus the tool that builds only the ones you use.
Tailwind CSS IntelliSense: The VS Code extension that suggests classes as you type and shows the CSS each one stands for when you hover.
tailwind-merge: A package that drops conflicting Tailwind classes, keeping `px-8` over `px-3`. It's often used with `clsx`.
Terminal: A window where you type commands to run programs. Lines starting with `$` are commands you type, and `cd` (change directory) moves you into another folder, such as `cd kc-shop`.
Ternary: The JavaScript form `test ? a : b`, which gives `a` if the test is true and `b` otherwise, such as `soldOut ? "opacity-50" : ""`.
Theme: Tailwind's set of design values, such as colors, fonts, sizes and breakpoints, stored as CSS variables.
Theme variable: A CSS variable defined in `@theme`, such as `--color-brand`, that creates utilities and can be read with `var()`.
Transition: Utilities that animate changes such as color or position. `duration-200` sets 200 ms and `ease-out` starts fast and slows down; `motion-reduce:` turns it off for visitors who asked for less motion. Utilities like `animate-spin` run ready-made animations.

U

user-invalid: A variant that styles a field as invalid only after the visitor has edited it and left it. `invalid:` matches immediately on page load, so forms open in red.
Utility class: A class that does one small job, like `p-6` for padding or `font-bold` for weight.
Utility-first: Styling mostly by combining utility classes in your HTML and writing your own CSS only when needed, instead of naming parts and writing rules.

V

var(): A CSS function that reads a custom property's value, like `var(--color-brand)`. Theme variables are ordinary CSS variables, so your own CSS can use them.
Variant: A prefix and colon in front of a utility that applies it only under a condition, such as `hover:`, `md:` or `dark:`. Variants can be stacked, as in `md:hover:underline`.
Vite: A tool that serves your project while you work and builds it for the web; `npx vite build` writes the finished site to the `dist` folder. It can run Tailwind through the `@tailwindcss/vite` plugin and is commonly used with React.
VS Code: A free code editor. It offers a built-in terminal, multi-cursor editing and extensions such as Tailwind CSS IntelliSense, which suggests classes as you type.