Tailwind CSS
Tailwind CSS is a utility-first CSS framework where you style elements by adding class names like `flex`, `p-4`, and `text-gray-800` directly in your HTML. This course teaches Tailwind from scratch: the utility system, responsive design, dark mode, and building real UI components without writing a single custom CSS file.
What you'll learn
Course outline
Free — no account needed
What Is Tailwind CSS?
Why utility-first CSS beats writing custom stylesheets for most projects
Spacing, Sizing, and the Scale
How Tailwind's 4px base unit system works and why it makes spacing decisions easy
Flexbox and Grid with Tailwind
Layout in Tailwind — the 20 classes that handle 90% of layouts
Full course — $39 one-time
Colours and Typography
Tailwind's colour palette, text sizing, font weight, and the classes that handle 95% of text styling
Responsive Design
Mobile-first breakpoints — how sm:, md:, lg:, and xl: prefixes work
Hover, Focus, and Dark Mode
Interactive states and dark mode without any custom CSS
Building Real UI Components
Cards, buttons, badges, navigation bars — the patterns you reach for in every project
Customising Tailwind
Extending the default theme with your own colours, fonts, and design tokens
Get the full course
8 lessons — from utility-first basics to responsive components and custom design tokens.