What is Tailwind CSS?
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes you compose directly in your HTML to build any design without writing custom CSS.
TL;DR
- 1.Instead of writing CSS in separate files, you apply small utility classes directly in your HTML:
flex items-center gap-4 p-6 bg-white rounded-lg. - 2.Each class does one thing:
p-4= padding: 1rem,text-red-500= color: #ef4444. - 3.Responsive and interactive states are built-in:
md:flex,hover:bg-blue-600,dark:bg-gray-900. - 4.The JIT compiler only outputs the classes you use, producing tiny CSS bundles (5-15 KB gzipped).
Simple Explanation
Traditional CSS is like ordering a custom suit. You describe every detail in a separate document (the .css file): "the jacket should be navy, the buttons gold, the fit slim." If you want a different outfit, you write a whole new description.
Tailwind is like having a massive wardrobe of perfectly organized single pieces: a navy jacket, a white shirt, slim pants, gold buttons. You pick what you need and combine them directly on the mannequin (your HTML). No separate description needed -- the outfit is assembled right where you see it.
The result is the same: a styled page. But Tailwind's approach is faster for iteration, impossible to have "dead CSS," and scales well in component-based frameworks like React, Vue, and Svelte.
Traditional CSS vs. Tailwind
Traditional CSS
<!-- HTML -->
<div class="card">
<h2 class="card-title">Hello</h2>
<p class="card-text">World</p>
</div>
/* CSS (separate file) */
.card {
display: flex;
flex-direction: column;
padding: 1.5rem;
background: white;
border-radius: 0.5rem;
box-shadow: 0 1px 3px
rgba(0,0,0,0.1);
}
.card-title {
font-size: 1.25rem;
font-weight: 700;
}
.card-text { color: #6b7280; }Tailwind CSS
<!-- HTML (no separate CSS file) -->
<div class="flex flex-col p-6
bg-white rounded-lg shadow">
<h2 class="text-xl font-bold">
Hello
</h2>
<p class="text-gray-500">
World
</p>
</div>
<!-- Same result, zero CSS to write.
Responsive: add md: prefix.
Hover: add hover: prefix.
Dark mode: add dark: prefix. -->Key Concepts
Utility Classes
Each class applies a single CSS property. Compose them to build any design.
p-4 = padding: 1remResponsive Design
Prefix any class with a breakpoint to apply it at that screen size and above.
md:flex lg:grid-cols-3State Variants
Prefix classes with pseudo-class names for interactive styles.
hover:bg-blue-600 focus:ring-2Dark Mode
Prefix any class with dark: to apply it in dark mode.
dark:bg-gray-900 dark:text-whiteDesign Tokens
Tailwind provides a constrained set of values (spacing scale, color palette, font sizes) for design consistency.
text-sm (14px), p-4 (16px), gap-6 (24px)JIT Compilation
Only generates CSS for classes you actually use. Supports arbitrary values like w-[137px].
Produces 5-15 KB gzippedCommon Mistakes
Don't
/* Mixing Tailwind with custom CSS for the same properties */ <div class="p-4" style="padding: 20px"> <!-- Conflicting! --> </div>
Do
<!-- Pick one approach per property.
Use arbitrary values for
non-standard sizes. -->
<div class="p-[20px]">
<!-- Clean and consistent -->
</div>Don't
<!-- Using Tailwind without
understanding CSS fundamentals.
If "flex" makes no sense to you,
learn CSS Flexbox first. -->Do
<!-- Learn what each utility does.
"flex" = display: flex
"items-center" = align-items: center
Understanding CSS makes Tailwind
click instantly. -->
Get Tailwind classes from any element
Frontend Hero's Tailwind Scanner shows the Tailwind classes of any element on any website. Tailwind Converter turns any CSS into Tailwind utilities with one click.
Try Tailwind Scanner →Browser Support
Tailwind generates standard CSS, so browser support depends on the CSS features you use. The core utilities work in all modern browsers. Tailwind v4 targets browsers supporting CSS nesting and @layer (Chrome 120+, Firefox 117+, Safari 17.2+). For older browser support, use Tailwind v3.
Related Tools
Frequently Asked Questions
No. While Tailwind classes are applied directly in HTML (like inline styles), they offer things inline styles cannot: responsive breakpoints (md:, lg:), pseudo-class states (hover:, focus:), media queries (dark:), and a design-system-constrained set of values. Tailwind also generates a single optimized CSS file -- inline styles produce duplicated CSS and can't use pseudo-classes at all.
It looks different, not ugly. Traditional CSS gives you clean HTML and longer CSS files. Tailwind gives you longer HTML classes but eliminates most CSS files. The tradeoff is co-location: your styles live right next to your markup, making it easy to see what an element does at a glance. In component-based frameworks (React, Vue, Svelte), this feels very natural since each component is self-contained.
Tailwind uses a JIT (Just-In-Time) compiler that scans your code and only generates classes you actually use. A typical production build is 5-15 KB gzipped -- smaller than most hand-written CSS files. Unused utilities are never included in the output.
Yes. Tailwind is a shorthand for CSS -- every Tailwind class maps to one or more CSS properties. If you don't understand what display: flex does, the class 'flex' won't make sense either. Learn CSS fundamentals first (box model, flexbox, grid, positioning), then Tailwind becomes a productivity multiplier.
Tailwind v4 (released 2025) replaced the JavaScript-based config (tailwind.config.js) with a CSS-first configuration using @theme. It uses a new Oxide engine for faster builds, supports CSS-native @import, and generates tighter output. Most utility class names stayed the same.
CSS Glossary
What is Flexbox?
One-dimensional layout model
What is CSS Grid?
Two-dimensional layout system
What is Z-Index?
Stacking order and contexts
What is Box-Sizing?
Control element sizing model
What is CSS Specificity?
How browsers resolve conflicts
What is the CSS Cascade?
Rule priority and inheritance
What is Box Shadow?
Add depth with shadow effects
What is a CSS Reset?
Normalize browser defaults
What is Responsive Design?
Adapt layouts to any screen