A utility-first CSS framework for rapidly building custom user interfaces.
Tailwind CSS is a utility-first CSS framework designed for rapidly building custom, modern user interfaces directly in your HTML markup.
Instead of writing CSS like this:
/* Your CSS file */
.my-button {
background-color: #3b82f6;
color: white;
padding: 8px 16px;
border-radius: 8px;
font-weight: bold;
}You write Tailwind like this:
<button class="bg-blue-500 text-white py-2 px-4 rounded-lg font-bold">
Click Me
</button>
Stop inventing class names like
.wrapper-inner-container-2. Apply styles directly
without writing custom CSS.
Use breakpoint prefixes (sm:, md:,
lg:) to apply styles at specific screen widths.
Tailwind CLI purges unused classes at build time, producing a final CSS file that can be just a few kilobytes.
Design tokens (colors, spacing, fonts) are configured in a single file, making it easy to maintain a consistent design system.
| Feature | Bootstrap | Tailwind CSS |
|---|---|---|
| Approach | Component-based | Utility-first |
| Pre-built components? | Yes (.btn, .card, .navbar) | No — you build from scratch |
| Design uniqueness | Looks like Bootstrap | Fully custom |
| CSS file size | ~30KB (minified) | ~5KB (with purging) |
| Learning curve | Low (use component classes) | Medium (memorize utilities) |
Each Tailwind class does exactly one thing. You combine them directly in HTML to build any design you can imagine:
class="bg-white rounded-xl shadow-lg p-6 max-w-sm"
This card is built with 4 utility classes applied to a single div.