Jak dodać TailwindCSS do projektu Angular ≥ 11.2

Jakiś czas temu wspominałem o wadach i zaletach TailwindCSS. W tym artykule przedstawię, w jaki sposób dodać bibliotekę do projektu Angular.

Od wersji 11.2 dodanie TailwindCSS upraszcza się do minimum.

Tworzymy nowy projekt za pomocą Angular CLI

Przed utworzeniem nowego projektu upewnijmy się, że posiadamy wersje Angular CLI 11.2 lub nowszą. W tym celu zainstalujmy najnowszą wersję CLI:

npm install @angular/cli -g

Możemy też sprawdzić wersje CLI za pomocą komendy:

ng version

Gdy już posiadamy odpowiednią wersję możemy utworzyć projekt:

ng new angular-tailwindcss

W trakcie tworzenia projektu dostaniemy 3 pytania

  • Czy chcemy włączyć tryb strict? Warto włączyć, ale o jego zaletach opowiem Wam w innym artykule.
  • Czy dodać routing do aplikacji? Aktualnie nie potrzebujemy.
  • Jakich stylów użyć? SCSS.

Mamy już utworzony szkielet aplikacji. Zatem przejdźmy do sedna sprawy.

Dodajmy TailwindCSS

Na początek dodajmy paczkę:

npm install -D tailwindcss

Następnie wygenerujemy config dla tailwindcss:

npx tailwindcss init

Klasy CSS możemy dodawać i w templatce i w stylach aplikacji. Dlatego dodajmy takie klasy tu i tu:

<div class="w-full flex items-center justify-center my-10">
  <button class="btn">
    Get started
  </button>
</div>
.btn {
    @apply px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10
}

Teraz możemy uruchomić nasz serwer w celu sprawdzenia, czy wszystko działa poprawnie:

ng serve

Jeżeli wszystko się zgadza, na ekranie powinien nam się ukazać poniższy obraz:

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/59e3a408-1d07-4959-b5d7-11e41608b3bf/2021-03-03_09h13_10.png

Oznacza to, że TailwindCSS jest dodany poprawnie do naszego projektu.

Wersja produkcyjna TailwindCSS (purge)

Możemy zauważyć, że rozmiar naszych plików w wersji produkcyjnej jest nieco za duży. W takiej wersji do build'a końcowego powinny zostać dodane klasy CSS z TailwindCSS tylko te które użyliśmy w projekcie.

Zbudujmy naszą aplikację i zobaczmy jak duże są nasze pliki. Nie używamy flaki —prod ponieważ w trakcie kompilacji będzie występował błąd związany z rozmiarem pliku i ostatecznie nie utworzymy build'a.

ng build

Aktualny rozmiar plików

Initial Chunk Files | Names         |      Size
styles.css          | styles        |   3.40 MB
vendor.js           | vendor        |   2.10 MB
polyfills.js        | polyfills     | 128.84 kB
main.js             | main          |   8.37 kB
runtime.js          | runtime       |   6.15 kB

                    | Initial Total |   5.64 MB

Jak widzimy rozmiar naszych plików to 5.64 MB przy zwykłej aplikacji. W tym celu edytujmy plik tailwind.config.ts i dodajmy tylko klasy CSS, które potrzebujemy:

...
    purge: {
    enabled: true,
    content: [
      './src/**/*.{html,ts}',
    ]
  }
...

Następnie znowu uruchomiamy komendę do zbudowania i naszym oczom ukazuję się mniejszy build:

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.10 MB
polyfills.js        | polyfills     | 128.84 kB
styles.css          | styles        |  10.19 kB
main.js             | main          |   8.37 kB
runtime.js          | runtime       |   6.15 kB

                    | Initial Total |   2.25 MB

Rozmiar plików zmniejszył się o połowę. Gdy będziemy chcieli wykonać wersję produkcyjną dodamy flagę —prod. Wtedy nasz build zmniejszy się do 142.12 kB.

Przykład z artykułu umieściłem na repozytorium GitHub.

Podsumowanie

Wsparcie dla tailwindcss skróciło proces dodawania do minimum. Możemy teraz w bardzo prosty i przyjemny sposób dodawać bibliotekę. Nasz projekt stał się bardziej przejrzysty. Używacie tailwindCSS w waszych projektach? Dajcie znać w komentarzu lub na Instagramie.

Copyright © 2021 DevLuk