Tailwind replaces hand-written CSS with small utility classes. It looks busy at first; after a week you stop wanting to leave your markup to write a stylesheet.
1. The Mental Model
Each class does one thing: flex, p-4, text-lg, rounded-xl. You compose them on the element.
2. Responsive & State Variants
Prefix any utility with breakpoints or pseudo-states.
<button class="px-4 py-2 md:px-6 md:py-3 bg-blue-500 hover:bg-blue-600 focus:ring-2 rounded-lg">
Click me
</button>3. Dark Mode
Use the dark: variant. Toggle by adding the dark class on <html>.
<div class="bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-100">
Adapts to theme automatically.
</div>4. Theme Customization
Extend the design tokens — colors, spacing, fonts — in tailwind.config.js.
// tailwind.config.js
export default {
theme: {
extend: {
colors: {
primary: '#1a1a1a',
accent: '#16a34a',
},
},
},
}Summary
Tailwind keeps styles next to markup, eliminates naming, and stays consistent through tokens. For most apps, you can ship a polished UI without writing a single line of custom CSS.