Ściągawka Tailwind CSS v4 (z wyszukiwarką)

Ściągawka Tailwind CSS v4 z wyszukiwarką: wpisz dowolną klasę lub zwykłe słowo i zobacz dokładny CSS, który generuje v4, od wielokrotności var(--spacing) po tokeny kolorów OKLCH. Obejmuje też tokeny @theme, breakpointy, container queries, interaktywne pudełka flex i grid, pełną paletę kolorów, tryb ciemny oraz zmiany nazw z v3 na v4.

Zaktualizowano 13 października 2026

Ta ściągawka dotyczy Tailwind CSS v4 (w chwili pisania, w październiku 2026, aktualnym wydaniem jest v4.3). Przy każdej klasie pokazuje CSS, który v4 faktycznie generuje, a to ma znaczenie, bo v4 zmieniło sposób tworzenia wartości: odstępy są wielokrotnością jednej zmiennej --spacing, kolory to zmienne --color-* zdefiniowane w OKLCH, a rozmiary, takie jak zaokrąglenie, cień i tekst, pochodzą z nazwanych zmiennych motywu. Wpisz coś w pole, aby filtrować. Wyszukiwanie działa po nazwach klas, po generowanym CSS i po zwykłych słowach, takich jak "center", "gradient" czy "sticky".

Przeszukaj wszystkie klasy narzędziowe

Jak czytać tabelę: calc(var(--spacing) * 4) to 1rem, ponieważ domyślne --spacing wynosi 0.25rem. Zmień tę jedną zmienną w @theme, a razem z nią zmienią się wszystkie paddingi, marginesy, odstępy, szerokości i wysokości korzystające ze skali liczbowej. Tam, gdzie generowany CSS jest długi (gradienty, pierścienie, przejścia), tabela pokazuje wersję uproszczoną i o tym informuje.

Jak v4 zamienia klasę w wartość

W v4 są cztery sposoby nadania klasie narzędziowej wartości, a wiedza, z którego korzystasz, wyjaśnia większość niespodzianek:

• Liczba ze skali odstępów: p-4, w-64, gap-3. Działa każda liczba całkowita, a także ćwiartki, takie jak p-2.5, bez żadnej konfiguracji. Wartość to calc(var(--spacing) * n).
• Nazwana wartość motywu: rounded-lg, shadow-md, text-xl, max-w-md. Każda odczytuje zmienną, taką jak --radius-lg czy --container-md.
• Dowolna wartość w nawiasach kwadratowych: p-[13px], grid-cols-[200px_1fr], bg-[#4f98fb]. Podkreślniki zastępują spacje.
• Zmienna CSS w nawiasach okrągłych: bg-(--brand) to w v4 skrót od bg-[var(--brand)]. W v3 pisało się bg-[--brand].

Ułamki, takie jak w-1/2, zamieniają się w calc(1/2 * 100%), a przyrostek krycia, taki jak bg-black/50, zamienia się w color-mix() z przezroczystością, więc działa z każdym formatem koloru.

Tokeny @theme (następca tailwind.config.js w v4)

W v4 system projektowy konfigurujesz w CSS. Zmienne zadeklarowane wewnątrz @theme stają się jednocześnie właściwościami niestandardowymi CSS na :root i źródłem klas narzędziowych. Prefiks zmiennej decyduje, które klasy zasila:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", sans-serif;   /* font-display */
  --color-brand-500: oklch(65% 0.17 255);  /* bg-brand-500, text-brand-500 ... */
  --breakpoint-3xl: 120rem;                /* 3xl: variant */
  --spacing: 0.25rem;                      /* p-4 = 1rem */
  --radius-card: 0.875rem;                 /* rounded-card */
}

Przestrzeń nazw	Zasila	Przykład
--color-*	wszystkie klasy kolorów (bg, text, border, fill, ring, kolor cienia...)	bg-red-500
--spacing	padding, margin, gap, width, height, inset, translate	px-4
--font-*	rodzina fontów	font-sans
--text-*	rozmiar fontu (plus opcjonalnie --text-*--line-height)	text-xl
--font-weight-*	grubość fontu	font-bold
--tracking-* / --leading-*	odstęp między literami / wysokość linii	tracking-wide
--breakpoint-*	warianty responsywne	sm:*
--container-*	warianty container queries i max-w-*	@sm:*, max-w-md
--radius-*	zaokrąglenie obramowania	rounded-sm
--shadow-*, --inset-shadow-*, --drop-shadow-*	cienie	shadow-md
--blur-*	rozmycie i rozmycie tła	blur-md
--ease-* / --animate-*	funkcje czasowe / animacje	ease-out, animate-spin
--perspective-* / --aspect-*	perspektywa 3D / proporcje	perspective-near, aspect-video

