Tailwind CSS Tips và Tricks để Tăng Productivity
•6 phút đọc•Cong Dinh
Tailwind CSS Tips và Tricks để Tăng Productivity
Tailwind CSS đã trở thành một trong những CSS frameworks phổ biến nhất hiện nay. Trong bài viết này, tôi sẽ chia sẻ các tips và tricks giúp bạn làm việc với Tailwind hiệu quả hơn.
Tip 1: Sử dụng @apply cho Repeated Patterns
Khi bạn thấy mình repeat cùng một set of utilities nhiều lần, hãy extract chúng ra thành 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 với Plugin API
Tạo custom utilities cho những patterns bạn hay dùng.
// 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 cho Edge Cases
Khi bạn cần một value cụ thể không có trong 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 và Group Focus
Tạo interactive UI elements dễ dàng hơn.
<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 với Container Queries
Tailwind 4 hỗ trợ 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 và 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 với 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 cho Borders
Thêm borders giữa elements dễ dàng.
<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 cho 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 và 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 dễ dàng.
{/* 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 cho 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 với 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 cho 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>Kết luận
Tailwind CSS cung cấp rất nhiều utilities mạnh mẽ giúp bạn build UI nhanh hơn và maintainable hơn. Key takeaways:
✅ Extract repeated patterns với @apply
✅ Custom utilities cho specific needs
✅ Leverage arbitrary values cho edge cases
✅ Use group/peer utilities cho interactive elements
✅ Master spacing utilities (space-, divide-)
✅ Implement dark mode properly với CSS variables
✅ Create custom animations trong config
✅ Use aspect ratio utilities cho media
Resources
Happy styling! 🎨
Cong Dinh
Technology Consultant | Trainer | Solution Architect
Với hơn 10 năm kinh nghiệm trong phát triển web và cloud architecture, tôi giúp doanh nghiệp xây dựng giải pháp công nghệ hiện đại và bền vững. Chuyên môn: Next.js, TypeScript, AWS, và Solution Architecture.
Bài viết liên quan
typescriptreactbest-practices
TypeScript Best Practices cho React Developers
Hướng dẫn chi tiết về các best practices khi sử dụng TypeScript trong React projects, bao gồm typing patterns, generic types và advanced techniques
6 phút đọc
nextjsperformanceoptimization
Tối ưu Performance Next.js: Hướng dẫn Toàn diện 2025
Học cách tối ưu ứng dụng Next.js để đạt Lighthouse score >95 với image optimization, code splitting, font optimization và Core Web Vitals monitoring.
11 phút đọc
typescriptjavascriptbest-practices
TypeScript Best Practices 2025: Viết Code Sạch và An toàn
Khám phá các pattern TypeScript hiện đại, utility types, và best practices để viết code type-safe và maintainable, giúp team phát triển hiệu quả hơn.
10 phút đọc