Free through lesson 3

Modern CSS & Tailwind for Beginners

From custom properties, Grid, container queries, :has(), and logical properties to CSS architecture, Tailwind CSS v4, and dark mode. In 20 lessons, you'll get to the point where you can choose between plain CSS and Tailwind with confidence. You can try out how CSS behaves right in your browser.

Start from lesson 1 Unlock every course

Curriculum

The 20 lessons are split into 5 chapters. We recommend going in order from chapter 1, but feel free to jump to whatever interests you. You can preview CSS behavior right in your browser. From chapter 3 on, if you have Node.js installed, you can actually build the Tailwind examples as you go.

Chapter 1 — Today's CSS (lessons 1–5)

Try out custom properties, Grid, container queries, :has(), and logical properties right in your browser. By lesson 5, you'll be able to do a lot more without relying on media queries or JavaScript.

Using Custom Properties for Design

Put variables on the component root, give them types with @property, and swap them from JavaScript. A step beyond lesson 16 of HTML/CSS for Beginners.

Free

Grid Today (subgrid and Named Lines)

subgrid to align rows in nested cards, named lines for readable layouts, dense to fill gaps, and three content-based widths.

Free

Container Queries

Switch based on the parent's width, not the screen's. container-type and @container, cqi units, and style queries that use custom properties as conditions.

Free

Targeting Parents and Siblings with :has()

Change a parent's look based on its children. Sibling conditions, handling form state on the parent, how specificity is counted, and where to draw the line on overuse.

Logical Properties and Writing Modes

margin-inline, padding-block, and inset move you from "left/right/top/bottom" to "inline/block." Why vertical Japanese text and multilingual support work with the same CSS.

Chapter 2 — Architecture (lessons 6–10)

Step by step, you'll settle how to name things, how to deal with specificity, and how to define design tokens. At the end, you'll build a small design system with nothing but plain CSS.

Naming and Splitting

Put into words what class names are for. How to read BEM, rules for naming by role, and the order for splitting files.

Dealing with Specificity, and Cascade Layers

@layer wins before specificity. :where() makes specificity 0, :is() takes its highest argument, and !important reverses layer order.

Design Tokens

Split them into a raw-value layer, a meaning layer, and a component layer. Derive colors with oklch and color-mix, and set a rule for not adding too many tokens.

Thinking in Components

Write each component as one block with CSS nesting. Contain its reach with @scope. The limits of encapsulation, and where to accept them.

Building a Small Design System in Plain CSS

Bring the tools from lessons 1 to 9 together in one file. Four layers (layers, tokens, components, utilities) give you a baseline to compare with Tailwind.

Chapter 3 — Tailwind (lessons 11–15)

Install Tailwind CSS v4 for real and learn how to read utilities and variants, define tokens with @theme, and when to use @apply. Every time, you'll check the generated CSS on the spot.

Installing Tailwind CSS v4

From installing with npm to building with the CLI. v4's CSS-first configuration, the structure of the generated CSS, and why not to use the CDN version in production.

Reading Utilities

How class names map to the generated CSS. Numbers based on --spacing, writing arbitrary values, and using canonicalize to normalize order and notation.

Reading Variants

Measure what hover: and md: expand to. Pick up other elements' states with group- and peer-, and reach container queries with has- and @.

Defining Tokens with @theme

In v4, configuration lives in CSS. @theme vs. :root, custom utilities with @utility, custom variants with @custom-variant, and @config for reading v3 configs.

When to Use @apply

See what @apply actually expands to. Three situations where it's fine, situations where it costs you, and @reference for using it from another file.

Chapter 4 — Themes and States (lessons 16–18)

Write dark mode, states (hover, focus, disabled, error), and animations in both plain CSS and Tailwind. You'll confirm that either way, it ends up as the same CSS.

Dark Mode

Switch browser defaults too with color-scheme. Combine values in one line with light-dark(), build a manual toggle with a data attribute, and replace Tailwind's dark:.

Expressing State

Use :focus-visible and :user-invalid to show things only when you should. Keep state in data and aria attributes, and pick it up from both CSS and Tailwind.

Animation

Solve the display/transition problem with allow-discrete and @starting-style. Animate variables with @property, and respect prefers-reduced-motion.

Chapter 5 — Finishing Up (lessons 19–20)

Measure and read the CSS Tailwind generates, and decide when to use it versus plain CSS. You'll get to the point where you can put into words which one to choose for your own project.

Reading the Generated CSS

Actually measure the output file. How many bytes one more class adds, how scanning works, the trap of dynamic class names, and the fix with @source inline.

Choosing Between Plain CSS and Tailwind

Build the same component both ways and compare. How to choose based on your project, and where to draw the line when mixing them. The finale of this course.

Once you've finished all 20 lessons, move on to building components in the React Intro Course or the Vue.js Fundamentals Course. A membership unlocks every course.