Kurs Tailwind CSS

Lekcja 1 • Instalacja i konfiguracja Tailwinda

Przeprowadza przez instalację CLI, integrację z PostCSS i użycie CDN. Kursanci tworzą działające lokalne środowisko gotowe do wszystkich kolejnych ćwiczeń.

Lekcja 2 • Podstawowa filozofia Tailwind CSS

Bada ograniczenia projektowe Tailwinda, domyślne ustawienia i system projektowy oparty na ograniczeniach. Łączy filozofię z praktycznymi korzyściami w zakresie produktywności, których doświadczą kursanci.

Lekcja 3 • Czym jest utility-first CSS

Definiuje stylowanie utility-first i kontrastuje je z frameworkami opartymi na komponentach. Ustanawia koncepcyjną podstawę dla każdej decyzji dotyczącej Tailwinda podejmowanej w trakcie kursu.

Lekcja 4 • Plik konfiguracyjny Tailwinda

Wprowadza strukturę tailwind.config.js, ścieżki treści i klucze motywu. Przygotowuje kursantów do dostosowywania Tailwinda bez psucia jego domyślnych ustawień.

Lekcja 1 • Narzędzia do określania szerokości, wysokości i rozmiaru

Bada klasy rozmiaru stałego, ułamkowego, względem widocznego obszaru i opartego na treści. Kursanci poprawnie określają rozmiar kontenerów i obrazów w różnych kontekstach układu.

Lekcja 2 • Narzędzia wyświetlania i widoczności

Obejmuje klasy block, inline, flex, grid, hidden i visibility. Kursanci kontrolują renderowanie elementów i techniki ukrywania bezpieczne dla dostępności.

Lekcja 3 • Narzędzia marginesów i dopełnienia

Uczy kierunkowych klas marginesów i dopełnienia, w tym skrótów i wariantów osi. Kursanci precyzyjnie stosują odstępy do rzeczywistych elementów interfejsu.

Lekcja 4 • Zrozumienie skali odstępów

Obejmuje domyślną skalę odstępów Tailwinda opartą na rem i sposób mapowania numerycznych tokenów na wartości pikselowe. Dostarcza modelu mentalnego potrzebnego do podejmowania spójnych decyzji dotyczących marginesów i dopełnienia.

Lekcja 1 • Podstawy palety kolorów Tailwinda

Wprowadza domyślną strukturę palety, numerację odcieni i semantyczne role kolorów. Kursanci wybierają dostępne pary kolorów, korzystając z wbudowanej skali Tailwinda.

Lekcja 2 • Rozmiar czcionki i wysokość linii

Mapuje skalę rozmiaru tekstu Tailwinda na role typograficzne i wyjaśnia domyślne powiązania wysokości linii. Kursanci ustanawiają jasną hierarchię wizualną w dowolnym interfejsie.

Lekcja 3 • Dostosowywanie i rozszerzanie kolorów

Pokazuje dodawanie kolorów marki, zmiennych CSS i semantycznych aliasów w konfiguracji. Kursanci utrzymują skalowalny system kolorów w dużych projektach.

Lekcja 4 • Odstępy między literami i wyrównanie tekstu

Uczy narzędzi tracking, text-align i text-transform do precyzyjnej kontroli typograficznej. Kursanci dopracowują nagłówki i tekst główny do standardów profesjonalnych.

Lekcja 1 • Budowanie rzeczywistych komponentów Flex

Stosuje wszystkie narzędzia flex do zbudowania paska nawigacyjnego, obiektu medialnego i układu stopki. Kursanci utrwalają wiedzę o flexie poprzez praktyczne budowanie komponentów.

Lekcja 2 • Flex grow, shrink i basis

Wyjaśnia narzędzia flex-grow, flex-shrink i flex-basis oraz ich interakcję. Kursanci budują płynne kolumny, które przewidywalnie zmieniają rozmiar pod wpływem różnej ilości treści.

Lekcja 3 • Narzędzia order i self-alignment

Uczy klas order i nadpisań wyrównania dla poszczególnych elementów w celu tworzenia złożonych aranżacji flex. Kursanci zmieniają kolejność wizualną elementów bez zmiany struktury DOM.

Lekcja 4 • Wyrównanie i justowanie

Obejmuje narzędzia justify-content, align-items, align-self i align-content. Kursanci precyzyjnie centrują, rozmieszczają i rozciągają elementy w dowolnym układzie flex.

Lekcja 1 • Wyrównanie wewnątrz siatki

