Tailwind CSS & Modern CSS
Master utility-first CSS with Tailwind: responsive layouts, dark mode, animations, custom plugins, design systems, and modern CSS features including container queries, :has(), and CSS custom properties.
100% Free · All lessons unlocked
Course Content
Foundations
Core concepts and groundwork
Modern CSS Landscape and the Utility-first Approach
Reading
Tailwind Setup, Config and the JIT Engine
Reading
Spacing, Sizing and the Box Model
Reading
Typography, Colors and Backgrounds
Reading
Borders, Shadows and Effects
Reading
Foundations Practice — Styling a Card Component
Exercise
Core Skills
Essential techniques and patterns
Applied Practice
Hands-on, real-world scenarios
Hover, Focus and State Variants
Reading
Dark Mode and Theming
Reading
Customising the Tailwind Config
Reading
Reusable Components with @apply and Extraction
Reading
Forms and Form Styling
Reading
Applied Project — Component Library / Design System
Project
Advanced Topics
Deeper, more complex material
Transitions and Transforms
Reading
Keyframe Animations
Reading
Modern CSS — Custom Properties and clamp()
Reading
Modern CSS — :has(), Nesting and Cascade Layers
Reading
Gradients, Filters and Backdrop Effects
Reading
Animation Practice — Interactive UI Effects
Exercise
Production & Scale
Building for the real world
Optimising for Production — Purging and Minification
Reading
Tailwind Plugins and the Plugin API
Reading
Accessibility-first Styling
Reading
Tailwind with React, Vue and Component Frameworks
Reading
Design Tokens and Scaling Design Systems
Reading
Production Practice — Themeable Design System
Exercise
Mastery & Capstone
Projects and final review
100% Free · All lessons unlocked
Topic Overview
What you'll learn
- Core concepts and fundamentals of Tailwind CSS & Modern CSS
- Industry best practices and design patterns
- Hands-on exercises with real-world scenarios
- Performance optimization and advanced techniques
- Building production-ready applications