www-2425

Opis

Deadline: to zadanie jest na zaliczenie (TAK/NIE), trzeba je oddać na piątym lub szóstym laboratorium osobie, która prowadzi zajęcia.

Na dzisiejszym laboratorium naszym celem będzie wystylizowanie strony internetowej za pomocą Tailwind CSS.

Zadanie

Zadanie polega na zainstalowaniu Tailwind CSS w projekcie i użyciu go do stylizacji strony internetowej. Dobrym pomysłem jest ostateczne pokazanie w jaki sposób mogłaby wyglądać strona którą robiliśmy w ramach pierwszego bloku, ale nie jest to konieczne. Jeśli chcesz, to możesz wystylizować dowolną stronę internetową.

Wymagania

Zadania podstawowe, każde z nich jest dość proste:

  1. Zainstaluj Tailwind CSS w projekcie. To nie jest proste zadanie. Zainstaluj npm oraz npx, a następnie postępuj zgodnie z instrukcjami na stronie Tailwind CSS (sekcja “Tailwind CLI”).
  2. Użyj klas typu text-sky-500 do zmiany koloru tekstu. Dodaj na stronie przynajmniej 3 różne kolory tekstu, niech kolory linków będą różne od kolorów tekstu zwykłego. Możesz skorzystać z https://tailwindcss.com/docs/text-color.
  3. Użyj klas typu bg-sky-500 do zmiany koloru tła. Dodaj na stronie przynajmniej 3 różne kolory tła. Możesz skorzystać z https://tailwindcss.com/docs/background-color.
  4. Zademonstruj użycie efektu tła (shadow): https://tailwindcss.com/docs/box-shadow
  5. Użyj efektu table-auto do stylizacji tabeli. Możesz skorzystać z https://tailwindcss.com/docs/table-layout.
  6. Dodaj animate-ping do jednego z elementów na stronie. Możesz skorzystać z https://tailwindcss.com/docs/animation.

Zadania średnio zaawansowane:

  1. (opcjonalne, ale polecane) skonfiguruj Visual Studio Code do pracy z Tailwind CSS. Możesz skorzystać z https://tailwindcss.com/docs/editor-setup.

    Wskazówka: W najnowszej wersji Tailwind CSS (v4.0) uproszczono proces instalacji, przez co nie jest tworzony plik konfiguracyjny tailwind.config.js. Jednakże, przydatne rozszerzenie Tailwind CSS IntelliSense wymaga tego pliku w katalogu roboczym projektu. Aby rozszerzenie działało poprawnie, możesz po prostu utworzyć pusty plik tailwind.config.js.

  2. Zademonstruj różnicę pomiędzy flex-row a flex-col. Możesz skorzystać z https://tailwindcss.com/docs/flex-direction.
  3. Zademonstruj użycie flex-auto do stylizacji elementów. Możesz skorzystać z https://tailwindcss.com/docs/flex#auto.
  4. Podobnie zademonstruj użycie flex-none. Możesz skorzystać z https://tailwindcss.com/docs/flex#none.

Zadanie zaawansowane:

  1. Użyj PostCSS do minifikacji plików CSS. Możesz skorzystać z https://tailwindcss.com/docs/optimizing-for-production.

Przydatne linki