Topolearn

Learn Tailwind CSS

Utility-first CSS framework: style by composing small classes in your markup

16 lessons · 3 hours · 4 levels · covers Tailwind CSS 4.3

Tailwind CSS provides thousands of small single-purpose classes such as flex, pt-4 and text-center that you combine directly in HTML or components. Version 4 is configured in CSS with @theme, builds on native cascade layers and CSS variables, and detects the classes you use automatically. It's one of the most popular ways to style React, Vue, Svelte and server-rendered apps quickly and consistently.

Sign in free to track progressOfficial docs ↗

Before you start

Tailwind CSS builds on these; the tree links to the exact lessons you need.

CSSEssentials level

How deep do you want to go?

1. EssentialsRead and write simple code, do the everyday basics5 lessons · 48 min in total
2. PracticalUse it productively at work, with the usual idioms10 lessons · 2 hours in total
3. AdvancedThe less common features, performance and trade-offs13 lessons · 2 hours in total
4. ExpertInternals and the edge cases experts know16 lessons · 3 hours in total

The Tailwind CSS tree

Tailwind CSSInstalling Tailwind v4Installing Tailwind v4The utility-first workflowThe utility-firstworkflowSpacing and sizingSpacing and sizingColours and typographyColours andtypographyFlexbox and grid layoutsFlexbox and gridlayoutsHover, focus and other statesHover, focus andother statesResponsive designResponsive designDark modeDark modeCustomising the theme with @themeCustomising thetheme with @themeContainer queriesContainer queriesRules, declarations and linking CSSRules, declarationsand linking CSSThe box modelThe box modelTypography and web fontsTypography and webfontsFlexboxFlexboxPseudo-classes and pseudo-elementsPseudo-classes andpseudo-elementsMedia queries and responsive designMedia queries andresponsive designCustom properties (CSS variables)Custom properties(CSS variables)Cascade layersCascade layers
Essentials and Practical shown (10 of 16 lessons); the full list is below. Click a lesson to read it.

All 16 lessons, in order

Getting started

  1. Installing Tailwind v4 · Essentials · 8 min

    Add Tailwind v4 to a project with the Vite plugin, PostCSS or the CLI, and import it with a single @import line.

  2. The utility-first workflow · Essentials · 8 min

    Style elements by combining small single-purpose classes in the markup instead of writing custom CSS rules.

Core utilities

  1. Spacing and sizing · Essentials · 10 min

    Use the spacing scale for padding, margin, gap, width and height, including fractions, size-*, and dynamic values like p-13.

  2. Colours and typography · Essentials · 10 min

    Apply the colour palette with text-, bg- and border- utilities and opacity modifiers, and set type with size, weight and leading utilities.

  3. Flexbox and grid layouts · Essentials · 12 min

    Build layouts with flex, items-center, justify-between, grid-cols-* and col-span-* utilities.

States and responsiveness

  1. Hover, focus and other states · Practical · 12 min

    Apply utilities conditionally with variants like hover:, focus-visible:, disabled:, group-hover:, peer-checked: and has-*.

  2. Responsive design · Practical · 10 min

    Build mobile-first layouts with sm:, md:, lg:, xl: and 2xl: breakpoint prefixes, plus max-* and range variants.

  3. Dark mode · Practical · 8 min

    Style dark themes with the dark: variant, driven by the system preference or by a class or data attribute you toggle.

  4. Container queries · Practical · 8 min

    Make components adapt to their parent's width with the @container class and @sm:, @md:, @lg: variants.

Theme and customization

  1. Customising the theme with @theme · Practical · 12 min

    Define colours, fonts, breakpoints and other design tokens in CSS with @theme, generating utilities and CSS variables at once.

  2. Arbitrary values and properties · Advanced · 10 min

    Escape the design scale with square-bracket values like w-[37px], CSS-variable shorthand bg-(--x), and arbitrary properties.

  3. Custom utilities and variants · Advanced · 12 min

    Register your own utilities with @utility (including functional ones with --value()) and your own variants with @custom-variant.

  4. Reuse: components, @apply and class merging · Advanced · 12 min

    Avoid duplication by extracting framework components, use @apply sparingly, and manage variant classes with helpers like clsx and tailwind-merge.

How Tailwind works

  1. Class detection and the build engine · Expert · 12 min

    Know how v4's Rust-powered engine finds class names in your files, why dynamic class names fail, and how @source and safelisting work.

  2. Layers, Preflight and specificity · Expert · 12 min

    See how v4 organises its output into native cascade layers, how utilities override components, and how the important modifier works.

  3. Upgrading from v3 and browser support · Expert · 12 min

    Migrate v3 projects with the official upgrade tool and know the renamed utilities, changed defaults and modern-browser requirements of v4.