Opanuj CSS Tailwind w trybie Just-in-Time (JIT)

Opublikowany: 2022-04-23

Frameworki zorientowane na użyteczność pomagają nam szybciej projektować nasze strony internetowe, a CSS Tailwind stał się jednym z najpopularniejszych. Ale bycie popularnym nie oznacza perfekcji.

Podczas korzystania z CSS Tailwind było kilka wyzwań, takich jak posiadanie ogromnego arkusza stylów podczas programowania i konieczność samodzielnego włączania dodatkowych wariantów. W tym samouczku skupimy się na rozwiązaniu niektórych z tych wyzwań.

W tym samouczku omówimy bardzo ważną funkcję struktury CSS Tailwind, znaną jako kompilator just-in-time, częściej określany jako kompilator JIT.

Omówimy funkcje i zalety korzystania z kompilatora Tailwind CSS JIT, sposób jego włączenia oraz kilka praktycznych przykładów.

Zacznijmy.


Co to jest kompilator Tailwind CSS JIT (dokładnie na czas)?

Zanim zaczniemy mówić o kompilatorze just-in-time, najpierw musimy porozmawiać o CSS Tailwind.

Tailwind CSS to pierwsza użyteczność framework CSS z zestawem predefiniowanych klas CSS, które można zastosować bezpośrednio w naszych znacznikach, aby przyspieszyć projektowanie stron internetowych i zachować spójność projektu przy użyciu predefiniowanych systemów.

Przed wydaniem kompilatora JIT generowany przez nas rozmiar pliku Tailwind CSS po instalacji wynosi zwykle do 3 MB. Jednak w miarę dalszego konfigurowania i dostosowywania Tailwind rozmiar pliku staje się coraz większy — w niektórych przypadkach możesz otrzymać arkusz stylów o wielkości nawet 15 MB.

Chociaż wszystkie nasze nieużywane style zostaną usunięte podczas produkcji, nie ma to miejsca podczas opracowywania. Z arkuszem stylów tak dużym, jak 10 MB, a nawet 20 MB, możemy napotkać problemy i spowodować opóźnienia w naszych narzędziach programistycznych.

Dzięki kompilatorowi JIT style są generowane podczas budowania naszych projektów. Oznacza to, że tylko te klasy narzędziowe, z których obecnie korzystasz, zostaną uwzględnione w rozmiarze arkusza stylów, a nie wszystkie klasy narzędziowe dostarczane z CSS Tailwind.

Korzyści z używania trybu Tailwind CSS JIT

W tej sekcji omówimy niektóre zalety korzystania z kompilatora JIT. Zawierają:

  1. Twój arkusz stylów jest taki sam w rozwoju i produkcji.
  2. Szybszy czas budowy.
  3. Wszystkie warianty są domyślnie włączone.
  4. Kompilacja podczas opracowywania jest znacznie szybsza.
  5. Generowane są tylko używane style.
  6. Warianty można sztaplować.
  7. Poprawiona wydajność narzędzi deweloperskich.

Wady korzystania z kompilatora Tailwind CSS JIT

Obecnie znane ograniczenia zgodnie z dokumentacją kompilatora JIT GitHub to:

  • Zaawansowane opcje PurgeCSS nie są obsługiwane.
  • „Możesz @apply tylko klasy, które są częścią core, generowane przez wtyczki lub zdefiniowane w regule @layer . Nie możesz @apply dowolnych klas CSS, które nie są zdefiniowane w regule @layer ”.
  • Obsługiwane jest tylko PostCSS 8.

Dyrektywa @apply służy do stosowania klas narzędziowych w naszym niestandardowym CSS. Jest to przydatne, gdy definiujemy niestandardowe style CSS, ale wolimy korzystać z niektórych już zdefiniowanych klas narzędziowych. Oto przykład działania dyrektywy @apply :

 .my-custom-css { @apply text-green-500; }

W powyższym kodzie dodaliśmy zielony kolor do niestandardowej klasy CSS. Zielony kolor został zastosowany przy użyciu klasy narzędziowej Tailwind.

Dowiedz się o bardzo ważnej funkcji struktury CSS Tailwind, znanej jako kompilator just-in-time, z tego przydatnego przewodnika . Kliknij, aby tweetować

Jak włączyć tryb Tailwind CSS JIT?

Pamiętaj, że w momencie pisania tego tekstu Tailwind CSS w wersji 3 została już wydana i jest domyślnie włączona po zainstalowaniu Tailwind CSS. Poniższe wyjaśnienia dotyczące włączania kompilatora JIT nie dotyczą wersji 3 i nowszych. Każdy inny przykład omówiony w tym samouczku jest zgodny z wersją 3.

Włączenie kompilatora JIT jest całkiem proste. Wszystko, co musisz zrobić, to zaktualizować plik tailwind.config.js, dodając właściwość mode, która powinna mieć wartość „jit”.

Oto jak powinien wyglądać twój tailwind.config.js:

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

Linia, na której należy się skupić, to część, w której dodaliśmy:

 tryb: 'jit'

Dzięki temu możemy korzystać z funkcji kompilatora JIT.

Po wykonaniu tej czynności możesz uruchomić polecenie build i zobaczyć, jak zmniejsza się rozmiar pliku. Jedyne style, które zobaczysz, to te, których używasz.

Dzięki zmniejszonemu rozmiarowi pliku arkusz stylów podczas projektowania i produkcji będzie taki sam. Możliwość opóźnienia narzędzi programistycznych zostanie również ograniczona do minimum, a Twój kod będzie się szybciej kompilował w miarę budowania projektów.

Następnie zobaczymy kilka praktycznych zastosowań kompilatora JIT.

Dzięki temu możemy korzystać z funkcji kompilatora JIT.

