Borders & Shadows
Border Width
Tailwind មាន border width utilities សម្រាប់បន្ថែម borders ទៅ elements។ Border width scale គឺចាប់ពី 0px ដល់ 8px។
🎯 Border Width Scale
| Class | CSS Property | Border Width | Use Case |
|---|---|---|---|
border-0 |
border-width: 0px; |
No border | Remove border |
border |
border-width: 1px; |
1px (default) | Standard border |
border-2 |
border-width: 2px; |
2px | Medium border |
border-4 |
border-width: 4px; |
4px | Thick border |
border-8 |
border-width: 8px; |
8px | Very thick border |
📍 Directional Borders
Apply borders to specific sides:
| Direction | Classes Available | Example | CSS Equivalent |
|---|---|---|---|
| Top | border-t, border-t-2, border-t-4, border-t-8 |
border-t-4 |
border-top-width: 4px; |
| Bottom | border-b, border-b-2, border-b-4, border-b-8 |
border-b-2 |
border-bottom-width: 2px; |
| Left | border-l, border-l-2, border-l-4, border-l-8 |
border-l-4 |
border-left-width: 4px; |
| Right | border-r, border-r-2, border-r-4, border-r-8 |
border-r-2 |
border-right-width: 2px; |
| X-axis (Left & Right) | border-x, border-x-2, border-x-4, border-x-8 |
border-x-2 |
border-left/right-width: 2px; |
| Y-axis (Top & Bottom) | border-y, border-y-2, border-y-4, border-y-8 |
border-y-4 |
border-top/bottom-width: 4px; |
🎨 Border Colors
Combine border width with Tailwind's color palette:
| Color Example | Class | Common Use |
|---|---|---|
border-gray-300 |
Light gray border | Input fields, dividers |
border-blue-500 |
Blue border | Focus states, primary elements |
border-red-500 |
Red border | Error states, warnings |
border-green-500 |
Green border | Success states |
border-transparent |
Invisible border | Maintain spacing without visible border |
✏️ Border Styles
| Class | CSS Value | Visual Appearance | Use Case |
|---|---|---|---|
border-solid |
border-style: solid; |
━━━━━━━ | Default, standard borders |
border-dashed |
border-style: dashed; |
╌╌╌╌╌╌╌ | Upload areas, placeholders |
border-dotted |
border-style: dotted; |
· · · · · · · | Subtle separators |
border-double |
border-style: double; |
═════════ | Formal documents, emphasis |
border-none |
border-style: none; |
No border | Remove default borders |
🔄 Border Radius
Round corners with border radius utilities:
| Class | Radius Value | CSS Property | Common Use |
|---|---|---|---|
rounded-none |
0px | border-radius: 0; |
Square corners |
rounded-sm |
0.125rem (2px) | border-radius: 0.125rem; |
Very subtle rounding |
rounded |
0.25rem (4px) | border-radius: 0.25rem; |
Default, buttons |
rounded-md |
0.375rem (6px) | border-radius: 0.375rem; |
Cards, inputs |
rounded-lg |
0.5rem (8px) | border-radius: 0.5rem; |
Large cards, modals |
rounded-xl |
0.75rem (12px) | border-radius: 0.75rem; |
Hero sections |
rounded-2xl |
1rem (16px) | border-radius: 1rem; |
Large elements |
rounded-3xl |
1.5rem (24px) | border-radius: 1.5rem; |
Very rounded elements |
rounded-full |
9999px | border-radius: 9999px; |
Pills, avatars, badges |
📍 Directional Border Radius
| Direction | Classes | Corners Affected | Use Case |
|---|---|---|---|
| Top | rounded-t-lg |
Top-left & Top-right | Card headers |
| Bottom | rounded-b-lg |
Bottom-left & Bottom-right | Card footers |
| Left | rounded-l-lg |
Top-left & Bottom-left | Left side panels |
| Right | rounded-r-lg |
Top-right & Bottom-right | Right side panels |
| Top-left | rounded-tl-lg |
Top-left only | Individual corner styling |
| Top-right | rounded-tr-lg |
Top-right only | Individual corner styling |
| Bottom-left | rounded-bl-lg |
Bottom-left only | Individual corner styling |
| Bottom-right | rounded-br-lg |
Bottom-right only | Individual corner styling |
Box Shadows
Tailwind មាន shadow utilities សម្រាប់បន្ថែម depth និង elevation ទៅ elements។
💎 Shadow Scale
| Class | Shadow Size | Visual Effect | Common Use |
|---|---|---|---|
shadow-none |
No shadow | Flat | Remove shadow |
shadow-sm |
Very subtle | Barely visible | Slight elevation on hover |
shadow |
Small (default) | Subtle depth | Cards, buttons |
shadow-md |
Medium | Noticeable elevation | Raised cards, dropdowns |
shadow-lg |
Large | Clear elevation | Modals, popovers |
shadow-xl |
Extra large | Strong elevation | Floating elements |
shadow-2xl |
2x Extra large | Maximum elevation | Hero elements, dialogs |
shadow-inner |
Inner shadow | Inset effect | Pressed buttons, wells |
🎨 Shadow Colors
Customize shadow colors:
| Class Pattern | Example | Result |
|---|---|---|
shadow-{color}-{intensity} |
shadow-blue-500/50 |
Blue shadow at 50% opacity |
shadow-{color}-{intensity}/{opacity} |
shadow-red-500/25 |
Red shadow at 25% opacity |
💍 Ring Utilities (Focus States)
Ring utilities create outline-like borders (great for focus states):
| Class | Ring Width | Common Use |
|---|---|---|
ring-0 |
0px | Remove ring |
ring-1 |
1px | Subtle ring |
ring-2 |
2px | Default focus ring |
ring-4 |
4px | Prominent focus ring |
ring-8 |
8px | Very thick ring |
ring |
3px (default) | Standard ring |
🎯 Ring Modifiers
| Modifier | Purpose | Example |
|---|---|---|
ring-{color} |
Set ring color | ring-blue-500 |
ring-opacity-{value} |
Set ring opacity | ring-opacity-50 |
ring-offset-{size} |
Space between element and ring | ring-offset-2 |
ring-offset-{color} |
Color of ring offset | ring-offset-white |
ring-inset |
Ring inside element border | ring-inset ring-2 |