Learn the fundamentals of Tailwind CSS, from installation to utility classes, responsive design, and best practices for building modern web interfaces with this utility-first CSS framework.
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your markup. Unlike traditional CSS frameworks, Tailwind doesn't provide pre-designed components but instead gives you the building blocks to create your own unique designs.
npm install tailwindcss
npx tailwindcss init
For quick prototyping, you can include Tailwind via CDN:
<script src="https://cdn.tailwindcss.com"></script>
Tailwind provides thousands of utility classes that map to CSS properties. For example:
- `text-center` for `text-align: center`
- `bg-blue-500` for a blue background
- `p-4` for padding
Tailwind uses a mobile-first approach with responsive prefixes:
<div class="text-sm md:text-base lg:text-lg">
Responsive text
</div>
Tailwind includes a comprehensive color palette with numeric scales:
- `bg-gray-100` (lightest)
- `bg-gray-500` (medium)
- `bg-gray-900` (darkest)
When you find yourself repeating utility combinations, extract them into components:
@layer components {
.btn-primary {
@apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}
}
Tailwind is highly customizable through the `tailwind.config.js` file:
module.exports = {
theme: {
extend: {
colors: {
'brand-blue': '#1fb6ff',
}
}
}
}
Tailwind CSS offers a different approach to styling that can significantly speed up development once you get used to it. The utility-first methodology encourages consistent design systems and makes it easy to build responsive, maintainable interfaces.