Tailwind CSS Academy · Lekcja

Budowa pliku tailwind.config.js

Zrozumieć każdą sekcję pliku konfiguracyjnego, w tym content, theme, extend, plugins i presets, oraz dowiedzieć się, jak wpływają one na kompilację.

Lekcja 1 z 413 kroki

Budowa pliku tailwind.config.js to bezpłatna lekcja Tailwind CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Tailwind CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.

Dlaczego istnieje plik konfiguracyjny

Tailwind CSS został zaprojektowany tak, aby od podstaw można go było dostosowywać. Plik tailwind.config.js jest pojedynczym źródłem prawdy dla wszystkich modyfikacji domyślnego systemu projektowego. Bez niego dostępne są rozsądne wartości domyślne Tailwind. Z jego użyciem można przedefiniować dowolną część systemu projektowego — kolory, czcionki, odstępy, punkty zmiany układu, animacje i wiele więcej — zachowując jednocześnie automatyczne generowanie pełnego interfejsu klas narzędziowych.

Generowanie pliku konfiguracyjnego

Domyślny plik konfiguracyjny można utworzyć, uruchamiając npx tailwindcss init. Polecenie generuje minimalny plik tailwind.config.js z pustymi szablonami najczęściej używanych sekcji. Aby wygenerować kompletną konfigurację zawierającą każdą wartość domyślną, należy użyć npx tailwindcss init --full — jest to przydatne jako materiał referencyjny, ale zwykle zbyt obszerne do codziennej pracy.

# Generate a minimal config
npx tailwindcss init

# Generate a full config showing all defaults
npx tailwindcss init --full

# Generate config + postcss.config.js together
npx tailwindcss init -p

Sekcja content

Tablica content wskazuje Tailwind, gdzie szukać nazw klas, aby mógł uwzględnić tylko te narzędzia, których projekt rzeczywiście używa. Należy podać wzorce glob wskazujące pliki HTML, JS, JSX, TSX, Vue oraz inne pliki zawierające klasy Tailwind. Poprawna konfiguracja ma kluczowe znaczenie — pominięcie pliku oznacza, że jego klasy zostaną usunięte z produkcyjnej wersji kompilacji.

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js,jsx,ts,tsx}',
    './pages/**/*.{js,jsx,ts,tsx}',
    './components/**/*.{js,jsx,ts,tsx}',
    './public/index.html',
  ],
  // ...
};

Sekcja theme

Sekcja theme zawiera całą konfigurację tokenów projektowych: kolory, odstępy, typografię, punkty zmiany układu, cienie, promienie obramowań i wiele więcej. Można albo rozszerzyć wartości domyślne (dodając nowe obok istniejących), albo je nadpisać (całkowicie zastępując wartości domyślne). Obiekt theme odzwierciedla wewnętrzną strukturę Tailwind, w której każdy klucz odpowiada kategorii narzędzi.

// tailwind.config.js
module.exports = {
  theme: {
    // OVERRIDE: replaces ALL default font sizes
    fontSize: {
      sm: '0.875rem',
      base: '1rem',
      lg: '1.25rem',
    },
    extend: {
      // EXTEND: adds TO the default font sizes
      fontSize: {
        '2xs': '0.625rem',
      },
    },
  },
};

Wyjaśnienie klucza extend

Obiekt theme.extend służy do dodawania niestandardowych wartości bez zastępowania wartości domyślnych Tailwind. Wszystko wewnątrz extend jest łączone z istniejącymi wartościami domyślnymi, a nie je zastępuje. Jest to zalecane podejście w większości projektów — zachowuje wszystkie elementy dostarczane przez Tailwind i dodaje na ich podstawie wartości specyficzne dla projektu. Bezpośrednie nadpisywanie theme należy pozostawić dla przypadków, w których rzeczywiście chcą Państwo usunąć wartości domyślne.

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          500: '#3b82f6',
          900: '#1e3a5f',
        },
      },
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
};

Sekcja plugins

Tablica plugins przyjmuje oficjalne wtyczki Tailwind oraz wtyczki niestandardowe rozszerzające generowany CSS. Wtyczki mogą dodawać nowe klasy narzędziowe, nowe klasy komponentów, nowe style bazowe lub nowe warianty. Wymaga się ich tak samo jak dowolnego modułu Node.js, a do wtyczek obsługujących opcje można przekazywać obiekty konfiguracji. Sekcja plugins jest przetwarzana po rozwiązaniu konfiguracji theme, dlatego wtyczki mają dostęp do wszystkich wartości motywu.

// tailwind.config.js
const forms = require('@tailwindcss/forms');
const typography = require('@tailwindcss/typography');

module.exports = {
  plugins: [
    forms,
    typography({ strategy: 'class' }),
    require('@tailwindcss/aspect-ratio'),
  ],
};

Sekcja presets

Tablica presets umożliwia komponowanie wielu konfiguracji Tailwind. Preset to po prostu obiekt konfiguracji Tailwind, który służy jako baza. Konfiguracja projektu jest nakładana na tę bazę. Jest to zalecany sposób udostępniania bazowego systemu projektowego w wielu projektach monorepo — tokeny definiuje się raz w pakiecie preset, a następnie korzysta się z nich wszędzie.

