Responsive Design ក្នុង Tailwind CSS
Responsive Design គឺជាវិធីសាស្រ្តបង្កើតគេហទំព័រដែលមើលឃើញល្អលើគ្រប់ទំហំអេក្រង់ - ពី mobile phones រហូតដល់ desktop monitors។ Tailwind ធ្វើឲ្យការបង្កើត responsive design ងាយស្រួលណាស់!
🎯 Mobile-First Approach
Tailwind ប្រើ mobile-first approach មានន័យថា:
- ✅ Default styles = Mobile (no prefix)
- ✅ Breakpoint prefixes = Larger screens (sm:, md:, lg:, xl:, 2xl:)
- ✅ Styles cascade up (mobile → tablet → desktop)
ឧទាហរណ៍:
<div class="text-sm md:text-lg lg:text-2xl">
Mobile: text-sm (14px)
Tablet (768px+): text-lg (18px)
Desktop (1024px+): text-2xl (24px)
</div>
📱 Tailwind Breakpoints - លម្អិត
| Breakpoint |
Min Width |
CSS Media Query |
Device Type |
Typical Resolution |
(none) |
0px |
- |
📱 Mobile (Portrait) |
320px - 639px |
sm: |
640px |
@media (min-width: 640px) |
📱 Mobile (Landscape), Small Tablets |
640px - 767px |
md: |
768px |
@media (min-width: 768px) |
📱 Tablets (Portrait) |
768px - 1023px |
lg: |
1024px |
@media (min-width: 1024px) |
💻 Tablets (Landscape), Small Laptops |
1024px - 1279px |
xl: |
1280px |
@media (min-width: 1280px) |
🖥️ Desktops, Laptops |
1280px - 1535px |
2xl: |
1536px |
@media (min-width: 1536px) |
🖥️ Large Desktops, 4K Screens |
1536px+ |
🔄 How Breakpoints Work
Breakpoints cascade upward មានន័យថា:
- 🔵
text-sm - Applies to ALL screen sizes (0px+)
- 🟢
md:text-lg - Applies from 768px and UP
- 🟣
lg:text-2xl - Applies from 1024px and UP
ឧទាហរណ៍ Cascading:
<div class="w-full sm:w-1/2 lg:w-1/3">
0-639px: width: 100% (full width)
640-1023px: width: 50% (half width)
1024px+: width: 33.33% (one third)
</div>
📐 Common Responsive Patterns
1️⃣ Responsive Grid Columns
| Classes |
Mobile |
Tablet |
Desktop |
grid-cols-1 md:grid-cols-2 lg:grid-cols-4 |
1 column |
2 columns |
4 columns |
grid-cols-1 lg:grid-cols-3 |
1 column |
1 column |
3 columns |
grid-cols-2 md:grid-cols-3 xl:grid-cols-6 |
2 columns |
3 columns |
6 columns |
2️⃣ Responsive Text Sizes
| Classes |
Mobile |
Tablet |
Desktop |
text-2xl md:text-4xl lg:text-6xl |
24px |
36px |
60px |
text-base md:text-lg xl:text-xl |
16px |
18px |
20px |
3️⃣ Responsive Spacing
| Classes |
Mobile |
Desktop |
p-4 md:p-8 lg:p-12 |
16px |
32px → 48px |
gap-4 md:gap-6 lg:gap-8 |
16px |
24px → 32px |
4️⃣ Show/Hide Elements
| Classes |
Effect |
hidden md:block |
Hide on mobile, show on tablet+ |
block md:hidden |
Show on mobile, hide on tablet+ |
md:hidden lg:block |
Hide only on tablet |
5️⃣ Responsive Flexbox Direction
| Classes |
Mobile |
Desktop |
flex-col md:flex-row |
Stacked vertically |
Horizontal row |
flex-col-reverse md:flex-row |
Reverse stacked |
Normal row |
🎨 Responsive Design Best Practices
| Practice |
Why? |
Example |
| Mobile-first thinking |
Most traffic is mobile |
Start with text-sm then lg:text-lg |
| Use fewer breakpoints |
Simpler, more maintainable |
md:text-lg instead of sm:text-base md:text-lg |
| Test on real devices |
Emulators aren't perfect |
Use Chrome DevTools + actual phone |
| Touch targets 44px+ |
Accessibility (fingers are big!) |
p-3 for buttons (12px × 2 + content) |
| Readable line length |
45-75 characters optimal |
max-w-prose for text content |
| Container padding |
Content shouldn't touch edges |
px-4 md:px-8 on containers |
📊 Common Screen Sizes Reference
| Device |
Width |
Breakpoint |
Orientation |
| iPhone SE |
375px |
(default) |
Portrait |
| iPhone 12/13/14 |
390px |
(default) |
Portrait |
| iPhone 12 Pro Max |
428px |
(default) |
Portrait |
| iPad Mini |
768px |
md: |
Portrait |
| iPad Air |
820px |
md: |
Portrait |
| iPad Pro 11" |
1024px |
lg: |
Landscape |
| MacBook Air 13" |
1280px |
xl: |
- |
| Desktop 1080p |
1920px |
2xl: |
- |
| Desktop 4K |
3840px |
2xl: |
- |
Responsive Examples - ឧទាហរណ៍ជាក់ស្តែង
🎯 Real-World Responsive Patterns
Pattern 1: Responsive Navigation
<!-- Mobile: Hamburger, Desktop: Full menu -->
<nav>
<button class="md:hidden">☰ Menu</button>
<ul class="hidden md:flex gap-6">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
Pattern 2: Responsive Card Grid
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- Mobile: 1 col, Small: 2 cols, Large: 3 cols, XL: 4 cols -->
</div>
Pattern 3: Responsive Hero Section
<section class="py-12 md:py-20 lg:py-32">
<h1 class="text-3xl md:text-5xl lg:text-7xl font-bold">
Hero Title
</h1>
<p class="text-base md:text-lg lg:text-xl mt-4">
Description text
</p>
</section>
Pattern 4: Responsive Sidebar Layout
<div class="flex flex-col lg:flex-row gap-6">
<aside class="w-full lg:w-64">Sidebar</aside>
<main class="flex-1">Main Content</main>
</div>
Pattern 5: Responsive Image
<img
class="w-full md:w-2/3 lg:w-1/2 xl:w-1/3"
src="image.jpg"
alt="Responsive image"
/>
⚠️ Common Mistakes
| ❌ Wrong |
✅ Correct |
ហេតុផល |
lg:text-sm md:text-lg |
text-sm md:text-lg |
Mobile-first approach, no need for lg: if smaller |
| Too many breakpoints |
Use 2-3 breakpoints max |
Simpler, easier to maintain |
w-[350px] hardcoded |
w-full md:w-1/2 |
Responsive, not fixed width |
| Same padding all screens |
p-4 md:p-8 lg:p-12 |
More space on larger screens |
| Tiny text on mobile |
text-base minimum |
Readability on small screens |
💡 Advanced Responsive Techniques
Container Queries (Tailwind v3.2+)
<div class="@container">
<div class="@lg:text-xl">
Responsive to parent, not viewport!
</div>
</div>
Responsive Hover Effects
<!-- Hover only on non-touch devices -->
<button class="hover:bg-blue-600 md:hover:scale-105">
Button
</button>
Print Styles
<div class="text-blue-500 print:text-black">
Blue on screen, black when printed
</div>
