Tailwind CSS Tips and Tricks to Boost Productivity
•6 min read•Cong Dinh
Tailwind CSS Tips and Tricks to Boost Productivity
Tailwind CSS has become one of the most popular CSS frameworks today. In this article, I'll share tips and tricks to help you work with Tailwind more effectively.
Tip 1: Use @apply for Repeated Patterns
When you find yourself repeating the same set of utilities many times, extract them into a custom class.
❌ Before
// Repeated utilities everywhere
<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
Button 1
</button>
<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
Button 2
</button>
<button className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors">
Button 3
</button>✅ After
/* styles/components.css */
@layer components {
.btn-primary {
@apply px-4 py-2 bg-blue-600 text-white rounded-lg;
@apply hover:bg-blue-700 transition-colors;
}
}<button className="btn-primary">Button 1</button>
<button className="btn-primary">Button 2</button>
<button className="btn-primary">Button 3</button>Tip 2: Custom Utilities with Plugin API
Create custom utilities for patterns you use frequently.
// tailwind.config.js
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.text-gradient': {
'background-clip': 'text',
'-webkit-background-clip': 'text',
'color': 'transparent',
},
'.scrollbar-hide': {
'-ms-overflow-style': 'none',
'scrollbar-width': 'none',
'&::-webkit-scrollbar': {
display: 'none',
},
},
});
}),
],
};Usage:
<h1 className="text-gradient bg-gradient-to-r from-blue-500 to-purple-600">
Gradient Text
</h1>
<div className="scrollbar-hide overflow-auto">
Content with hidden scrollbar
</div>Tip 3: Arbitrary Values for Edge Cases
When you need a specific value not in the Tailwind scale.
{/* Arbitrary values */}
<div className="w-[347px] h-[113px]">Custom size</div>
{/* Arbitrary properties */}
<div className="[mask-image:linear-gradient(to_bottom,black,transparent)]">
Masked content
</div>
{/* Arbitrary variants */}
<div className="[@media(min-width:800px)]:flex">
Custom breakpoint
</div>Tip 4: Group Hover and Group Focus
Create interactive UI elements more easily.
<div className="group cursor-pointer">
<img
src="/image.jpg"
className="group-hover:scale-110 transition-transform"
/>
<h3 className="group-hover:text-blue-600">Title</h3>
<p className="group-hover:opacity-100 opacity-0 transition-opacity">
Description appears on hover
</p>
</div>Advanced: Nested Groups
<div className="group/card">
<div className="group/title">
<h3 className="group-hover/card:text-blue-600 group-hover/title:underline">
Hover card or title
</h3>
</div>
</div>Tip 5: Responsive Design with Container Queries
Tailwind 4 supports container queries natively!
<div className="@container">
<div className="@sm:flex @md:grid @lg:grid-cols-3">
{/* Layout responds to container size, not viewport */}
</div>
</div>Tip 6: Dark Mode Best Practices
Strategy 1: Class-based (Recommended)
// tailwind.config.js
module.exports = {
darkMode: 'class',
};<div className="bg-white dark:bg-gray-900 text-black dark:text-white">
Content adapts to theme
</div>Strategy 2: CSS Variables
/* styles/globals.css */
:root {
--color-primary: #3b82f6;
--color-background: #ffffff;
--color-text: #000000;
}
.dark {
--color-primary: #60a5fa;
--color-background: #1f2937;
--color-text: #ffffff;
}// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: 'var(--color-primary)',
background: 'var(--color-background)',
text: 'var(--color-text)',
},
},
},
};<div className="bg-background text-text">
Seamless dark mode
</div>Tip 7: Animation and Transition Utilities
Custom Animations
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
shimmer: {
'0%': { transform: 'translateX(-100%)' },
'100%': { transform: 'translateX(100%)' },
},
},
animation: {
fadeIn: 'fadeIn 0.5s ease-out',
shimmer: 'shimmer 2s infinite',
},
},
},
};Usage:
<div className="animate-fadeIn">
Fades in smoothly
</div>
<div className="relative overflow-hidden">
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent animate-shimmer" />
Shimmer effect
</div>Tip 8: Smart Spacing with Space Utilities
{/* Traditional way - repetitive */}
<div>
<div className="mb-4">Item 1</div>
<div className="mb-4">Item 2</div>
<div className="mb-4">Item 3</div>
<div>Item 4</div>
</div>
{/* Better way - space utilities */}
<div className="space-y-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</div>
{/* Horizontal spacing */}
<div className="flex space-x-2">
<button>Button 1</button>
<button>Button 2</button>
<button>Button 3</button>
</div>Tip 9: Divide Utilities for Borders
Add borders between elements easily.
<div className="divide-y divide-gray-200">
<div className="py-4">Section 1</div>
<div className="py-4">Section 2</div>
<div className="py-4">Section 3</div>
</div>
{/* Horizontal dividers */}
<div className="flex divide-x divide-gray-200">
<div className="px-4">Column 1</div>
<div className="px-4">Column 2</div>
<div className="px-4">Column 3</div>
</div>Tip 10: Peer Utilities for Sibling State
Style elements based on sibling state.
<div>
<input
type="checkbox"
id="terms"
className="peer"
/>
<label
htmlFor="terms"
className="peer-checked:text-blue-600 peer-checked:font-semibold"
>
I agree to terms
</label>
</div>
{/* Form validation */}
<div>
<input
type="email"
className="peer invalid:border-red-500"
required
/>
<p className="hidden peer-invalid:block text-red-500">
Please enter a valid email
</p>
</div>Tip 11: Gradient Text and Backgrounds
{/* Gradient text */}
<h1 className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
Beautiful Gradient Text
</h1>
{/* Gradient backgrounds with hover */}
<button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700">
Gradient Button
</button>
{/* Animated gradient */}
<div className="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-[length:200%_200%] animate-[gradient_3s_ease_infinite]">
Animated gradient background
</div>Tip 12: Aspect Ratio Utilities
Maintain aspect ratios easily.
{/* 16:9 aspect ratio */}
<div className="aspect-video">
<iframe src="..." className="w-full h-full" />
</div>
{/* Square */}
<div className="aspect-square">
<img src="..." className="object-cover w-full h-full" />
</div>
{/* Custom aspect ratio */}
<div className="aspect-[4/3]">
Content
</div>Tip 13: Print Styles
Style for print media.
<div className="bg-gray-100 print:bg-white">
<h1 className="text-blue-600 print:text-black">
Title
</h1>
<button className="print:hidden">
Interactive button (hidden in print)
</button>
<div className="hidden print:block">
Only visible when printing
</div>
</div>Tip 14: Debugging with Ring Utilities
Quickly visualize layout issues.
{/* Add outline for debugging */}
<div className="ring-2 ring-red-500">
Debug this element
</div>
{/* Different colors for nesting levels */}
<div className="ring-2 ring-blue-500">
<div className="ring-2 ring-green-500">
<div className="ring-2 ring-yellow-500">
Nested elements
</div>
</div>
</div>Tip 15: Clamp Utilities for Responsive Typography
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontSize: {
'responsive-xl': 'clamp(1.5rem, 5vw, 3rem)',
'responsive-lg': 'clamp(1.25rem, 3vw, 2rem)',
},
},
},
};<h1 className="text-responsive-xl">
Scales smoothly between breakpoints
</h1>Conclusion
Tailwind CSS provides many powerful utilities that help you build UI faster and more maintainably. Key takeaways:
✅ Extract repeated patterns with @apply
✅ Custom utilities for specific needs
✅ Leverage arbitrary values for edge cases
✅ Use group/peer utilities for interactive elements
✅ Master spacing utilities (space-, divide-)
✅ Implement dark mode properly with CSS variables
✅ Create custom animations in config
✅ Use aspect ratio utilities for media
Resources
Happy styling! 🎨
Cong Dinh
Technology Consultant | Trainer | Solution Architect
With over 10 years of experience in web development and cloud architecture, I help businesses build modern and sustainable technology solutions. Expertise: Next.js, TypeScript, AWS, and Solution Architecture.
Related Posts
typescriptreactbest-practices
TypeScript Best Practices for React Developers
A comprehensive guide on best practices when using TypeScript in React projects, including typing patterns, generic types, and advanced techniques
6 min read
nextjsperformanceoptimization
Optimizing Next.js Performance: Comprehensive Guide 2025
Learn how to optimize your Next.js application to achieve Lighthouse score >95 with image optimization, code splitting, font optimization and Core Web Vitals monitoring.
11 min read
typescriptjavascriptbest-practices
TypeScript Best Practices 2025: Writing Clean and Safe Code
Explore modern TypeScript patterns, utility types, and best practices to write type-safe and maintainable code that helps teams develop more effectively.
10 min read