// packages/ui-config/tailwind.preset.js
module.exports = {
  theme: {
    extend: {
      colors: { brand: '#6366f1' },
    },
  },
};

// apps/my-app/tailwind.config.js
module.exports = {
  presets: [require('@company/ui-config/tailwind.preset')],
  content: ['./src/**/*.tsx'],
};

Ustawienie darkMode

Klucz darkMode określa sposób aktywowania wariantu dark: w Tailwind. Ustawienie wartości 'media' aktywuje style ciemne na podstawie preferencji systemu operacyjnego, natomiast wartość 'class' wymaga klasy dark na elemencie nadrzędnym. W Tailwind v3.3+ można również przekazać tablicę z niestandardowym selektorem: ['class', '.theme-dark'], aby używać nazwy klasy innej niż dark.

// tailwind.config.js
module.exports = {
  darkMode: 'class',  // or 'media', or ['class', '.theme-dark']
  content: ['./src/**/*.{html,js}'],
  theme: { extend: {} },
  plugins: [],
};

Konfiguracja jako ESM lub CJS

Domyślnie Tailwind oczekuje modułu CommonJS (module.exports). W projektach korzystających z ESM (type: 'module' w package.json) należy nadać plikowi konfiguracyjnemu nazwę tailwind.config.cjs, aby jawnie używać składni CommonJS. Tailwind v4 (wydany w 2024 roku) całkowicie przechodzi na konfigurację opartą na CSS, ale w projektach v3 (wciąż najczęstszych) standardem jest tailwind.config.js ze składnią CJS.

// tailwind.config.cjs (for ESM projects)
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Używanie typów TypeScript w konfiguracji

Dodaj adnotację JSDoc @type do pliku konfiguracyjnego, aby uzyskać autouzupełnianie w VSCode bez konwertowania projektu do TypeScript. Typ pochodzi z samego pakietu tailwindcss. Dzięki temu edytor zna dokładny kształt obiektu konfiguracji i może oferować autouzupełnianie oraz zgłaszać błędy typów po literówce w kluczu theme lub przekazaniu nieprawidłowej wartości.

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    extend: {
      colors: {
        primary: '#6366f1', // autocomplete shows available color keys
      },
    },
  },
  plugins: [],
};

Przegląd sekcji konfiguracji

Podsumowując pełną strukturę pliku tailwind.config.js: content określa pliki do skanowania, theme definiuje tokeny projektowe, a extend służy do zmian rozszerzających, plugins dodaje rozszerzoną funkcjonalność, presets komponuje konfiguracje bazowe, a darkMode steruje działaniem wariantu ciemnego. Każda sekcja jest opcjonalna — pusta konfiguracja jest prawidłowa i po prostu korzysta ze wszystkich wartości domyślnych Tailwind.

// tailwind.config.js — full anatomy
module.exports = {
  content: [],      // file globs to scan
  darkMode: 'class', // dark mode strategy
  theme: {
    // override defaults here
    extend: {
      // add to defaults here
    },
  },
  plugins: [],      // extend Tailwind's output
  presets: [],      // compose from base configs
};

Szybkie sprawdzenie

Sprawdź swoją znajomość struktury pliku konfiguracyjnego Tailwind CSS.

Odpowiedz w interaktywnej lekcji

Podsumowanie lekcji

W tej lekcji poznali Państwo następujące zagadnienia: tablica content określa pliki, w których należy wyszukiwać nazwy klas, theme.extend dodaje wartości obok domyślnych, natomiast bezpośrednie wpisy w theme je zastępują; plugins i presets służą do komponowania i rozszerzania możliwości Tailwind. W następnej części omówimy ścieżki content oraz sposób usuwania nieużywanych klas przez Tailwind w środowisku produkcyjnym.

Bezpłatny start

Ucz się HTML dzięki korepetycjom AI — za darmo

Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.

Kursy: 30
Lekcje: 120

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „Budowa pliku tailwind.config.js” jest bezpłatna?

Tak — pełny tekst „Budowa pliku tailwind.config.js” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Tailwind CSS Academy, przejdź na CoddyKit PRO. Kurs Tailwind CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Budowa pliku tailwind.config.js”?

Zrozumieć każdą sekcję pliku konfiguracyjnego, w tym content, theme, extend, plugins i presets, oraz dowiedzieć się, jak wpływają one na kompilację. Ćwiczysz Tailwind CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Tailwind CSS Academy?

Nie wymagamy żadnego doświadczenia. Tailwind CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Budowa pliku tailwind.config.js”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Tailwind CSS Academy?

Tak. Każda lekcja Tailwind CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Budowa pliku tailwind.config.js
Ścieżki content i usuwanie nieużywanych klas
Rozszerzanie a nadpisywanie motywu
Dodawanie i konfiguracja pluginów

← Powrót do Tailwind CSS Academy