Agenda

Prezentacja

1. Czym jest Tailwind
2. Co oznacza podejście utility-first
3. Czym jest Tailwind
4. Dlaczego warto się nim zainteresować
5. Jakie są wady Tailwinda

Live demo

1. Tailwind components library: https://tailwindui.com/ -> Płatne
   • Alternatywa z dostępnym darmowym planem: https://flowbite.com/
2. Setup + integracja z VSC
3. Layout strony
4. Responsywność
5. Zmienne w Tailwind
6. Toggle component + dark mode

Przydatne linki

1. Instalacja: https://tailwindcss.com/docs/installation
2. Setup VSC: https://tailwindcss.com/docs/editor-setup
3. Oficjalne pluginy
   • @tailwindcss/typography (prose)
   • @tailwindcss/forms (default styling for forms elements)
   • line-clamp
   • aspect-ratio
4. Figma -> Tailwind: https://www.figma.com/community/plugin/785619431629077634/Figma-Tailwindcss
5. Wiele przydatnych linków powiązanych z tym tematem: https://github.com/aniftyco/awesome-tailwindcss
6. https://locastic.com/blog/i-was-wrong-about-utility-first-css-and-here-is-why/
7. https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

Zadanie domowe

W celu utrwalenia wiadomości przekazanych na prezentacji przygotowaliśmy zadanie dla chętnych. Zadanie polega na zaimplementowaniu komponentu Button w oparciu o Figmę podlinkowaną poniżej. Aby skupić się wyłącznie na tematach związanych z prezentacją przygotowaliśmy dla was reactową częśc tego komponentu w src/button/Button.tsx.

Progress w zadaniu możecie obserwować korzystając ze Storybooka (żeby go odpalić wpisz npm run storybook w konsoli).

Na następnym spotkaniu (17 marca) porozmawiamy sobie na temat naszych rozwiązań.

Link do Figmy: https://www.figma.com/file/tHc91cCq6NGpBX9FI4BwcG/Comparing-CSS-frameworks?node-id=9698%3A85001

Jeżeli masz problem z zadaniem zajrzyj tutaj

https://www.better.dev/making-buttons-with-tailwind-css https://github.com/justalever/tailwindcss-button-components