•4 min read•By Your Name
Tailwind CSS Tips & Tricks
Tailwind CSS is a utility-first CSS framework that helps you build beautiful designs without leaving your HTML.
Tip 1: Use @apply for Reusable Styles
Instead of repeating utility classes, create reusable components with `@apply`:
```css
@layer components {
.btn-primary {
@apply px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition;
}
}
```
Tip 2: Customize Your Theme
Extend Tailwind's default theme in `tailwind.config.js`:
```javascript
module.exports = {
theme: {
extend: {
colors: {
brand: '#0066cc',
},
},
},
}
```
Tip 3: Use Responsive Prefixes
Tailwind makes responsive design easy with breakpoint prefixes:
```html
<div class="text-sm md:text-base lg:text-lg">
This text scales with screen size
</div>
```
Conclusion
Master these tips to become a Tailwind CSS pro!