Tailwind CSS
Utility classes that keep styling in the markup and the CSS bundle small.
What it is
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs without leaving your HTML. It emphasizes rapid development, responsive design, and maintainable styles.
Tailwind provides a set of utility classes for styling elements directly in HTML. Utilities cover layout, spacing, typography, colors, flexbox, grid, shadows, and more. It supports responsive design, variants, and custom theming.
- Licence
- MIT
- Watch for
- Long class strings are the trade-off; extract components rather than @apply everywhere
When to use it
The question documentation cannot answer for you — because it cannot recommend something else.
Reach for it when
- You want a consistent design system without inventing class names for everything
- Component-based frameworks, where markup and styles live together anyway
- Rapid iteration — changing a design without switching files is genuinely faster
Look elsewhere when
- The team strongly prefers separation of concerns and semantic class names
- Content-heavy sites with little component reuse, where plain CSS is simpler
Installation
npm install tailwindcss postcss autoprefixerGetting started
The smallest useful thing you can do with it, and what each part means.
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Click Me</button><p class="text-sm md:text-lg lg:text-xl">Responsive Text</p>Advanced usage
Where the library earns its place over a simpler alternative.
<div class="flex justify-between items-center">
<div>Item 1</div>
<div>Item 2</div>
</div><div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: { customBlue: '#1E40AF' }
}
}
}<input class="border border-gray-300 focus:border-blue-500 focus:ring focus:ring-blue-200 rounded px-2 py-1" />Errors and fixes
The failures you are most likely to hit, and what actually resolves them.
- Styles not applied
- Ensure Tailwind CSS is imported correctly and PostCSS is configured if using build tools.
- Hover/focus variants not working
- Check that variants are enabled in tailwind.config.js and classes are applied correctly.
- Responsive classes not applied
- Ensure the responsive breakpoints are configured correctly and match HTML structure.
Best practices
- Use Tailwind’s utility classes instead of writing custom CSS for consistency.
- Leverage responsive variants for mobile-first design.
- Use Tailwind configuration to define custom themes and colors.
- Combine utilities into reusable components with @apply in CSS if needed.
- Use PurgeCSS or the built-in content option to remove unused styles for smaller bundles.
Alternatives
Comparable options, and the reason you would pick one over the other.
DaisyUI
Pre-built component classes on top of Tailwind, for less markup
CSS Modules
Scoped conventional CSS when you want to write real stylesheets
Background
Why it exists, and what it was reacting to.
Tailwind CSS was created by Adam Wathan and released in 2017. It was designed to avoid opinionated component styles and encourage developers to compose custom designs using utility classes. Its approach promotes consistency, reduces CSS bloat, and enables highly responsive, adaptive layouts.