Aby usunąć całą domyślną przestrzeń nazw, najpierw ustaw ją na initial, na przykład --color-*: initial;, a potem zadeklaruj tylko własne kolory. Jeśli nadal masz konfigurację w JavaScripcie, v4 może ją wczytać przez @config "./tailwind.config.js";, ale opcje corePlugins, safelist i separator nie są obsługiwane.

Breakpointy

Breakpointy działają w podejściu mobile first: klasa bez prefiksu obowiązuje przy każdej szerokości, a md:flex obowiązuje od 48rem w górę. v4 zapisuje je składnią zakresów width >= ....

Prefiks	Min. szerokość	CSS	Poniżej (max-*)
sm:	40rem (640px)	@media (width >= 40rem)	max-sm: = @media (width < 40rem)
md:	48rem (768px)	@media (width >= 48rem)	max-md:
lg:	64rem (1024px)	@media (width >= 64rem)	max-lg:
xl:	80rem (1280px)	@media (width >= 80rem)	max-xl:
2xl:	96rem (1536px)	@media (width >= 96rem)	max-2xl:

Połącz je, aby objąć zakres: md:max-xl:flex działa tylko od 48rem do 80rem (bez 80rem). Dla jednorazowego breakpointu użyj min-[900px]:grid lub max-[600px]:hidden. Breakpointy dodasz lub zmienisz przez --breakpoint-* w @theme; trzymaj je wszystkie w rem, żeby sortowały się poprawnie.

Container queries

Container queries są wbudowane w v4 (w v3 wymagały wtyczki). Oznacz rodzica przez @container, a potem stylizuj dzieci przez @sm:, @md: i tak dalej. Reagują na szerokość rodzica, a nie okna, i właśnie tego potrzebujesz dla karty, która pojawia się zarówno w pasku bocznym, jak i w szerokiej kolumnie głównej.

<div class="@container">
  <article class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-48 rounded-lg" src="..." alt="">
    <div>...</div>
  </article>
</div>

Wariant	Szerokość kontenera	Wariant	Szerokość kontenera
@3xs	16rem (256px)	@2xl	42rem (672px)
@2xs	18rem (288px)	@3xl	48rem (768px)
@xs	20rem (320px)	@4xl	56rem (896px)
@sm	24rem (384px)	@5xl	64rem (1024px)
@md	28rem (448px)	@6xl	72rem (1152px)
@lg	32rem (512px)	@7xl	80rem (1280px)
@xl	36rem (576px)

Każdy z nich kompiluje się do @container (width >= ...). Użyj @max-md: dla "poniżej", połącz @sm:@max-md: dla zakresu, nazywaj kontenery przez @container/sidebar i kieruj do nich style przez @md/sidebar:, a także używaj dowolnych rozmiarów, takich jak @min-[475px]:. Uwaga: rozmiary kontenerów to nie te same liczby co breakpointy: @md to 28rem, a md: to 48rem.

Flex i grid w pigułce

Wybierz układ poniżej i patrz, jak przesuwają się pudełka. Ciąg klas aktualizuje się przy każdym kliknięciu, więc możesz go skopiować prosto do swojego kodu.

Wzorce, po które będziesz sięgać najczęściej:

Cel	Klasy
Responsywna siatka kart bez breakpointów	grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-6
Pasek boczny plus treść	grid md:grid-cols-[16rem_1fr] gap-8
Stopka przyklejona do dołu krótkiej strony	flex min-h-dvh flex-col na wrapperze, flex-1 na main
Tekst ucinany wewnątrz wiersza flex	min-w-0 na dziecku flex, truncate na tekście
Pionowo na telefonie, w wierszu na komputerze	flex flex-col md:flex-row gap-4
Przesuń ostatni element do prawej	ms-auto (lub ml-auto) na tym elemencie

Domyślna paleta kolorów (OKLCH), kliknij, aby skopiować

v4 definiuje domyślną paletę w OKLCH, co pozwala pokazać bardziej nasycone kolory na ekranach o szerokim gamucie. Każda próbka poniżej jest pomalowana dokładną wartością z pliku motywu Tailwind; kliknij ją, aby skopiować wartość oklch(). Odcienie mają numery od 50 do 950. Palety oznaczone * (mauve, olive, mist i taupe) dodano w v4.2.0, więc nie ma ich we wcześniejszych wydaniach v4. Czerń i biel to #000 i #fff.

Używaj ich jako bg-sky-500, text-sky-500/80 albo we własnym CSS jako var(--color-sky-500). Aby sprawdzić, czy zestawienie jest czytelne, przepuść je przez sprawdzarkę kontrastu kolorów, a jeśli potrzebujesz własnej skali w tym samym formacie, wypróbuj generator palet kolorów Tailwind.

Tryb ciemny w v4

