Tailwind CSS - Styling bez pisania CSS

Czas nauczyć się Tailwind CSS - jednego z najpopularniejszych frameworków CSS (create-next-app instaluje go domyślnie).

Czym jest Tailwind CSS?

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

Tradycyjny CSS:

.button {
  background-color: #dc2626;
  color: white;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
}

<button class="button">Kliknij mnie</button>

Tailwind CSS:

<button class="bg-red-600 text-white px-6 py-3 rounded-lg font-semibold">
  Kliknij mnie
</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 - m.in. OpenAI, Shopify, Reddit i NASA JPL (lista na tailwindcss.com)

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

Zobacz różne paddingi obok siebie i pozmieniaj liczby w klasach:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Padding</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <!-- Przykład paddingu -->
    <div class="bg-black text-white p-4">
        To jest div z czarnym tłem, białym tekstem i paddingiem 16px (p-4)
    </div>

    <div class="mt-4 bg-blue-600 text-white px-8 py-4">
        Ten div ma padding poziomy 32px (px-8) i pionowy 16px (py-4)
    </div>

    <div class="mt-4 bg-red-600 text-white p-0">
        Ten div ma padding 0 (p-0)
    </div>

    <div class="mt-4 bg-green-600 text-white p-8">
        Ten div ma padding 32px (p-8)
    </div>
</body>
</html>

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

Tak wygląda element wyśrodkowany w pionie i w poziomie (h-screen daje wysokość całego ekranu):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Flexbox</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
    <!-- Flexbox wyśrodkowany w pionie i poziomie -->
    <div class="flex items-center justify-center h-screen bg-gradient-to-br from-blue-500 to-purple-600">
        <div class="bg-white p-8 rounded-lg shadow-2xl">
            <h1 class="text-3xl font-bold text-gray-800 mb-4">
                Wyśrodkowany element!
            </h1>
            <p class="text-gray-600">
                Ten div jest wyśrodkowany w pionie i poziomie dzięki:
            </p>
            <ul class="mt-4 space-y-2 text-sm text-gray-700">
                <li><code class="bg-gray-100 px-2 py-1 rounded">flex</code> - aktywuje flexbox</li>
                <li><code class="bg-gray-100 px-2 py-1 rounded">items-center</code> - wyśrodkowanie pionowe</li>
                <li><code class="bg-gray-100 px-2 py-1 rounded">justify-center</code> - wyśrodkowanie poziome</li>
                <li><code class="bg-gray-100 px-2 py-1 rounded">h-screen</code> - wysokość 100vh</li>
            </ul>
        </div>
    </div>
</body>
</html>

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 - maksymalne zaokrąglenie: pigułka, a na kwadracie koło

Responsywność - Breakpointy

Tailwind ma wbudowane breakpointy:

• sm: - od 640px
• md: - od 768px (np. tablet w pionie)
• lg: - od 1024px (np. tablet w poziomie, mały laptop)
• xl: - od 1280px (laptop, monitor)
• 2xl: - od 1536px (duży monitor)

Każdy prefiks działa od podanej szerokości w górę.

Przykład:

<div class="text-sm md:text-base lg:text-lg">
  Responsywny tekst
</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.

Zmień szerokość podglądu i zobacz, jak zmienia się liczba kolumn i rozmiar tekstu:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Responsywność</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
    <h1 class="text-3xl font-bold mb-8 text-center">
        Responsywność w Tailwind
    </h1>

    <!-- Mobile: 1 kolumna, Tablet: 2 kolumny, Desktop: 3 kolumny -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-blue-500 text-white p-6 rounded-lg">
            <h2 class="text-xl font-bold mb-2">Karta 1</h2>
            <p>Zmień szerokość okna, żeby zobaczyć responsywność!</p>
        </div>
        <div class="bg-purple-500 text-white p-6 rounded-lg">
            <h2 class="text-xl font-bold mb-2">Karta 2</h2>
            <p>Mobile: 1 kolumna<br>Tablet (md): 2 kolumny<br>Desktop (lg): 3 kolumny</p>
        </div>
        <div class="bg-pink-500 text-white p-6 rounded-lg">
            <h2 class="text-xl font-bold mb-2">Karta 3</h2>
            <p>Breakpointy:<br>sm: 640px<br>md: 768px<br>lg: 1024px</p>
        </div>
    </div>

    <!-- Responsywny tekst -->
    <div class="mt-8 bg-white p-6 rounded-lg shadow">
        <p class="text-sm md:text-base lg:text-lg xl:text-xl">
            Ten tekst ma różne rozmiary:<br>
            Mobile: text-sm (14px)<br>
            Tablet: text-base (16px)<br>
            Laptop: text-lg (18px)<br>
            Desktop: text-xl (20px)
        </p>
    </div>
</body>
</html>

Praktyczny przykład - Piracki przycisk

<button class="
  bg-red-600
  hover:bg-red-700
  text-white
  font-bold
  py-3
  px-6
  rounded-lg
  transition-colors
  duration-200
">
  Dołącz do załogi!
</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:

Stwó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 przy tworzeniu projektu wybrałeś zalecane ustawienia albo Tailwind CSS.

Pliki konfiguracji:

• app/globals.css - importuje Tailwind i ustawia motyw (blok @theme)
• postcss.config.mjs - podłącza wtyczkę @tailwindcss/postcss

Na początku globals.css zobaczysz:

@import "tailwindcss";

Ta jedna linia importuje wszystkie klasy Tailwind. To składnia Tailwind 4: dawne dyrektywy @tailwind base, @tailwind components i @tailwind utilities oraz plik tailwind.config.ts pochodzą z wersji 3 i w nowych projektach ich nie ma.

Dark Mode w Tailwind

Tailwind wspiera dark mode:

<div class="bg-white dark:bg-gray-900 text-black dark:text-white">
  Auto dark mode!
</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!

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Piracki Przycisk</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-900 flex items-center justify-center h-screen">
    <div class="text-center">
        <h1 class="text-5xl font-bold text-white mb-8">
            Czarna Perła Kodu
        </h1>

        <!-- Piracki przycisk z efektem hover -->
        <button class="
            bg-red-600
            hover:bg-red-700
            text-white
            font-bold
            px-6
            py-3
            rounded-lg
            transition-colors
            duration-200
            shadow-lg
            hover:shadow-xl
            transform
            hover:scale-105
        ">
            Dołącz do załogi!
        </button>

        <div class="mt-8 max-w-md mx-auto">
            <p class="text-gray-400 text-sm">
                Najedź kursorem na przycisk, żeby zobaczyć efekt hover!
            </p>
            <div class="mt-4 bg-gray-800 p-4 rounded text-left text-xs text-gray-300">
                <p class="font-mono">
                    bg-red-600 hover:bg-red-700<br>
                    text-white font-bold<br>
                    px-6 py-3 rounded-lg<br>
                    transition-colors duration-200<br>
                    shadow-lg hover:shadow-xl<br>
                    transform hover:scale-105
                </p>
            </div>
        </div>
    </div>
</body>
</html>