Wartości arbitralne i ich koszt
Użyją Państwo notacji nawiasowej, takiej jak w-[347px], dla jednorazowych wartości i poznają kompromis między elastycznością a potencjalnie nadmiernie rozbudowanym arkuszem stylów.
Wartości arbitralne i ich koszt to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Czym są wartości arbitralne
Składnia wartości arbitralnych Tailwind pozwala użyć dowolnej wartości CSS bezpośrednio w nazwie klasy, korzystając z nawiasów kwadratowych. Zamiast ograniczać się do wstępnie zdefiniowanej skali Tailwind, można użyć w-[347px], text-[#1a2b3c] lub grid-cols-[1fr_2fr_1fr].
Ta funkcja, obsługiwana przez silnik JIT, jest jedną z najpotężniejszych możliwości Tailwind. Wypełnia lukę między klasami narzędziowymi a rzadkimi przypadkami, w których rzeczywiście potrzebna jest precyzyjna wartość spoza skali.
<div class="w-[347px] h-[calc(100vh-64px)] bg-[#1a1a2e] text-[#e2e8f0]">
Arbitrary values for precise control
</div>
<div class="grid grid-cols-[1fr_2fr_1fr] gap-[22px]">
Custom grid layout with arbitrary columns
</div>Opis składni wartości arbitralnych
Składnia nawiasów działa z dowolnym prefiksem narzędzia Tailwind. Wartość wewnątrz nawiasów jest przekazywana bezpośrednio jako wartość CSS. Spacje wewnątrz wartości zapisuje się za pomocą podkreśleń (Tailwind zamienia je przed analizą).
W przypadku narzędzi generujących wiele właściwości CSS wartość arbitralna jest przypisywana tylko do właściwej właściwości. Na przykład p-[12px] ustawia wszystkie cztery wartości paddingu na 12px, podobnie jak p-4, ale z niestandardową wartością.
<!-- Width and height -->
<div class="w-[240px] h-[180px]"></div>
<!-- Custom color -->
<div class="bg-[#f0a500] text-[#2d3748]"></div>
<!-- Calc values -->
<div class="top-[calc(50%_-_24px)]"></div>
<!-- CSS variables -->
<div class="bg-[var(--primary-color)]"></div>
<!-- Custom grid -->
<div class="grid-cols-[200px_1fr_minmax(200px,_1fr)]"></div>
<!-- Spacing with custom value -->
<div class="mt-[7px] px-[18px]"></div>Kiedy używać wartości arbitralnych
Wartości arbitralne sprawdzają się w konkretnych sytuacjach:
- Precyzyjne pozycjonowanie: tooltip, który musi dokładnie wyrównać się względem punktu odniesienia (
top-[3px]) - Ograniczenia zewnętrzne: dopasowanie wysokości lub promienia obramowania komponentu innej firmy
- Unikatowe kolory marki: kolor marki, który nie pasuje dobrze do palety Tailwind (
bg-[#e63946]) - Dynamiczne wyrażenia CSS: wartości
calc,min,maxlubclamp
Nie należy ich używać w przypadku wartości należących do systemu projektowego — w tym celu należy rozszerzyć motyw.
<!-- Appropriate: precise positioning calculation -->
<div class="absolute top-[calc(50%_-_24px)] left-[calc(50%_-_24px)]"
aria-label="Loading">
Loading spinner centered
</div>
<!-- Appropriate: brand color not in default palette -->
<header class="bg-[#e63946] text-white">
Brand header
</header>
<!-- Inappropriate: use theme extension instead -->
<!-- <div class="w-[96px]"> Use w-24 (96px) from default scale instead! -->
<div class="w-24">Use the scale utility</div>Wartości arbitralne a rozszerzanie motywu
Jeśli dana wartość jest używana w wielu miejscach projektu, powinna trafić do rozszerzenia motywu, a nie być zapisana jako wartość arbitralna. Dodanie jej do motywu nadaje jej nazwę semantyczną, zapewnia spójność i pozwala zmienić ją w jednym miejscu.
Dobra zasada: jeśli użyją Państwo wartości arbitralnej dwa razy w różnych plikach, należy przenieść ją do motywu. Jeśli pojawia się tylko raz w bardzo konkretnym kontekście, wartość arbitralna jest odpowiednim rozwiązaniem.
// Instead of repeating w-[347px] in 5 components:
// ❌ Scattered arbitrary values
// <div class="w-[347px]">...</div> (component A)
// <div class="w-[347px]">...</div> (component B)
// <div class="w-[347px]">...</div> (component C)
// ✅ Theme extension — one source of truth
// tailwind.config.js:
module.exports = {
theme: {
extend: {
width: {
'sidebar': '347px',
},
},
},
};
// Usage:
// <div class="w-sidebar">...</div> -- consistent and namedKoszt każdej wartości arbitralnej
Każda unikatowa wartość arbitralna generuje unikatową regułę CSS. Pięć użyć w-[347px] w tym samym pliku wygeneruje tylko jedną regułę CSS (JIT usuwa duplikaty). Jednak w-[347px], w-[348px] i w-[349px] w różnych komponentach wygenerują osobne reguły — trzy reguły dla wartości różniących się o zaledwie jeden piksel.
Na tym polega koszt wartości arbitralnych: mogą one ograniczać ponowne wykorzystanie CSS, dzięki któremu klasy narzędziowe są wydajne. Dziesięć nieznacznie różniących się arbitralnych szerokości wygeneruje dziesięć osobnych reguł zamiast jednego współdzielonego narzędzia.
/* Each generates a separate CSS rule */
.w-\[347px\] { width: 347px; }
.w-\[348px\] { width: 348px; }
.w-\[349px\] { width: 349px; }
.top-\[calc\(50\%-24px\)\] { top: calc(50% - 24px); }
.top-\[calc\(50\%-32px\)\] { top: calc(50% - 32px); }
/* Compare: the scale utilities share values across all usages */
/* .w-24 is generated once and reused wherever w-24 appears */Składnia arbitralnych właściwości
Oprócz prefiksów narzędzi JIT Tailwind obsługuje również arbitralne właściwości CSS przy użyciu składni [property:value] — nawiasów kwadratowych zawierających nazwę właściwości CSS i wartość rozdzielone dwukropkiem.
To rozwiązanie awaryjne dla właściwości CSS, dla których Tailwind nie ma narzędzia, takich jak [mask-image:linear-gradient(...)], [scroll-snap-type:x_mandatory] lub właściwości z prefiksem dostawcy. Należy używać go oszczędnie — jeśli często używają Państwo arbitralnych właściwości, warto rozważyć dodanie wtyczki Tailwind.
<!-- Arbitrary CSS property -->
<div class="[mask-image:linear-gradient(to_bottom,black,transparent)]
[scroll-snap-type:y_mandatory]
[-webkit-line-clamp:3]">
Content with non-utility CSS properties
</div>
<!-- Also works with variants -->
<div class="hover:[text-decoration:underline_wavy_red]
focus:[outline:2px_solid_blue]">
Custom hover/focus styles via arbitrary property
</div>Wartości arbitralne z wariantami
Wartości arbitralne można w pełni łączyć ze wszystkimi prefiksami wariantów. Z dowolną wartością arbitralną można łączyć warianty responsywne, hover, focus, dark i inne — dokładnie tak samo jak ze standardowymi narzędziami.
Daje to pełną moc systemu wariantów Tailwind dla niestandardowych wartości. Niestandardowy kolor hover spoza skali, responsywna niestandardowa szerokość czy arbitralny kolor dla trybu ciemnego działają bezproblemowo.
<!-- Responsive arbitrary width -->
<div class="w-[240px] md:w-[320px] lg:w-[400px]">
Width changes at each breakpoint
</div>
<!-- Dark mode arbitrary color -->
<div class="bg-[#f8f9fa] dark:bg-[#1a1a2e] text-[#212529] dark:text-[#f8f9fa]">
Light/dark mode with arbitrary hex colors
</div>
<!-- Hover with arbitrary value -->
<button class="bg-[#e63946] hover:bg-[#c1121f] text-white px-4 py-2 rounded-lg">
Custom brand button
</button>Arbitralne wartości kolorów i krycie
W przypadku używania arbitralnych kolorów w formacie szesnastkowym można również zastosować modyfikator krycia za pomocą ukośnika: bg-[#e63946]/50 ustawia tło z kryciem 50%. Działa to dlatego, że składnia krycia z ukośnikiem jest funkcją JIT i stosuje się niezależnie od tego, czy kolor bazowy pochodzi z palety, czy jest wartością arbitralną.
Można również używać funkcji rgba() lub hsl() bezpośrednio wewnątrz nawiasów, aby definiować arbitralne krycie lub kontrolować model kolorów.
<!-- Arbitrary color with opacity modifier -->
<div class="bg-[#e63946]/50">50% opacity red</div>
<div class="bg-[#e63946]/75">75% opacity red</div>
<!-- RGB function -->
<div class="bg-[rgb(230,57,70)]">RGB red</div>
<!-- HSL function -->
<div class="bg-[hsl(353,76%,55%)]">HSL red</div>
<!-- RGBA for direct alpha control -->
<div class="bg-[rgba(230,57,70,0.5)]">RGBA with alpha</div>Znaki specjalne w wartościach arbitralnych
Niektóre znaki wewnątrz wartości arbitralnych trzeba escapować, ponieważ mają znaczenie w CSS lub HTML. W arbitralnych wartościach Tailwind należy używać podkreśleń zamiast spacji (Tailwind automatycznie je konwertuje), a nawiasy i inne znaki specjalne wewnątrz calc() należy escapować, używając podkreśleń w miejscach spacji wewnątrz funkcji.
Wartości URL (takie jak obrazy tła) należy ujmować w pojedyncze cudzysłowy: bg-[url('/img/hero.png')]. Tailwind zachowuje pojedyncze cudzysłowy w wygenerowanym CSS.
<!-- Underscore = space in arbitrary values -->
<div class="grid grid-cols-[200px_1fr] gap-[10px_20px]">
Column gap 10px, row gap 20px
</div>
<!-- calc with underscore-spaces -->
<div class="w-[calc(100%_-_64px)]">
Full width minus 64px
</div>
<!-- URL as background image -->
<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center h-64">
Hero image
</div>Przeprowadź audyt wartości arbitralnych
Warto okresowo przeszukiwać bazę kodu pod kątem wszystkich użyć wartości arbitralnych, aby znaleźć kandydatów do przeniesienia do motywu. Szybkie użycie grep pozwala znaleźć każdą klasę z nawiasami w projekcie:
Każda wartość występująca więcej niż dwa razy w różnych plikach jest dobrym kandydatem na nazwany token motywu. Wartość występująca raz może pozostać wartością arbitralną. Wartości, które wyglądają na część spójnej skali (takie jak w-[350px], w-[360px], w-[370px]), wskazują, że schemat użycia wartości spoza skali wymaga ustandaryzowania.
# Find all arbitrary value usages in your project
grep -roh 'class="[^"]*\[[^\]]*\][^"]*"' src/ | sort | uniq -c | sort -rn
# Or more targeted: find classes with bracket notation
grep -roh '[a-z:-]*\[[^\]]*\]' src/ --include='*.{html,js,jsx,ts,tsx}' | sort | uniq -c | sort -rn
# Review high-count arbitrary values — add to theme if used 3+ timesŁączenie wartości arbitralnych z narzędziami
Wartości arbitralne można naturalnie łączyć ze standardowymi klasami narzędziowymi w tym samym ciągu klas. Można swobodnie mieszać narzędzia oparte na skali z wartościami arbitralnymi — jest to zamierzone działanie, a nie obejście. System projektowy obsługuje 95% przypadków za pomocą narzędzi opartych na skali; wartości arbitralne uzupełniają pozostałe 5%.
Najważniejsza zasada to używanie narzędzi opartych na skali w pierwszej kolejności i sięganie po wartości arbitralne tylko wtedy, gdy skala rzeczywiście nie oferuje potrzebnej wartości. Należy egzekwować tę zasadę podczas przeglądów kodu, aby znaczniki nie stały się zbiorem wartości arbitralnych spoza skali.
<!-- Mixing utilities and arbitrary values naturally -->
<div class="flex items-center gap-4 px-6 py-3 <!-- scale utilities -->
w-[480px] <!-- arbitrary: specific width -->
bg-[#1a1a2e] <!-- arbitrary: brand color -->
rounded-xl shadow-lg <!-- scale utilities again -->
text-sm font-medium text-white">
A card using both
</div>Szybkie sprawdzenie
Sprawdź swoją znajomość zagadnień Tailwind CSS Mastery omówionych w tej lekcji.
Podsumowanie lekcji
W tej lekcji poznano: wartości arbitralne, które za pomocą składni nawiasów [value] ustawiają dowolną wartość CSS w dowolnym narzędziu, korzystając z generowania na żądanie JIT; zasadę, że każda unikatowa wartość arbitralna generuje unikatową regułę CSS, dlatego powtarzające się wartości spoza skali w różnych plikach należy przenieść do motywu; oraz fakt, że podkreślenia reprezentują spacje wewnątrz wartości arbitralnych (np. calc(100%_-_64px)). To kończy kurs JIT i optymalizacji produkcyjnej — następnie omówimy tokeny projektowe i systematyczne tworzenie motywów.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 30
- Lekcje
- 120
Często zadawane pytania
Czy lekcja „Wartości arbitralne i ich koszt” jest bezpłatna?
Tak — pełny tekst „Wartości arbitralne i ich koszt” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Wartości arbitralne i ich koszt”?
Użyją Państwo notacji nawiasowej, takiej jak w-[347px], dla jednorazowych wartości i poznają kompromis między elastycznością a potencjalnie nadmiernie rozbudowanym arkuszem stylów. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?
Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Wartości arbitralne i ich koszt”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?
Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Jak działa silnik JIT
- Bezpieczne uwzględnianie klas tworzonych dynamicznie
- Analizowanie i zmniejszanie rozmiaru bundla
- Wartości arbitralne i ich koszt