Domyślnie dark: podąża za systemem operacyjnym przez @media (prefers-color-scheme: dark). Aby sterować nim klasą lub atrybutem (na potrzeby ręcznego przełącznika), nadpisz wariant w swoim CSS przez @custom-variant. Klucza konfiguracji darkMode już nie ma.

/* Class strategy: <html class="dark"> */
@custom-variant dark (&:where(.dark, .dark *));

/* Or a data attribute: <html data-theme="dark"> */
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div class="bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100">...</div>

Przy ręcznym przełączniku ustaw klasę, zanim strona się wyrenderuje (mały skrypt inline w <head>, który odczytuje zapisany wybór), żeby odwiedzający nie zobaczyli mignięcia niewłaściwego motywu. Trzecia możliwość to całkowita rezygnacja z klas dark:: zdefiniuj semantyczne tokeny, takie jak --color-surface, w @theme i podmieniaj ich wartości pod .dark, tak by jedna klasa, np. bg-surface, działała w obu motywach.

Z v3 na v4: klasy o zmienionych nazwach i działaniu

Pochodzą z oficjalnego przewodnika aktualizacji. Zmiany nazw są najważniejsze, bo stare nazwy wciąż istnieją i po cichu dają inny (mniejszy) efekt.

v3	v4	Dlaczego
shadow-sm	shadow-xs	Skala przesunęła się o jeden stopień w dół, żeby każdy rozmiar miał nazwę
shadow	shadow-sm	To samo przesunięcie
drop-shadow-sm / drop-shadow	drop-shadow-xs / drop-shadow-sm	To samo przesunięcie
blur-sm / blur	blur-xs / blur-sm	To samo przesunięcie (także backdrop-blur-*)
rounded-sm	rounded-xs	To samo przesunięcie
rounded	rounded-sm	To samo przesunięcie
outline-none	outline-hidden	outline-none w v4 naprawdę ustawia teraz outline-style: none
ring (3px, blue-500)	ring-3 plus kolor	Samo ring ma teraz 1px w kolorze currentColor
outline outline-2	outline-2	Klasy szerokości same ustawiają teraz styl solid
bg-opacity-50 (oraz text-, border-, ring-, divide-, placeholder-opacity)	bg-black/50	Usunięte; użyj modyfikatora z ukośnikiem
flex-shrink-0 / flex-grow	shrink-0 / grow	Usunięte aliasy
overflow-ellipsis	text-ellipsis	Usunięty alias
decoration-slice / decoration-clone	box-decoration-slice / box-decoration-clone	Usunięte aliasy
bg-[--brand]	bg-(--brand)	Nowy skrót dla zmiennych CSS
!bg-red-500	bg-red-500!	Important trafia na koniec (stara forma jest przestarzała)
first:*:pt-0	*:first:pt-0	Połączone warianty czyta się teraz od lewej do prawej
tw-flex (prefiks)	tw:flex	Prefiksy wyglądają jak wariant i stoją na początku

Zmiany działania bez zmiany nazwy, które zaskakują ludzi przy aktualizacji:

• Kolor obramowania i divide: domyślnie jest teraz currentColor zamiast gray-200, więc samo border wygląda ciemno. Dodaj kolor, np. border-gray-200.
• Hover na ekranach dotykowych: hover: jest opakowany w @media (hover: hover), więc stuknięcie nie wywołuje już przyklejonych stylów hover.
• Przyciski: Preflight nadaje teraz przyciskom cursor: default, tak jak przeglądarka. Dodaj cursor-pointer, jeśli chcesz kursor w kształcie dłoni.
• space-x / space-y i divide: selektor zmienił się na > :not(:last-child), a margines przeniósł się na stronę końcową. Jeśli odstępy wyglądają źle, przejdź na flex lub grid z gap.
• container: opcji center i padding już nie ma; rozszerz go przez @utility container { margin-inline: auto; padding-inline: 2rem; }.
• Gradienty: v4 nazywa gradienty liniowe bg-linear-to-r i dodaje bg-radial oraz bg-conic.
• Przeglądarki: v4 celuje w Safari 16.4+, Chrome 111+ i Firefox 128+. Jeśli musisz wspierać starsze przeglądarki, przewodnik aktualizacji zaleca pozostanie przy v3.4.

Oficjalne narzędzie npx @tailwindcss/upgrade automatycznie obsługuje większość zmian nazw. Uruchom je na czystej gałęzi i przejrzyj diff, bo nie może wiedzieć, które klasy shadow miały wyglądać tak samo jak wcześniej.

Drukowanie tej ściągawki

Ta strona ma style do druku: pola wyszukiwania i przyciski są ukryte, tabele dostają mniejszy font, a siatka kolorów trzyma próbki razem. W większości przeglądarek włącz w oknie drukowania opcję "Grafika tła", bo inaczej próbki wydrukują się puste. Jeśli wcześniej przefiltrujesz tabelę, wydrukują się tylko widoczne wiersze, co jest szybkim sposobem na jednostronicową ściągawkę z samymi klasami, których używasz.

