Time to put the whole course together. We’re rebuilding the landing page from the CSS course with Tailwind utilities.

Start from requirements, not classes

Before writing a single class, write down what the page has to do:

semantic header, navigation, main content, sections, and footer
readable type and content width
one-column base layout, with wider card tracks when content fits
visible hover, focus, active, and disabled states
complete light and dark palettes
reduced-motion behavior
no horizontal overflow at 200% zoom

Every class you add should trace back to one of these lines.

Build the skeleton

Structure first, then detail:

<body class="bg-white text-gray-950 dark:bg-gray-950 dark:text-white">
  <header class="border-b border-gray-200 dark:border-gray-800">...</header>

  <main>
    <section class="mx-auto max-w-6xl px-4 py-16 sm:px-6">
      <h1 class="max-w-3xl text-4xl font-bold tracking-tight md:text-6xl">
        Learn CSS by building
      </h1>

      <ul class="mt-10 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        ...
      </ul>
    </section>
  </main>
</body>

The body sets the page colors for both schemes. The section constrains the content width and adds gutters that grow at sm. The heading has a readable maximum width and scales up at md. The card list is the responsive grid from earlier in the course.

One system at a time

Work in layers: page and container sizing, then layout, then spacing rhythm, then typography, then colors, then interactive states, then responsive changes, then motion. Finish one layer across the whole page before starting the next. When something conflicts, you know which layer introduced it. Styling each element to completion in isolation makes conflicts much harder to find.

Theme and components

Put repeated values in @theme only when they represent real project decisions, like the brand color. Extract the repeated card markup into a component so semantics and focus behavior stay consistent across all cards. Keep one-off composition where it is.

Use real content early

Add the longest title you have, a card without an image, a validation error, a translated navigation item, and several cards. Tab through every action. Emulate dark mode and reduced motion in DevTools. Resize continuously and zoom to 200%, instead of checking three named breakpoints.

Compare with the original

Open both versions side by side in DevTools. For each important element, compare display, track or flex sizing, width constraints, spacing, typography, color, focus styles, and media query conditions. The generated CSS should express the same deliberate layout as the hand-written version. A difference is fine only when it’s intentional and you can say why.

To finish, produce a short verification table with a row for each requirement: semantic structure, keyboard order, focus, contrast, responsive layout, zoom, dark mode, reduced motion, class detection, and production CSS output. Fix every unexplained difference before you call the translation complete.

Build a complete Tailwind page