Tailwind CSS - Styling bez pisania CSS

Czas nauczyć się Tailwind CSS - najpopularniejszego frameworka CSS w 2024 roku.

Czym jest Tailwind CSS? 🎨

Tailwind to utility-first CSS framework. Zamiast pisać CSS ręcznie, używasz gotowych klas.

Tradycyjny CSS:

1.button {
2  background-color: #dc2626;
3  color: white;
4  padding: 12px 24px;
5  border-radius: 8px;
6  font-weight: 600;
7}

1<button class="button">Click me</button>

Tailwind CSS:

1<button class="bg-red-600 text-white px-6 py-3 rounded-lg font-semibold">
2  Click me
3</button>

Wszystko w klasach HTML! Nie piszesz CSS - używasz gotowych klas.

Dlaczego Tailwind? 🤔

✅ Szybkość - nie przełączasz się między HTML i CSS ✅ Konsystencja - jeden system kolorów, spacingu ✅ Responsywność - łatwe breakpointy (sm:, md:, lg:) ✅ Brak konfliktów - nie nadpisujesz przypadkiem stylów ✅ Tree-shaking - tylko używane klasy w finalnym CSS ✅ Używany przez - GitHub, Shopify, Netflix

Podstawowe klasy Tailwind

1. Kolory

Tło (background):

• bg-red-500

  - czerwone tło

• bg-blue-600

  - niebieskie tło

• bg-black

  - czarne tło

• bg-white

  - białe tło

Tekst:

• text-red-500

  - czerwony tekst

• text-blue-600

  - niebieski tekst

• text-gray-900

  - ciemnoszary tekst

Kolory mają odcienie od 50 (najjaśniejszy) do 950 (najciemniejszy).

2. Padding i Margin

Padding (wewnętrzny odstęp):

• p-4

  - padding 16px ze wszystkich stron

• px-4

  - padding 16px left i right

• py-4

  - padding 16px top i bottom

• pt-4

  - padding-top 16px

• pr-4

  - padding-right 16px

Margin (zewnętrzny odstęp):

• m-4

  - margin 16px

• mx-auto

  - wyśrodkowanie (margin left/right auto)

• mt-8

  - margin-top 32px

Skala: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40...

• p-1

  = 4px

• p-2

  = 8px

• p-4

  = 16px

• p-8

  = 32px

3. Tekst

Rozmiar:

• text-xs

  - extra small

• text-sm

  - small

• text-base

  - normalny (16px)

• text-lg

  - large

• text-xl

  - extra large

• text-2xl

  ,

  text-3xl

  ,

  text-4xl

  - większe

Grubość:

• font-light

  - lekki

• font-normal

  - normalny

• font-medium

  - średni

• font-semibold

  - pół-gruby

• font-bold

  - gruby

Wyrównanie:

• text-left

  - lewo

• text-center

  - środek

• text-right

  - prawo

4. Layout

Display:

• block

  - display: block

• inline

  - display: inline

• flex

  - display: flex

• grid

  - display: grid

• hidden

  - display: none

Flexbox:

• flex

  - aktywuje flexbox

• flex-row

  - kierunek poziomy (default)

• flex-col

  - kierunek pionowy

• items-center

  - wyśrodkowanie pionowe

• justify-center

  - wyśrodkowanie poziome

• gap-4

  - odstęp między elementami

5. Szerokość i Wysokość

Szerokość:

• w-full

  - width: 100%

• w-1/2

  - width: 50%

• w-screen

  - width: 100vw

• max-w-md

  - max-width: 448px

• max-w-4xl

  - max-width: 896px

Wysokość:

• h-screen

  - height: 100vh (cały ekran)

• min-h-screen

  - min-height: 100vh

6. Border i Radius

Border:

• border

  - border 1px

• border-2

  - border 2px

• border-red-500

  - czerwony border

Radius (zaokrąglenie):

• rounded

  - border-radius 4px

• rounded-lg

  - większe zaokrąglenie

• rounded-full

  - pełne koło (50%)

Responsywność - Breakpointy 📱

Tailwind ma wbudowane breakpointy:

• sm:

  - 640px (tablet pionowo)

• md:

  - 768px (tablet poziomo)

• lg:

  - 1024px (laptop)

• xl:

  - 1280px (desktop)

Przykład:

1<div class="text-sm md:text-base lg:text-lg">
2  Responsy wny tekst
3</div>

• Mobile:

  text-sm

  (14px)
• Tablet:

  text-base

  (16px)
• Laptop:

  text-lg

  (18px)

Mobile-first: piszesz dla mobile, potem dodajesz breakpointy dla większych ekranów.

Praktyczny przykład - Piracki przycisk 🏴‍☠️

1<button class="
2  bg-red-600
3  hover:bg-red-700
4  text-white
5  font-bold
6  py-3
7  px-6
8  rounded-lg
9  transition-colors
10  duration-200
11">
12  Dołącz do załogi!
13</button>

Co się dzieje:

• bg-red-600

  - czerwone tło

• hover:bg-red-700

  - ciemniejsze przy najechaniu

• text-white

  - biały tekst

• font-bold

  - pogrubiony

• py-3

  - padding top/bottom

• px-6

  - padding left/right

• rounded-lg

  - zaokrąglone rogi

• transition-colors

  - płynne przejście kolorów

• duration-200

  - 200ms przejście

Używanie AI do Tailwind

Zamiast pamiętać wszystkie klasy, zapytaj AI!

Prompt:

1Stwórz piracki hero section w Tailwind z czarnym tłem, czerwonym nagłówkiem i złotym przyciskiem

AI wygeneruje cały kod z odpowiednimi klasami Tailwind!

Tailwind w Next.js

W Next.js Tailwind jest już skonfigurowany (jeśli wybrałeś "Yes" podczas setup'u).

Pliki konfiguracji:

• tailwind.config.ts

  - konfiguracja (kolory, fonty)

• app/globals.css

  - dyrektywy Tailwind

W

globals.css

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

To importuje wszystkie klasy Tailwind.

Dark Mode w Tailwind 🌙

Tailwind wspiera dark mode:

1<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
2  Auto dark mode!
3</div>

Podsumowanie 🎓

✅ Tailwind CSS - utility-first framework ✅ Klasy w HTML - nie piszesz CSS ręcznie ✅ bg-, text-, p-, m- - podstawowe klasy ✅ sm:, md:, lg: - breakpointy responsywne ✅ hover:, focus: - stany interaktywne ✅ AI pomaga - zapytaj o konkretne style

W następnym ćwiczeniu stworzymy landing page dla "Kraken's Call"!

Do zobaczenia! 🚀