Nowości w Tailwind CSS 4.0

Silnik oxide

W najnowszej wersji Tailwinda został nam zaprezentowany całkiem nowy silnik Oxide, napisany w języku rust, który jest znany ze swojej szybkości.

Pozbyto się również parsera PostCSS, a w zamian dostaliśmy nowy, dedykowany parser napisany przez grupę programistów od Tailwind. W testach nowego silnika można zobaczyć znaczące przyrosty (nawet dziesięciokrotne) jeśli chodzi o kompilacje pełne.

Tak to się prezentuje w liczbach:

Zautomatyzowane wykrywanie źródła

Najnowsza wersja Tailwinda wprowadza dla nas inteligentny szereg heurystyczny, który przy zerowej konfiguracji źródeł treści jest w stanie automatycznie wykryć odpowiednie pliki z rozszerzeniami takimi jak np:.html czy .js. Jeśli natomiast jakiś plik nie został wykryty automatycznie. możesz w prosty sposób go dodać poprzez dyrektywę @source.

Obsługa import

W poprzednich wersjach Tailwind, w celu dodania innych plików CSS do naszego docelowego pliku, trzeba było skorzystać z wtyczki postcss-import. Teraz jest już to niepotrzebne, najnowsza wersja ma już tę funkcję wbudowaną.

Transpilacja CSS

W wersji Tailwinda 4.0 dzięki Lightning CSS kod automatycznie jest przetwarzany i obsługuje takie elementy, jak prefiksy, transpilację najnowszych funkcji CSS, minifikacje i wiele więcej. Teraz będziesz mógł usunąć ze swojego projektu dodatkowe narzędzia za to odpowiedzialne, takie jak autoprefixer czy postcss-preset-env. Co oznacza, że najnowsza wersja tailwinda będzie jedynym narzędziem, jakie musisz skonfigurować.

Konfiguracja oparta na CSS

Moim zdaniem jedną z najciekawszych zmian, jakie daje nam najnowsza wersja Tailwinda 4.0 to sposób, w jaki konfigurowany będzie przez nas ten framework. Od teraz nie będziemy potrzebować już dodatkowego pliku JavaScript, w którym będą zawarte dyrektywy przez nas zadeklarowane. Zamiast tego cała nasza konfiguracja będzie zawarta w pliku CSS ,co zdaje się bardziej intuicyjne.

W ten sposób będzie się to prezentować:

@import "tailwindcss";


