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.
Written by the RadarTrek editorial team · Reviewed June 2026
About this course
Tailwind CSS is a utility-first CSS framework that lets you style web pages by applying small, composable CSS classes directly in your HTML — no more switching between files, no more naming CSS classes, no more stylesheet sprawl. Learning Tailwind CSS has become a core skill for React and Next.js developers because it dramatically speeds up UI development while producing consistent, maintainable styles. This Tailwind tutorial covers the utility class system, responsive design, dark mode, and component extraction.
Tailwind has overtaken Bootstrap as the most popular CSS framework and is now the default styling approach for the modern JavaScript stack. Most new Next.js projects, open-source UI component libraries, and front-end job postings reference Tailwind. After this course you will be able to build polished, responsive UIs by composing Tailwind utilities — faster than writing custom CSS and more consistent than any stylesheet you have written before.
Frequently asked questions
Should I learn CSS before Tailwind?
Yes — learning Tailwind without CSS foundations leads to copying classes you do not understand. Tailwind's utilities (p-4, flex, text-lg, grid-cols-3) are direct mappings to CSS properties. If you do not know what padding, flex, font-size, or grid mean, the classes are meaningless strings. The CSS Fundamentals course provides the foundation that makes Tailwind immediately productive.
Is Tailwind CSS better than writing custom CSS?
For most projects, Tailwind produces more consistent results than handwritten CSS, especially in teams. Custom CSS tends toward specificity conflicts, naming inconsistencies, dead code accumulation, and global style problems over time. Tailwind keeps styles co-located with markup, makes it easy to purge unused styles, and enforces a consistent design scale through its configuration. The tradeoff is more verbose HTML, which most developers find acceptable.
What is the difference between Tailwind v3 and v4?
Tailwind v4 (released in 2025) introduced a CSS-first configuration model — instead of a tailwind.config.js file, you configure the design system directly in a CSS file using @theme. This eliminates the config file for most projects, adds native CSS cascade layers, and dramatically improves build performance. This course covers Tailwind v4, which is the current version used in new projects. Most utility classes from v3 remain the same.
Does Tailwind work with React and Next.js?
Yes — Tailwind is the most popular styling solution for React and Next.js applications. Next.js includes Tailwind as a first-class option in its create-next-app setup. In React, you apply Tailwind classes via the className prop. Most React component libraries — shadcn/ui, Headless UI, Radix UI — are built to work alongside Tailwind and provide unstyled components you style with utilities.
How do I avoid HTML becoming unreadable with Tailwind?
The main concern about Tailwind is verbose HTML — a single element might have 15 class names. The solutions professionals use: extract repeated patterns into React components, use the @apply directive in CSS for truly repeated utility combinations, and use a Prettier plugin that sorts class names consistently. Once you adopt component-based architecture, Tailwind verbosity becomes much more manageable.