Ten sam wariant print: działa w Twoich projektach: print:hidden na nawigacji, print:text-black na jasnym tekście i print:break-inside-avoid na kartach utrzymują czytelność wydruków.

Powiązane

• Stany przycisków w CSS: hover, focus-visible, active i disabled, w czystym CSS i w Tailwind.
• Schematy kolorów stron internetowych, aby wybrać paletę, zanim przełożysz ją na tokeny.
• Generator CSS grid oraz galeria komponentów z sekcjami Tailwind do skopiowania.

Najczęściej zadawane pytania

Gdzie jest tailwind.config.js w Tailwind v4?

v4 konfiguruje się w CSS. Importujesz Tailwind przez @import "tailwindcss" i deklarujesz tokeny projektu w bloku @theme, np. --color-brand-500 czy --breakpoint-3xl. Konfigurację w JavaScripcie wciąż można wczytać dyrektywą @config, ale opcje corePlugins, safelist i separator nie są obsługiwane.

Jakie są domyślne breakpointy w Tailwind v4?

sm to 40rem (640px), md to 48rem (768px), lg to 64rem (1024px), xl to 80rem (1280px), a 2xl to 96rem (1536px). Działają w podejściu mobile first, więc md:flex obowiązuje od 48rem w górę. Użyj max-md: dla stylów poniżej breakpointu, a połącz je, np. md:max-xl:, aby objąć zakres.

Dlaczego cienie i zaokrąglone rogi wyglądają na mniejsze po aktualizacji do v4?

Skale cieni, zaokrągleń i rozmycia przesunęły się o jeden stopień w dół. shadow-sm z v3 to shadow-xs w v4, shadow z v3 to shadow-sm w v4, rounded-sm z v3 to rounded-xs w v4, a rounded z v3 to rounded-sm w v4. Stare nazwy nadal się kompilują, więc nie pojawia się żaden błąd; po prostu dają o jeden rozmiar mniej.

Jak w v4 sprawić, żeby tryb ciemny używał klasy zamiast ustawienia systemowego?

Dodaj do swojego CSS @custom-variant dark (&:where(.dark, .dark *));. Klasy dark: zadziałają wtedy, gdy którykolwiek przodek ma klasę dark. Jeśli wolisz atrybut data, użyj w selektorze [data-theme=dark].

Czy Tailwind v4 potrzebuje wtyczki do container queries?

Nie. Container queries są wbudowane. Dodaj @container do rodzica i używaj na jego dzieciach wariantów, takich jak @sm:, @md: i @max-md:. Rozmiary kontenerów zaczynają się od @3xs (16rem) i różnią się od breakpointów strony, na przykład @md to 28rem.

Do czego kompiluje się p-4 w Tailwind v4?

padding: calc(var(--spacing) * 4). Przy domyślnym --spacing równym 0.25rem daje to 1rem (16px przy domyślnym rozmiarze fontu). Na skali odstępów działa każda liczba całkowita bez konfiguracji, a zmiana --spacing przeskalowuje je wszystkie naraz.

Display

Elementy

Kierunek

Zawijanie

Oś główna

Kolumny

Oś poprzeczna

Odstęp

Skopiowano

Skopiuj klasy

Wydrukuj tę ściągawkę

Zacznij za darmo · Bez karty kredytowej

Powiązane: Poradniki

• Kolory Tailwind CSS
• Tailwind vs Bootstrap
• Przykłady stron Zespół
• Regulamin a polityka prywatności
• Przykłady stron z podziękowaniem
• TOML vs YAML
• Zbyt wiele przekierowań
• Klasy w TypeScript

Produkt

• Kreator stron z AI
• Wdrożymy nasz kreator stron z AI za $2M w Twojej firmie
• Enterprise
• Dokumentacja API

Dla kogo

• Dla agencji
• Dla freelancerów
• Dla firm hostingowych
• Dla platform SaaS
• Dla startupów
• Usługi finansowe
• Rozwiązania dla ochrony zdrowia

Funkcje

• Edytor przeciągnij i upuść
• SEO i analityka
• Własny branding
• Panel klienta
• Rozliczenia dla resellerów

Zasoby

• Blog
• Centrum pomocy
• Darmowe narzędzia dla firm
• Free UI Components
• Szablony
• Kolekcje szablonów
• Przykłady stron
• Poradniki
• Porównania
• Alternatywy
• Najlepsze
• Recenzje
• Przewodniki po cenach
• Słownik i poradniki
• Integracje
• Dla programistów
• Benchmark
• Windows App

Firma

• O nas
• Cennik
• Zgłoś się do programu partnerskiego
• Kontakt
• Kariera
• Bezpieczeństwo
• Polityka prywatności
• Warunki świadczenia usług

Mapa strony