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
Coming soon - 31
Final Polish of the Marketing Site
Coming soon - 32
Introduction to Tailwind Plugins
Coming soon - 33
Managing Z-Index and Positioning
Coming soon - 34
Background Images and Gradients
Coming soon - 35
Transforming Elements
Coming soon - 36
Transitions and Animations
Coming soon - 37
Working with SVGs
Coming soon - 38
Accessibility Best Practices
Coming soon - 39
Advanced Responsive Patterns
Coming soon - 40
Building a Card Component
Coming soon - 41
Building a Testimonial Section
Coming soon - 42
Building a Footer
Coming soon - 43
Managing Global Styles
Coming soon - 44
Using Tailwind with Frameworks
Coming soon - 45
Debugging Tailwind Styles
Coming soon - 46
Managing CSS Conflicts
Coming soon - 47
Implementing Modals
Coming soon - 48
Building a Dropdown Menu
Coming soon - 49
Using Arbitrary Values
Coming soon - 50
Performance Optimization
Coming soon - 51
Building a Pricing Table
Coming soon - 52
Advanced Hover Effects
Coming soon - 53
Responsive Images
Coming soon