Tailwind to nowy gracz na rynku frameworków CSS, którego głównymi cechami są lekkość i nowoczesny design. Wykorzystując kompozycję wielu drobnych klas css bezpośrednio w template, jesteśmy w stanie bardzo precycyjnie ostylować dany element. Przypomina to nieco stylowanie elementu w klasie CSS, jednak odbywa się to po stronie html-a.
Dowiedzmy się zatem, jak rozpocząć przygodę z Tailwindem w naszej aplikacji!
Chcąc użyć Tailwind w projekcie angularowym, pierwotnie trzeba było wykonać różne operacje związane z wykorzystaniem customowej konfiguracji webcpacka, uruchamiającej PostCSS. Jednak od wersji 11.2, Angular natywnie zaczął wspierać TailwindCSS:
Od tej pory zainicjowanie biblioteki w projekcie stało się bardzo proste!
Uruchomienie Tailwind w Angular
- Instalacja biblioteki
npm install -D tailwindcss- Dodanie pliku konfiguracyjnego
tailwind.config.js
npx tailwind initKomenda ta stworzy minimalny config w głównym katalogu naszego projektu:
- Rozszerzenie
styles.scsso dyrektywy, dołączające niezbędne klasy:
Optymalizacja wielkości builda
Tailwind wspiera optymalizację wielkości builda poprzez usunięcie nieużywanych klas, wykorzystując do tego Purge CSS. Możesz więcej na ten temat poczytać tutaj.
Za uruchomienie ww. mechanizmu, odpowiedzialna jest sekcja purge w pliku tailwind.config.js
Konfiguracja powyżej nakazuje Purge CSS analizować wszystkie pliki html i ts w katalogu src i usunąć wszystkie nieużywane klasy css z builda produkcyjnego. Oto rezultat:
Wielkość pliku css przed optymalizacją:
Initial Chunk Files | Names | Size
styles.1eebe85bc5275dc2bde2.css | styles | 2.71 MBWielkość pliku css po optymalizacji:
Initial Chunk Files | Names | Size
styles.ee64e121c1c1e9361841.css | styles | 8.51 kBI to wszystko!
Źródła:
- Dokumentacja
- Artykuł pokrywający większość omawianych tematów
Więcej na temat samego frameworka w bezpłatnym kursie: