- Drop a single
<link>tag into your HTML head. - Perfect for CodePen demos or rapid experiments.
- No build step required—class changes apply immediately.
Interactive Tutorial
How to Use Tailwind CSS
Build responsive, expressive interfaces faster than ever. Follow along with live previews, editable examples, and guided explanations tailored for beginners.
Live preview
Tailwind in action
Hero button classes
bg-sky-600 hover:-translate-y-1 hover:bg-sky-500 transition-transform duration-300 focus:outline-none focus:ring-4 focus:ring-sky-300/40Lesson 1
Installing Tailwind CSS
Tailwind can be added instantly via a CDN for prototypes or wired into your build with Node.js for production apps. Toggle the setup steps, then inspect the live preview to see what changes.
Live UI
Linked via CDN
What changed?
The classes are available immediately. Try editing text in the HTML editor—your changes show up without rebuilding.
drop-in-readyno build step
Lesson 2
Utility Classes = Lego Bricks for Your UI
Tailwind ships thousands of single-purpose classes. Mix them together to control color, spacing, and typography without leaving your markup.
Utility magic ✨
These classes stack to control color, spacing, and type—pick the combo that fits your brand.
Lesson 3
Flexbox vs. Grid Layouts
Flip between layout modes and tune their alignment. Tailwind abstracts the CSS properties into intuitive utilities.
A
B
C
Utilities applied: flex flex-wrap justify-center gap-4 sm:gap-6
Lesson 4
Hover, Focus & Motion States
Tailwind encodes pseudo-classes and transitions right into the class name. Mix and match them to craft delightful states without custom CSS.
Classes applied: group inline-flex items-center gap-2 rounded-full bg-sky-600 px-6 py-3 text-sm font-semibold text-white transition duration-300 hover:-translate-y-1 hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-sky-400/50 active:scale-95
Lesson 5
Responsive Design with Breakpoints
Tailwind prefixes utilities with breakpoint shortcuts—add sm:, md:, lg:, and beyond to progressively enhance your layout.
Stacked cards
Buttons full width
Typography 16px
Active classes: grid gap-4 rounded-3xl bg-white/90 p-5 shadow-lg sm:p-6 lg:grid-cols-1 dark:bg-slate-800/90
Lesson 6
Editable Class Playground
Type Tailwind classes to instantly preview the UI. Experiment safely by mixing utilities, breakpoints, and state variants.
Tailwind Playground
Try editing the class string on the left to change this card in real time.
Applied classes: bg-gradient-to-br from-sky-500 to-indigo-500 text-white px-8 py-6 rounded-3xl shadow-2xl
Lesson 7
Configuring Tailwind CSS
Tailwind CSS comes with a configuration file, tailwind.config.js, where you can customize various aspects of your project's styles.
Custom Configuration
The config file lets you extend Tailwind's defaults, add custom colors, spacing scales, and more. You can also configure which variants are enabled for each utility.
Custom Color
Custom Color
Lesson 8
Creating Your First Tailwind CSS Project
Let's create a simple HTML file and apply Tailwind CSS classes to style it.
Welcome to Tailwind CSS
A utility-first CSS framework.
Get started with Tailwind CSS and create amazing web interfaces.
Lesson 9
Exploring Tailwind CSS Classes
Tailwind CSS provides an extensive set of utility classes to style HTML elements. These classes cover typography, colors, spacing, positioning, and more.
Extra Small (text-xs)
Small (text-sm)
Base (text-base)
Large (text-lg)
Extra Large (text-xl)
Font Thin
Font Semi-bold
Font Bold