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:

https://twitter.com/angular/status/1359736376581840896

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 init

Komenda ta stworzy minimalny config w głównym katalogu naszego projektu:

  • Rozszerzenie styles.scss o 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 MB

Wielkość pliku css po optymalizacji:

Initial Chunk Files               | Names         |      Size
styles.ee64e121c1c1e9361841.css   | styles        |   8.51 kB

I to wszystko!

Źródła:

Więcej na temat samego frameworka w bezpłatnym kursie: