Tailwind CSS width: jak ustawiać szerokość elementów

Tailwind CSS udostępnia klasy `w-*`, `min-w-*` i `max-w-*`, które ustawiają odpowiednio `width`, `min-width` i `max-width`. `width` określa szerokość elementu, `min-width` wyznacza dolną granicę, a `max-width` górną granicę. Właściwości odpowiadają za różne warunki i mogą działać jednocześnie.

`w-full` ustawia `width: 100%` względem bloku zawierającego element, a `w-auto` ustawia wartość `auto`, czyli przywraca domyślne zachowanie szerokości. Dla elementu blokowego `auto` zwykle oznacza wykorzystanie dostępnej przestrzeni, a nie dopasowanie szerokości do tekstu. Klasy ułamkowe, takie jak `w-1/2`, ustawiają część szerokości rodzica, a klasy ze skali projektu, takie jak `w-64`, korzystają z wartości motywu.

Elementy flex i grid mogą mieć dodatkowe ograniczenia wynikające z reguł układu. Element flex może się kurczyć, a zawartość siatki może wpływać na minimalny wymiar kolumny. Tailwind Preflight ustawia `box-sizing: border-box`, więc padding i obramowanie mieszczą się w zadanej szerokości, o ile inny arkusz nie nadpisze tej reguły.

`w-screen` ustawia szerokość równą `100vw`, czyli szerokości viewportu CSS. W kontenerze z paddingiem element o szerokości viewportu może wystawać poza jego krawędź. Do wypełnienia kolumny zwykle lepiej pasuje `w-full`. Dostępne klasy i ich reguły opisuje dokumentacja szerokości Tailwind CSS.

`w-full` wypełnia szerokość rodzica, `w-auto` przywraca domyślne zachowanie szerokości, a `max-w-*` ustawia górny limit bez wymuszania pełnej szerokości. Zestawienie ułatwia dobór klasy do efektu, którego wymaga komponent.

Wybierz klasę według roli elementu: formularz zwykle ma wypełniać kolumnę, a przycisk może być pełnej szerokości tylko na telefonie. Wdrożenie firmowej strony WordPress z responsywnymi komponentami opisujemy w ofercie stron na WordPressie.

Wniosek praktyczny: `w-full` ustawia szerokość elementu, a `max-w-full` jedynie ogranicza jego maksymalny wymiar.

Klasa bez prefiksu działa w bazowym wariancie, a `sm:`, `md:` lub `lg:` dodaje regułę od danego breakpointu w górę. Zapis `w-full md:w-1/2` oznacza pełną szerokość w układzie bazowym i połowę szerokości rodzica od progu `md`.

Domyślne breakpointy Tailwind CSS to `sm` od 640 px, `md` od 768 px, `lg` od 1024 px, `xl` od 1280 px i `2xl` od 1536 px. Projekt może zmienić te progi, dlatego wartości trzeba odczytać z konfiguracji lub tokenów CSS używanych w danym wdrożeniu. Prefiks `sm:` oznacza "od małego breakpointu", a nie "wyłącznie na telefonie".

<form class="mx-auto w-full max-w-xl px-4">
  <input class="w-full" type="email" />
  <button class="w-full sm:w-auto" type="submit">Wyślij</button>
</form>

<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
  <main class="min-w-0">Treść główna</main>
  <aside class="w-full md:max-w-sm">Panel boczny</aside>
</div>

Testuj układ po obu stronach breakpointu, bo zmiana szerokości może ujawnić problem z długą etykietą lub treścią. Jeśli strona ma panel boczny, sprawdź również poradnik o sidebarze w WordPressie i materiał o widżetach WordPress i konfiguracji sidebaru. Dokumentacja wyjaśnia responsywne warianty Tailwind CSS.

Wartość arbitralna pozwala ustawić wymiar, którego nie ma w skali projektu. Klasa `w-[420px]` ustawia szerokość 420 px, a `w-[calc(100%_-_2rem)]` generuje `width: calc(100% - 2rem)`; podkreślenia zastępują spacje w wartości CSS.

<div class="w-[420px] max-w-full">Karta o ograniczonej szerokości</div>
<div class="w-[calc(100%_-_2rem)]">Kontener z odstępem po bokach</div>

Wartość 420 px bez ograniczenia może nie zmieścić się w wąskim układzie. Dodanie `max-w-full` ogranicza maksymalną szerokość elementu do dostępnego miejsca, ale nie zastępuje sprawdzenia pozostałych reguł układu.

Pojedyncza wartość arbitralna pasuje do wyjątku projektowego. Jeśli wymiar wraca w wielu komponentach, umieść go w skali motywu, aby zarządzać nim centralnie. Tailwind CSS 4 pozwala definiować tokeny w CSS przez `@theme`, a Tailwind CSS 3 zwykle korzysta z pliku `tailwind.config.js`. Dokumentacja opisuje własne style i wartości arbitralne.

Kontener strony łączy płynną szerokość z limitem `max-w-*` i centrowaniem przez `mx-auto`. `w-full max-w-* mx-auto` pozwala elementowi wypełnić dostępną przestrzeń do wybranego limitu, a padding zapewnia odstęp od krawędzi.

Poniższe zestawy pokazują konfiguracje dla typowych elementów strony. Wybierz wariant odpowiedni do miejsca, w którym komponent ma się pojawić.

`max-w-*` ogranicza wzrost, a `w-full` pozwala elementowi rosnąć do tej granicy. Klasa `container` może zmieniać maksymalną szerokość przy breakpointach, ale sama nie centruje elementu ani nie dodaje paddingu. Padding rodzica zmniejsza przestrzeń dostępną dla dziecka.

Najpierw ustal, czy Tailwind wygenerował regułę i czy inny styl jej nie nadpisuje. W DevTools zaznacz element, otwórz `Computed` i sprawdź `width`, `min-width`, `max-width`, `flex-shrink`, `box-sizing` oraz `overflow`; rozwinięcie właściwości pokaże arkusz i selektor odpowiedzialny za obliczoną wartość.

Tabela łączy typowe objawy z miejscem kontroli i możliwą poprawką. Zmień klasę dopiero po ustaleniu, która reguła powoduje problem.

W flex `w-full` może współdziałać z kurczeniem, gdy elementy nie mieszczą się w jednym wierszu. `shrink-0` blokuje kurczenie, ale może wypchnąć element poza ekran. W grid `min-w-0` pozwala kolumnie skurczyć się poniżej minimalnej szerokości wynikającej z treści; długi tekst może nadal wymagać reguły łamania.

Tailwind wykrywa klasy w plikach źródłowych jako pełne ciągi znaków. Zapis `w-${size}` może nie zawierać nazwy, dla której kompilator ma wygenerować CSS. Zastąp go mapą pełnych nazw, na przykład `small: "w-32"` i `wide: "w-full"`, albo skonfiguruj źródła zgodnie z wersją frameworka. Szczegóły zawiera dokumentacja wykrywania klas w plikach źródłowych.

Perspektywa KC Mobile: diagnozując szerokość komponentu, zaczynamy od reguły CSS, następnie sprawdzamy rodzica i układ flex lub grid, a na końcu viewport. Taka kolejność pozwala wskazać konkretną przyczynę zamiast dodawać kolejne klasy bez potwierdzenia.

Przed wdrożeniem sprawdź komponent na telefonie, tablecie i desktopie oraz potwierdź, że nie powoduje poziomego przewijania. Test obejmuje także długą treść i stany zmieniające wymiar, na przykład błąd formularza lub długą nazwę produktu.

1. Ustaw w DevTools szerokość odpowiadającą telefonowi, tabletowi i desktopowi.
2. Sprawdź układ tuż przed breakpointem i tuż po nim.
3. Przetestuj długą etykietę, komunikat walidacyjny, menu mobilne i kartę z obrazem.
4. Sprawdź poziome przewijanie, konsolę oraz obecność użytych klas w produkcyjnym CSS.
5. Jeśli komponent występuje w kilku szablonach, sprawdź każdy widok, w którym ma inny układ.

Widok produkcyjny może różnić się od lokalnego wyniku buildu, jeśli klasa nie została wykryta albo arkusz CSS jest nadpisywany. Kiedy wdrażasz nową stronę lub przebudowujesz komponenty, tworzenie stron na WordPressie obejmuje przygotowanie układu pod docelowe widoki i responsywność.

• Tailwind breakpoints: jak dopasować breakpointy do układu strony
• Tailwind CSS v4: jak przejść z v3 i uniknąć problemów
• Tailwind CSS toggle: jak wdrożyć dostępny przełącznik
• Bootstrap czy Tailwind CSS? Wybór dla strony i sklepu