TodayTools

Tailwind CSS flashcards

Utility-first styling with Tailwind 4: CSS-first theme, state variants, container queries and clean component APIs.

Donate
Beginner friendly, starts from zero
Section
How to study
0
Tailwind CSSStart from zero · 1 of 11

What is Tailwind CSS, in one plain sentence?

Tailwind CSS is a free tool that lets you style a web page by adding short ready-made names to your HTML, instead of writing your own style rules.

A box of labelled stickers: bold, blue, rounded. Stick on what you need.
Show again
11 left
Got it

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

  1. Start from zero

    • What Tailwind is and why it exists3 cards
    • HTML, CSS and classes2 cards
    • Spacing and colour2 cards
    • Layout and variants2 cards
    • Getting ready2 cards

  2. Core basics

    • Why utilities, setup and tooling5 cards
    • Spacing and sizing4 cards
    • Colour, text and gradients3 cards
    • Layout: flex, grid and position3 cards
    • Responsive design and states3 cards
    • Cards, images and motion3 cards

  3. Next steps

    • Theme tokens with @theme2 cards
    • Arbitrary values and CSS variables2 cards
    • Advanced variants5 cards
    • Custom CSS the Tailwind way5 cards
    • Text, accessibility and form helpers4 cards

  4. Go deeper

    • Responsive at scale2 cards
    • Design system control4 cards
    • Browser support and colour2 cards
    • Migrating to v43 cards
    • Class detection and safelisting2 cards
    • Specificity and overrides2 cards
    • Motion2 cards
    • New in 4.1 to 4.32 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

  • Reviewed 26 October 2026
  • CoversTailwind CSS 4.3@tailwindcss/vite 4.3Safari 16.4+, Chrome 111+, Firefox 128+
How these cards are made

Tailwind CSS at a glance

Tailwind CSS lets you style a web page by adding short ready-made class names to your HTML.

Like a box of labelled stickers, such as bold, blue and rounded: you stick on the ones you need instead of painting by hand.

Words you will meet

Class
A name tag on an HTML element that styles attach to
Utility class
A class that does one small job, like making text bold
Padding
Space inside an element's edge
Margin
Space outside an element's edge, between it and its neighbours
Flex
A way to line boxes up in a row or a column
Grid
A way to place boxes in rows and columns, like a table
Variant
A prefix that says when a class applies, like only on hover
Breakpoint
A screen width from which a class starts to apply

The steps

  1. 1. Start from zero (11 cards): What Tailwind is, how styling worked before it, your first classes, and the plain words the core basics use.
  2. 2. Core basics (21 cards): Utilities, setup, the spacing and colour scales, flex, grid, breakpoints and states.
  3. 3. Next steps (18 cards): CSS-first theme, arbitrary values, group, peer and data variants, dark mode toggles and custom utilities.
  4. 4. Go deeper (19 cards): Container queries, theme control, v4 internals and upgrades, component APIs, motion and monorepos.
All 11 cards in Start from zero
What is Tailwind CSS, in one plain sentence?
Tailwind CSS is a free tool that lets you style a web page by adding short ready-made names to your HTML, instead of writing your own style rules.
What are HTML, CSS and a class?
HTML is a page's content and structure. CSS is its look: colours, sizes, spacing. A class is a name tag you put on an HTML element so styles can find it.
How did people style pages before tools like Tailwind?
They invented names like big-blue-button-2, wrote the rules in a separate CSS file and jumped between files. Old rules piled up that nobody dared to delete.
Where do you see Tailwind's work in daily life?
On many modern shop, school, company and app websites: clean buttons, cards with rounded corners, layouts that fit your phone. The visitor never sees Tailwind, only the result.
What is a utility class, and what does a first one look like?
A utility class does one small job. Here text-xl gives bigger text, font-bold makes it bold and text-blue-600 makes it blue.
What are padding, margin and rem?
Padding is space inside an element's edge; margin is space outside it. Sizes use rem, a unit tied to the page's base text size, usually 16px, so p-4 is 1rem of padding.
How does Tailwind name colours?
A colour name plus a shade from 50 (lightest) to 950 (darkest), like bg-green-100 for a pale green background. Add /50 to make it half see-through.
What are flex and grid?
Two ways to arrange boxes. Flex lines them up in one row or column; grid places them in rows and columns, like a table. Both are switched on with one class.
What are a variant and a breakpoint?
A variant is a prefix that says when a class applies: hover: only when the mouse is over it. A breakpoint is a screen width: md: means only on screens that wide or wider.
What do you need before starting?
A browser, a text editor and a little HTML. To try it, one script tag in an HTML file is enough. Real projects install it with npm (the tool that fetches code packages) and a build tool like Vite.
What will you be able to do after this topic?
Style text, colours, spacing, buttons and cards with classes, lay out pages with flex and grid, make them fit phones and desktops, and add hover and dark mode looks.
Tailwind CSS cheatsheet

Setup (v4)

  • @import "tailwindcss"; Load everything
  • @theme { --color-brand: ... } Add tokens and utilities
  • @source "../packages/ui"; Scan extra paths
  • @plugin "@tailwindcss/typography"; Load a plugin
  • @custom-variant dark (&:where(.dark, .dark *)); Class-based dark mode
  • @utility name { ... } Custom utility with variants
  • @reference "./app.css"; Theme in scoped styles

Layout

  • flex items-center justify-between gap-4 Spread row, centred
  • grid grid-cols-1 md:grid-cols-3 gap-6 Responsive columns
  • grid-cols-[240px_1fr] Custom tracks
  • mx-auto max-w-7xl px-4 Page container
  • min-w-0 Let flex text shrink
  • size-10 Width and height
  • min-h-dvh Full visible height
  • sticky top-0 z-10 Sticky header

Variants

  • md: / max-md: / md:max-xl: From, below, range
  • @container + @md: Container query
  • hover: focus-visible: active: disabled: Interaction states
  • group-hover: / peer-user-invalid: Parent and sibling state
  • has-checked: / not-first: Relational variants
  • data-[state=open]: / aria-expanded: Attribute state
  • starting:opacity-0 Enter transition
  • motion-safe: / motion-reduce: Respect motion settings

Values

  • p-4 = 1rem Spacing step 0.25rem
  • bg-red-500/50 Colour with 50% alpha
  • top-[37px] Arbitrary value
  • bg-(--accent) CSS variable shorthand
  • text-sm/6 Size with line height
  • p-4! Important (v4 syntax)
  • [mask-type:alpha] Arbitrary property

v3 to v4 renames

  • shadow-sm -> shadow-xs And shadow -> shadow-sm
  • rounded-sm -> rounded-xs And rounded -> rounded-sm
  • blur-sm -> blur-xs Same shift for blur
  • outline-none -> outline-hidden Keeps forced-colours outline
  • ring -> ring-3 Default ring is now 1px
  • !p-4 -> p-4! Important moves to the end
  • bg-opacity-50 -> bg-black/50 Opacity modifiers only
Donate