@theme {
   --font-family-display: "Lato", "sans-serif";


   --breakpoint-xl: 1200px;


   --color-green-primary: #4ade80;
   --color-green-secondary: #22c55e;
   --color-green-tertiary: #15803d;
   --color-green-quaternary: #14532d;

Co ciekawe teraz, aby zadeklarować niestandardowe zmienne CSS, wystarczy użyć dedykowanej do tego dyrektywy @theme. Takie podejście jest zrozumiałe i zwiększa czytelność kodu, a w dodatkowo ułatwia nam zarządzanie zmiennymi.

Zaprojektowany dla najnowszych funkcji CSS

Tailwind w najnowszej odsłonie 4.0 został stworzony tak, aby współpracować z najnowszymi funkcjami, jakie zostały wprowadzone do CSS w ostatnim czasie, jak również dał nam nowe dyrektywy, dzięki którym łatwiej będzie nam zarządzać naszym template. Przykładami takimi są np:

• Warstwy kaskadowe (@layer) - dyrektywa, która w prosty sposób pomaga na uniknięcie konfliktów między stylami
• Właściwości niestandardowe (@property) - ułatwiają one zmianę wyglądu elementów podczas przejścia.
• Funkcja color-mix - umożliwia ona mieszanie kolorów w czasie rzeczywistym, co jest istotne w przypadku gdy mamy doczynienia z motymai dynamicznymi oraz trybami ciemny/jasny
• Zapytania kontenerowe (container queries) - ułatwia dostosowanie projektu do wielu rozdzielczości

Komponowalne warianty

Teraz bez problemu będziesz mógł budować rozbudowane warianty, czyli łączyć ze sobą różne selektory czy pseudoklasy. Dodatkowo został wprowadzony nowy selektor, który nie jednej osobie uratował życie, a mowa tutaj o selektorze :has().

Przykład

<div class="group">
   <div class="group-has-focus:opacity-100"></div>
</div>

Jeśli chodzi o pseudoklasy takie jak :nth-child(), nth-last-child(), :nth-of-type() czy :nth-last-of-type() to one również zostały dodane w najnowszej wersji Tailwinda.

Przykład:

<div class="nth-3;underline">...</div>
<div class="nth-last-5:underline">...</div>
<div class="nth-of-type-4:underline">...</div>
<div class="nth-last-of-type-6:underline">...</div>

Dodatkowo wprowadzony został nowy wariant potomny, który umożliwia odnoszenie się do wszystkich potomków. Jest nim “**”. Dzięki połączeniu go z możliwością odwoływania się do atrybutów możemy w prosty sposób stworzyć taką konstrukcję.

<form class="**:error-message:text-red-500">
   <div>
       <label for="email">Adres e-mail</label>
       <input type="email" name="email" />
   </div>
   <p class="hidden" data-error-message>   <!-- Elementy z atrybutem data-error-message będą czerwone-->
       Proszę wprowadzić poprawny adres e-mail.
   </p>
   ...
</form>

Nowe narzędzia

Tailwind w wersji 4.0 wprowadza dla nas nowe narzędzia, dzięki którym w jeszcze prostszy sposób będziemy mogli zarządzać formularzami czy projektować interfejsy.

1. Field-sizing

Nowe klasy “field-sizing”, które automatycznie dopasowują nasze pola.

• field-sizing-content - automatycznie dopasowuje rozmiar kontrolki w zależności od wielkości kontentu,
• field-sizing-fixed - ustawia sztywny rozmiar kontrolki, bez względu na jego kontent.

2. Color-schema

Dzięki niemu jesteśmy w stanie zmienić kolor naszego scrollbaru. Teraz, jeśli do naszego elementu, który posiada klasę np: overflow-y-scroll, dodamy klasę scheme-light/scheme-dark, nasz pasek przewijania zmieni kolor.

Przykład:

<div class="grid grid-cols-2">
   <div class="bg-white overflow-y-scroll scheme-light">...</div>
   <div class="bg-slate-800 overflow-y-scroll scheme-dark">...</div>
</div>

Uproszczona konfiguracja motywów

Tailwind w odsłonie 4.0 uprościł swój plik konfiguracyjny, między innymi poprzez usunięcie możliwości konfigurowania column gridowych, opacity czy z-index. Teraz możemy z tego korzystać od razu w HTML-u.

To samo rozwiązanie zostało zastosowane w wariantach z atrybutami. Nie musimy już w żaden sposób ich konfigurować, wystarczy, że w odpowiedni sposób się do nich odwołamy.

Przykład:

<div class="opacity-50 data-selected:opacity-100" data-selected></div>

Nowa dyrektywa dla motywu

Jeśli w naszym projekcie chcielibyśmy dostosować motyw do naszych potrzeb, w prosty sposób za pomocą nowej dyrektywy @theme możemy to zrobić. W ten sposób informujemy Tailwind o np: nowych klasach, które chcielibyśmy użyć, a nie ma ich w podstawowym zbiorze.

Przyklad:

@theme {
   --font-family-display: "Lato", "sans-serif";
   --breakpoint-xl: 1200px;
   --color-green-primary: #4ade80;
   --color-green-secondary: #22c55e;
}

Jak zaktualizować swoją wersję Tailwind

Wystarczy, że użyjesz jednego z tych poleceń.

Teraz możesz cieszyć się najnowszą wersją Tailwinda 4.0.

Podsumowanie

Wersja Tailwinda CSS w wersji 4.0 wydaje się przełomem w rozwoju nowoczesnych stron internetowych i podniesie proces pracy z CSS na znacznie wyższy poziom. Nowy silnik Oxide, łatwa konfiguracja czy nowe narzędzia aż proszą się, aby je przetestować i wykorzystać w nowych projektach.