Stosuje justify-items, align-items, justify-self i align-self w kontekście siatki. Kursanci pozycjonują zawartość komórek niezależnie od rozmiaru torów.

Lekcja 2 • Konfiguracja kontenera siatki

Aktywuje kontekst siatki i definiuje szablony kolumn i wierszy za pomocą klas Tailwinda. Kursanci rozumieją, jak definicje szablonów kontrolują całe rozmieszczenie elementów podrzędnych.

Lekcja 3 • Budowanie rzeczywistych układów siatki

Konstruuje powłokę pulpitu nawigacyjnego, galerię obrazów i układ strony redakcyjnej za pomocą narzędzi siatki. Kursanci stosują wiedzę o siatce do struktur stron jakości produkcyjnej.

Lekcja 4 • Rozciąganie na kolumny i wiersze

Obejmuje narzędzia col-span, row-span i full-span do umieszczania elementów w wielu torach. Kursanci tworzą asymetryczne układy, które przełamują jednolity wzór siatki.

Lekcja 1 • Responsywne przełączanie układu

Przełącza między układami flex i grid w różnych punktach granicznych w celu uzyskania adaptacyjnej struktury. Kursanci budują komponenty, które restrukturyzują się bez użycia JavaScript.

Lekcja 2 • Prefiksy punktów granicznych Tailwinda

Obejmuje prefiksy sm, md, lg, xl i 2xl oraz ich domyślne progi pikselowe. Kursanci z pewnością siebie stosują prefiksy punktów granicznych do dowolnej klasy narzędziowej.

Lekcja 3 • Zasady projektowania mobile-first

Ustanawia myślenie mobile-first i wyjaśnia, dlaczego punkty graniczne Tailwinda są oparte na min-width. Kursanci przeformułowują decyzje projektowe, zaczynając od najmniejszego widocznego obszaru.

Lekcja 4 • Niestandardowe punkty graniczne i konfiguracja ekranów

Dodaje punkty graniczne specyficzne dla projektu i nadpisuje domyślne w kluczu konfiguracyjnym screens. Kursanci dostosowują responsywny system Tailwinda do dowolnych specyfikacji projektowych.

Lekcja 1 • Warianty Group i Peer

Uczy wzorców group-hover i peer-checked dla stylów wyzwalanych przez rodzica i rodzeństwo. Kursanci budują menu rozwijane i niestandardowe pola wyboru bez JavaScript.

Lekcja 2 • Warianty stanów formularzy

Stosuje warianty required, invalid, valid i checked do stylowania stanów walidacji formularzy. Kursanci zapewniają jasną informację zwrotną wizualną dla danych wprowadzanych przez użytkownika bez niestandardowego CSS.

Lekcja 3 • Narzędzia przejść i animacji

Dodaje płynne przejścia i animacje klatkowe, używając wbudowanych klas narzędziowych Tailwinda. Kursanci wzbogacają interaktywność o wydajny, przyjazny dla GPU ruch.

Lekcja 4 • Stany Active, Visited i Disabled

Obejmuje warianty active, visited, disabled i placeholder dla kompletnego stylowania formularzy i linków. Kursanci obsługują wszystkie stany interaktywne w jednym przepływie pracy z klasami narzędziowymi.

Lekcja 1 • Dowolne wartości i zmienne CSS

Używa notacji nawiasowej dla jednorazowych wartości i integruje niestandardowe właściwości CSS z narzędziami. Kursanci wychodzą poza domyślną skalę, gdy specyfikacje projektowe wymagają precyzji.

Lekcja 2 • Optymalizacja wydajności i pakietu

Audytuje rozmiar wyjściowego CSS, precyzyjnie konfiguruje ścieżki treści i stosuje wzorce safelist. Kursanci dostarczają najmniejszy możliwy arkusz stylów bez poświęcania dynamicznego użycia klas.

Lekcja 3 • Implementacja trybu ciemnego

Konfiguruje tryb ciemny oparty na klasie i media oraz stosuje ciemne warianty w całym interfejsie. Kursanci dostarczają kompletne motywy jasny i ciemny z pojedynczego arkusza stylów.

Lekcja 4 • Pisanie niestandardowych wtyczek Tailwinda

Budowanie niestandardowych wtyczek narzędziowych, komponentów i wariantów, używając API wtyczek Tailwinda. Kursanci rozszerzają możliwości Tailwinda, aby dopasować je do unikalnych wymagań dowolnego projektu.