Tailwind CSS Course

Lesson 1 • Installing and Configuring Tailwind

Walks through CLI installation, PostCSS integration, and CDN usage. Students produce a working local environment ready for all subsequent exercises.

Lesson 2 • Tailwind CSS Core Philosophy

Explores Tailwind's design constraints, opinionated defaults, and constraint-based design system. Connects philosophy to practical productivity gains students will experience.

Lesson 3 • What Is Utility-First CSS

Defines utility-first styling and contrasts it with component-based frameworks. Sets the conceptual baseline for every Tailwind decision made throughout the course.

Lesson 4 • The Tailwind Configuration File

Introduces tailwind.config.js structure, content paths, and theme keys. Prepares students to customise Tailwind without breaking its defaults.

Lesson 1 • Width, Height, and Sizing Utilities

Explores fixed, fractional, viewport, and content-based sizing classes. Students size containers and images correctly across different layout contexts.

Lesson 2 • Display and Visibility Utilities

Covers block, inline, flex, grid, hidden, and visibility classes. Students control element rendering and accessibility-safe hiding techniques.

Lesson 3 • Margin and Padding Utilities

Teaches directional margin and padding classes including shorthand and axis variants. Students apply spacing to real UI elements with precision.

Lesson 4 • Understanding the Spacing Scale

Covers Tailwind's default rem-based spacing scale and how numeric tokens map to pixel values. Provides the mental model needed for consistent margin and padding decisions.

Lesson 1 • Tailwind Colour Palette Fundamentals

Introduces the default palette structure, shade numbering, and semantic colour roles. Students select accessible colour pairs using Tailwind's built-in scale.

Lesson 2 • Font Size and Line Height

Maps Tailwind's text-size scale to typographic roles and explains paired line-height defaults. Students establish clear visual hierarchy in any UI.

Lesson 3 • Customising and Extending Colours

Demonstrates adding brand colours, CSS variables, and semantic aliases in the config. Students maintain a scalable colour system across large projects.

Lesson 4 • Letter Spacing and Text Alignment

Teaches tracking, text-align, and text-transform utilities for fine typographic control. Students polish headings and body copy to professional standards.

Lesson 1 • Building Real Flex Components

Applies all flex utilities to build a navigation bar, media object, and footer layout. Students consolidate flex knowledge through hands-on component construction.

Lesson 2 • Flex Grow, Shrink, and Basis

Explains flex-grow, flex-shrink, and flex-basis utilities and their interaction. Students build fluid columns that resize predictably under different content loads.

Lesson 3 • Order and Self-Alignment Utilities

Teaches order classes and per-item alignment overrides for complex flex arrangements. Students reorder visual elements without changing DOM structure.

Lesson 4 • Alignment and Justification

Covers justify-content, align-items, align-self, and align-content utilities. Students centre, distribute, and stretch items precisely in any flex layout.

Lesson 1 • Alignment Inside Grid

Applies justify-items, align-items, justify-self, and align-self within grid context. Students position cell content independently from track sizing.

Lesson 2 • Grid Container Setup

Activates grid context and defines column and row templates using Tailwind classes. Students understand how template definitions control all child placement.

Lesson 3 • Building Real Grid Layouts

Constructs a dashboard shell, image gallery, and editorial page layout using grid utilities. Students apply grid knowledge to production-quality page structures.

Lesson 4 • Column and Row Spanning

Covers col-span, row-span, and full-span utilities for placing items across multiple tracks. Students create asymmetric layouts that break the uniform grid pattern.

Lesson 1 • Responsive Layout Switching

Switches between flex and grid layouts at different breakpoints for adaptive structure. Students build components that restructure themselves without JavaScript.

Lesson 2 • Tailwind Breakpoint Prefixes

Covers sm, md, lg, xl, and 2xl prefixes and their default pixel thresholds. Students apply breakpoint prefixes to any utility class with confidence.

Lesson 3 • Mobile-First Design Principles

Establishes mobile-first thinking and explains why Tailwind's breakpoints are min-width. Students reframe design decisions to start from the smallest viewport.

Lesson 4 • Custom Breakpoints and Screens Config

Adds project-specific breakpoints and overrides defaults in the screens config key. Students tailor Tailwind's responsive system to any design specification.

Lesson 1 • Group and Peer Variants

Teaches group-hover and peer-checked patterns for parent-triggered and sibling-triggered styles. Students build dropdown menus and custom checkboxes without JavaScript.

Lesson 2 • Form State Variants

Applies required, invalid, valid, and checked variants to style form validation states. Students provide clear visual feedback for user input without custom CSS.

Lesson 3 • Transition and Animation Utilities

Adds smooth transitions and keyframe animations using Tailwind's built-in utility classes. Students enhance interactivity with performant, GPU-friendly motion.

Lesson 4 • Active, Visited, and Disabled States

Covers active, visited, disabled, and placeholder variants for complete form and link styling. Students handle all interactive states in a single utility-class workflow.

Lesson 1 • Arbitrary Values and CSS Variables

Uses bracket notation for one-off values and integrates CSS custom properties into utilities. Students escape the default scale when design specs demand precision.

Lesson 2 • Performance and Bundle Optimisation

Audits CSS output size, configures content paths precisely, and applies safelist patterns. Students ship the smallest possible stylesheet without sacrificing dynamic class usage.

Lesson 3 • Dark Mode Implementation

Configures class-based and media-based dark mode and applies dark variants throughout a UI. Students deliver complete light and dark themes from a single stylesheet.

Lesson 4 • Writing Custom Tailwind Plugins

Builds custom utility, component, and variant plugins using Tailwind's plugin API. Students extend Tailwind's capabilities to match any project's unique requirements.