Po wykonaniu tej czynności możesz uruchomić polecenie build i zobaczyć, jak zmniejsza się rozmiar pliku. Jedyne style, które zobaczysz, to te, których używasz.

Dzięki zmniejszonemu rozmiarowi pliku arkusz stylów podczas projektowania i produkcji będzie taki sam. Możliwość opóźnienia narzędzi programistycznych zostanie również ograniczona do minimum, a Twój kod będzie się szybciej kompilował w miarę budowania projektów.

Następnie zobaczymy kilka praktycznych zastosowań kompilatora JIT.

Jak korzystać z kompilatora JIT Tailwind CSS?

W tej sekcji zobaczymy kilka praktycznych przykładów kompilatora JIT. Zaczniemy od arbitralnych wartości, które pomogą nam rozszerzyć system projektowania Tailwind.

Wartości arbitralne

Mogą pojawić się przypadki, w których wolelibyśmy używać wartości spoza już stworzonego systemu projektowania. Te wartości mogą dotyczyć naszych kolorów, wypełnienia, marginesu, szerokości i tak dalej.

Kompilator JIT pozwala nam to osiągnąć za pomocą dowolnych wartości. Te arbitralne wartości pozwalają nam wyrwać się z systemu projektowania i zdefiniować własne wartości niestandardowe. Zobaczysz te wartości w następującej składni: [300px], [#FA8072].

W tym celu musimy zagnieździć wartość w nawiasach kwadratowych, aby Tailwind wiedział, że definiujemy nowe wartości w naszym systemie projektowania. Oto przykład poniżej:

 <div class="mt-[300px] w-[500px]"> </div>

W powyższym przykładzie użyliśmy dwóch nowych wartości — 300px i 500px — które początkowo nie istniały w systemie projektowania. Przed kompilatorem JIT prawdopodobnie musiałbyś najpierw zdefiniować te wartości w pliku config.js, aby osiągnąć ten sam efekt.

Następny przykład pokazuje, jak można zdefiniować nowe wartości kolorów jako:

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Tutaj stworzyliśmy akapit z łososiowym kolorem tła. Nie zobaczysz klasy narzędziowej Tailwind, która mówi bg-salmon, ale jesteśmy w stanie zdefiniować to za pomocą dowolnej wartości.

Masz problemy z przestojami i WordPressem? Kinsta to rozwiązanie hostingowe zaprojektowane, aby zaoszczędzić Twój czas! Sprawdź nasze funkcje

Warianty do układania w stos

W kompilatorze JIT wszystkie warianty są domyślnie włączone, więc możesz zapomnieć o używaniu pliku config.js do włączenia dowolnego. Ponadto warianty można układać w stosy, aby osiągnąć niesamowite rezultaty.

Każdy wariant jest oddzielony dwukropkiem.

Oto przykład:

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

Powyższy kod tworzy przycisk z wyłączoną właściwością focus i zmienia kolor na niebieski po najechaniu na niego.

Pseudoelementy

Kompilator JIT pozwala nam stylizować pseudoelement. Pseudoelementy są używane do stylizowania określonych części elementu, takich jak stylizowanie pierwszej litery elementu lub wstawianie treści przed/po elemencie.

Oto kilka przykładów:

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

W powyższym przykładzie pierwsza litera „M” będzie miała kolor zielony.

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

Gdy zaznaczysz tekst z powyższego kodu, będzie on miał zielony kolor tła.

Kolory obramowania z każdej strony

Ze względu na rozmiar pliku ta funkcja została początkowo pominięta, ale zmieniło się to wraz z wydaniem kompilatora JIT. Każdemu obramowaniu możemy nadać inny kolor.

Zobaczmy przykład tego:

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

Daliśmy naszemu div wiele kolorów obramowania — górne obramowanie jest czerwone, prawe obramowanie jest niebieskie, dolne obramowanie jest żółte, a lewe obramowanie jest zielone.

Tryb JIT w Tailwind CSS w wersji 3

Od wersji 3 programu Tailwind CSS w wersji 3 i nowszych kompilator JIT jest domyślnie włączony podczas instalowania programu Tailwind CSS, dzięki czemu nie musimy się martwić o zmiany w pliku tailwind.config.js . Umożliwia nam to dostęp do wszystkich funkcji kompilatora JIT w podróży. Wszystko, co musimy zrobić, to postępować zgodnie z instrukcjami instalacji dla aktualnej wersji, i już działamy.

Co to jest kompilator JIT... i jak może ulepszyć twoją stronę? Ten przewodnik zawiera odpowiedź Kliknij, aby tweetować

Streszczenie

Kompilator JIT wyniósł framework Tailwind CSS na zupełnie nowy poziom. W jego wydaniu pojawiły się nowe przydatne funkcje, dzięki którym lepiej korzystamy z frameworka. Nie musimy już martwić się, że rozmiar naszego pliku jest tak duży, że powoduje opóźnienia w naszych narzędziach programistycznych, ponieważ generowane są tylko style, których faktycznie używamy, a wszystko to w ruchu.

Widzieliśmy kilka przykładów nowych funkcji, takich jak warianty układania w stos, stylizowanie elementów przy użyciu pseudoelementów, używanie arbitralnych wartości w celu rozszerzenia naszego systemu projektowania oraz bardzo pożądana funkcja — możliwość indywidualnego stylizowania każdej strony krawędzi elementu. Daleko nam jeszcze do ograniczenia możliwości JIT w Tailwind, więc następnym krokiem będzie samodzielne przetestowanie i zbadanie, jak najlepiej wykorzystać funkcje JIT do własnej pracy.

Jakie fajne rzeczy zbudowałeś za pomocą kompilatora JIT? Podziel się swoimi przemyśleniami w komentarzach poniżej.