Utility Classes
Utility-First Approach
Tailwind ប្រើ utility classes ដើម្បីរចនា UI។ Utility-first គឺជា methodology ដែលប្រើ small, single-purpose classes ជំនួសឲ្យ custom CSS។
🎯 អ្វីទៅជា Utility-First CSS?
Utility-first approach គឺជាការ style elements ដោយ apply utility classes ជាច្រើនដោយផ្ទាល់នៅ HTML:
| Approach | Traditional CSS | Utility-First (Tailwind) |
|---|---|---|
| Method | Write custom classes in CSS file | Combine utility classes in HTML |
| Example | .btn-primary { background: blue; } |
class="bg-blue-500 px-4 py-2" |
| CSS File | Grows continuously (bloat) | Fixed size (only what you use) |
| Naming | Need to invent class names | Pre-defined, consistent names |
| Changes | Edit CSS file | Edit HTML classes directly |
📚 Utility Class Categories
Tailwind utilities grouped by purpose:
| Category | Purpose | Example Classes |
|---|---|---|
| Layout | Structure & positioning | container, flex, grid, block, inline |
| Spacing | Margin & padding | m-4, p-6, mx-auto, py-8, gap-4 |
| Sizing | Width & height | w-full, h-screen, max-w-4xl, min-h-0 |
| Typography | Text styling | text-xl, font-bold, text-center, uppercase |
| Colors | Background & text colors | bg-blue-500, text-white, border-gray-300 |
| Borders | Border properties | border-2, border-blue-500, rounded-lg |
| Effects | Shadows & opacity | shadow-lg, opacity-50, blur-sm |
| Filters | Visual filters | grayscale, brightness-150, contrast-125 |
| Tables | Table layouts | table, table-auto, table-fixed |
| Transitions | Animations | transition, duration-300, ease-in-out |
| Transforms | Scale, rotate, translate | scale-110, rotate-45, -translate-y-1 |
| Interactivity | User interaction | cursor-pointer, select-none, pointer-events-none |
✅ Benefits of Utility-First
| Benefit | Description | Example |
|---|---|---|
| 🚀 Fast Development | No need to write CSS, immediate styling | Build UI in minutes, not hours |
| 📦 Small CSS File | Only includes used classes (PurgeCSS) | Production CSS: ~10KB gzipped |
| 🎨 Consistent Design | Pre-defined scale for spacing, colors | No random margin values |
| 🔄 Easy Changes | Modify styling in HTML directly | Change color: edit one class |
| ♻️ Reusable | Same classes everywhere | bg-blue-500 always same blue |
| 📱 Responsive Built-in | Easy responsive prefixes | md:flex lg:grid |
| 🎯 No Naming | No need to invent class names | No more "header-nav-menu-item-active" |
| 🧹 No Dead CSS | Remove HTML = remove styles | CSS doesn't grow forever |
⚠️ Potential Drawbacks
| Drawback | Issue | Solution |
|---|---|---|
| Long Class Lists | HTML can look cluttered | Use @apply for repeated patterns or components |
| Learning Curve | Need to memorize class names | Use IDE autocomplete, official docs |
| HTML Bloat | Many classes in markup | Extract to components (React, Vue) |
| Looks Different | Not traditional CSS approach | Try it for a week - you'll love it! |
🎨 Common Utility Patterns
| Pattern | Utility Classes | Result |
|---|---|---|
| Card | bg-white rounded-lg shadow-lg p-6 |
White card with shadow & padding |
| Button | bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded |
Blue button with hover effect |
| Center Content | flex items-center justify-center |
Perfect center (both axes) |
| Container | max-w-7xl mx-auto px-4 |
Centered responsive container |
| Badge | bg-red-500 text-white text-xs px-2 py-1 rounded-full |
Small red pill badge |
| Input | border-2 border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 |
Styled form input with focus |
🔧 Utility Modifiers
| Modifier Type | Syntax | Example |
|---|---|---|
| Hover | hover:{utility} |
hover:bg-blue-700 |
| Focus | focus:{utility} |
focus:ring-2 |
| Active | active:{utility} |
active:bg-blue-900 |
| Responsive | md:{utility} |
md:flex lg:grid |
| Dark Mode | dark:{utility} |
dark:bg-gray-800 |
| Group Hover | group-hover:{utility} |
group-hover:scale-110 |
| First/Last Child | first:{utility} |
first:rounded-t-lg |
✅ Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use spacing scale (p-4, p-6) for consistency | Use arbitrary values for common spacing |
| Extract repeated patterns to components | Copy-paste same long class lists everywhere |
| Use Tailwind's color palette | Use arbitrary colors everywhere |
| Learn common patterns (card, button) | Reinvent styling for every element |
| Use IDE autocomplete & Tailwind Intellisense | Memorize all class names manually |
| Configure PurgeCSS for production | Ship entire Tailwind CSS (~3MB) |
| Start with utilities, extract when needed | Prematurely create custom CSS classes |
Common Utilities
Utilities ចម្បងៗដែលប្រើញឹកញាប់: display, position, sizing, overflow និងផ្សេងៗទៀត។
ផ្គុំ Utilities
ឧទាហរណ៍ការ combine utilities ជាច្រើនដើម្បីបង្កើត components: buttons, cards, alerts, badges, forms។