Tailwind CSS: Utility-First Styling from Scratch
Master Tailwind CSS from scratch — utility-first styling from scratch.
What you'll learn
By the end you can confidently apply Tailwind CSS at a beginner level: utility-first styling from scratch, with real, working code.
Who it's for
Developers learning Tailwind CSS at a beginner level.
Prerequisites
HTML and basic CSS.
A structured, hands-on beginner course on Tailwind CSS, taking you from scratch by building a responsive marketing site.
Curriculum
- 1
The Utility-First Philosophy
4 min - 2
Setting Up Tailwind via CDN
4 min - 3
Understanding the Tailwind CLI
3 min - 4
Applying Text and Color Utilities
3 min - 5
Mastering Spacing and Sizing
4 min - 6
Project Setup and Hero Structure
3 min - 7
Polishing the Hero Section
4 min - 8
Box Model Fundamentals
4 min - 9
Flexbox Layout Basics
4 min - 10
Building the Navigation Bar
4 min - 11
Grid Layout Fundamentals
3 min - 12
Designing the Feature Grid
4 min - 13
Responsive Design Principles
3 min - 14
Implementing Responsive Modifiers
3 min - 15
Making the Hero Responsive
4 min - 16
Responsive Navigation
4 min - 17
Fluid Feature Grids
4 min - 18
Hover States and Modifiers
3 min - 19
Focus and Active States
4 min - 20
Styling Buttons
3 min - 21
Form Input Styling
3 min - 22
Building the Newsletter Form
3 min - 23
Intro to @apply
4 min - 24
Component Abstraction Strategy
4 min - 25
Mastering Shadows and Depth
3 min - 26
Borders and Rounded Corners
4 min - 27
Typography Refinement
4 min - 28
Implementing Dark Mode
4 min - 29
Customizing the Theme
4 min - 30
Optimizing for Production
4 min - 31
Final Polish of the Marketing Site
4 min - 32
Introduction to Tailwind Plugins
4 min - 33
Managing Z-Index and Positioning
4 min - 34
Background Images and Gradients
3 min - 35
Transforming Elements
4 min - 36
Transitions and Animations
3 min - 37
Working with SVGs
4 min - 38
Accessibility Best Practices
4 min - 39
Advanced Responsive Patterns
4 min - 40
Building a Card Component
4 min - 41
Building a Testimonial Section
3 min - 42
Building a Footer
4 min - 43
Managing Global Styles
4 min - 44
Using Tailwind with Frameworks
4 min - 45
Debugging Tailwind Styles
4 min - 46
Managing CSS Conflicts
5 min - 47
Implementing Modals
3 min - 48
Building a Dropdown Menu
3 min - 49
Using Arbitrary Values
3 min - 50
Performance Optimization
4 min - 51
Building a Pricing Table
3 min - 52
Advanced Hover Effects
3 min - 53
Responsive Images
4 min