Tailwind CSS
Responsive design
Mobile-first, breakpointok, responsive grid és navigáció példák.
Responsive design
Mobile-first megközelítés
A Tailwind mobile-first szemléletet alkalmaz. Ez azt jelenti:
- Az előtag nélküli class-ek minden képernyőméretetre vonatkoznak (de elsősorban a mobilra szánjuk)
- A breakpoint prefix azt mondja: "ettől a méretnél és felfelé érvényes"
<!-- Ez 100% széles, de md-nél (768px+) 50%-ra vált -->
<div class="w-full md:w-1/2">...</div>Breakpointok
| Prefix | Min-width | Tipikus eszköz |
|---|---|---|
| (nincs) | 0px | Mobiltelefon |
sm: | 640px | Nagy telefon / kis tablet |
md: | 768px | Tablet |
lg: | 1024px | Kis laptop / tablet landscape |
xl: | 1280px | Desktop |
2xl: | 1536px | Nagy desktop |
Hogyan gondolkodj responsive-ban?
A legfontosabb mentális modell: mobilról indulj, és haladj felfelé.
<!-- HELYES: mobilra tervez, majd bővíti desktopon -->
<div class="
flex flex-col gap-4
md:flex-row md:gap-8
">
<aside class="w-full md:w-64">...</aside>
<main class="flex-1">...</main>
</div>Példa: Responsive kártya rács
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<div class="bg-white rounded-xl shadow-md p-6">
<h3 class="text-lg font-semibold text-gray-900">Kártya 1</h3>
<p class="text-gray-500 text-sm mt-2">Leírás...</p>
</div>
<!-- ... további kártyák -->
</div>Ez a grid:
- Mobilon: 1 oszlop
- 640px felett: 2 oszlop
- 1024px felett: 3 oszlop
- 1280px felett: 4 oszlop
Példa: Responsive navigáció
<nav class="flex items-center justify-between p-4">
<div class="text-xl font-bold">Logo</div>
<!-- Mobilon rejtett, md-től látható -->
<ul class="hidden md:flex gap-8">
<li><a href="#" class="text-gray-600 hover:text-gray-900">Kezdőlap</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">Rólunk</a></li>
<li><a href="#" class="text-gray-600 hover:text-gray-900">Kapcsolat</a></li>
</ul>
<!-- Mobilon látható hamburger menü gomb, md-től rejtett -->
<button class="md:hidden p-2">
☰
</button>
</nav>Összefoglaló
A mobile-first gondolkodás megkönnyíti a responsive tervezést. Mindig a legkisebb képernyőről indulj. A
hidden md:flexpattern ("mobilon el van rejtve, tableten flex") az egyik leggyakrabban használt kombináció. Ne próbáld az összes breakpointot mindig megadni – csak azt add meg, ahol ténylegesen változik a design.