Tailwind CSS

Utility-first styling inside your markup.

Tailwind CSS is taught here in 13 lessons, running from Utility-first basics through to Production performance and the honest limits. Each lesson takes one topic, shows the working code, and links onward to the next, so the course can be read straight through in order.

Lessons

1. Utility-first basicsInstall the toolchain, read a class list as the CSS it produces, and understand why the numbers in spacing utilities are a scale rather than pixels.
2. Responsive and state variantsMobile-first breakpoints, the state variants that replace handwritten interaction CSS, and how group, peer and custom variants compose.
3. Configuration and themingCSS-first theming in v4, the v3 JavaScript config for comparison, and when a custom utility beats a pile of @apply rules.
4. Core layout utilities: flex, grid and spacingBuild page structure with display, flex and grid utilities, prefer gap over margin tricks, and place things with positioning and insets.
5. Typography, colour and dark modeSet type with size and line-height together, build a colour system you can theme, and switch dark mode from a class or the operating system.
6. Component patterns without a component libraryBuild buttons, cards, badges, alerts and tables that stay consistent, and know when a class list deserves to become a component.
7. Forms, states and accessible stylingStyle inputs consistently across browsers, use focus-visible and user-invalid correctly, and make required and invalid states legible without JavaScript.
8. Transitions, transforms and animationMotion that supports the interface rather than decorating it: transitions, transforms, keyframes in the theme, and reduced-motion handling.
9. Arbitrary values, brackets and the scanning modelEscape the scale when you must, understand how the scanner finds class names, and know why a class assembled from a variable never appears.
10. Integrating with frameworks and build toolsWire Tailwind into Vite, PostCSS and the CLI, understand where @apply needs a reference, and set up the tooling that keeps class lists readable.
11. Tailwind with component libraries and variant helpersCombine class lists safely with cn(), declare variants with cva, and integrate headless component libraries without losing ownership of the styling.
12. Migrating from v3 to v4Run the upgrade tool, fix the renamed utilities that fail silently, and verify the result against the old build rather than by eye.
13. Production performance and the honest limitsKeep the output small, understand what preflight does to existing markup, and recognise the cases where plain CSS or CSS Modules is the better answer.

More in Front-end Development

HTML CSS JavaScript TypeScript HTML DOM AJAX JSON Bootstrap 5 Foundation Vue.js React Next.js Angular jQuery ECharts Chart.js SVG Font Awesome

FAQ