12. Кастомизация

Tailwind CSS: Кастомизация

Иллюстрация к уроку

Tailwind — не просто набор готовых классов. Это дизайн-система, которую ты полностью контролируешь через tailwind.config.js. Добавляй свои цвета, шрифты, размеры — и они становятся частью системы.

Структура tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,ts,jsx,tsx}'],

  theme: {
    // ⚠️ Полная замена значений по умолчанию
    colors: {
      black: '#000',
      white: '#fff',
      // Все остальные цвета Tailwind удалены!
    },

    extend: {
      // ✅ Добавление к существующим значениям (рекомендуется)
      colors: {
        brand: '#6d28d9',
        'brand-light': '#8b5cf6',
      },
    },
  },

  plugins: [],
}

Важно: используй theme.extend вместо theme напрямую — иначе удалишь все значения по умолчанию!

Кастомные цвета

module.exports = {
  theme: {
    extend: {
      colors: {
        // Простой цвет
        primary: '#3b82f6',

        // Цвет с оттенками (как в дефолтной палитре)
        brand: {
          50: '#f5f3ff',
          100: '#ede9fe',
          200: '#ddd6fe',
          300: '#c4b5fd',
          400: '#a78bfa',
          500: '#8b5cf6',
          600: '#7c3aed',
          700: '#6d28d9',
          800: '#5b21b6',
          900: '#4c1d95',
          950: '#2e1065',
        },

        // CSS переменные (для dynamic theming)
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
      },
    },
  },
}

Использование:

<div class="bg-brand-600 hover:bg-brand-700 text-white">Брендовый</div>
<div class="bg-background text-foreground">Динамические цвета</div>

Кастомные шрифты

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
        serif: ['Playfair Display', 'serif'],
        mono: ['JetBrains Mono', 'monospace'],
        display: ['Cal Sans', 'sans-serif'],
      },
    },
  },
}

<p class="font-sans">Основной текст (Inter)</p>
<h1 class="font-display">Заголовок (Cal Sans)</h1>
<code class="font-mono">Код (JetBrains Mono)</code>

Кастомные размеры и spacing

module.exports = {
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
        '4.5': '1.125rem',  // Между 4 и 5
      },
      borderRadius: {
        '4xl': '2rem',
        '5xl': '2.5rem',
      },
      maxWidth: {
        '8xl': '88rem',
        '9xl': '96rem',
      },
      zIndex: {
        '60': '60',
        '70': '70',
      },
    },
  },
}

Кастомные брейкпоинты

module.exports = {
  theme: {
    extend: {
      screens: {
        'xs': '475px',
        '3xl': '1600px',
        // Брейкпоинт по максимальной ширине (max-width)
        'max-md': { max: '767px' },
      },
    },
  },
}

CSS переменные + Tailwind (мощная комбинация)

Для динамического теминга (как в shadcn/ui):

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
  }
}

module.exports = {
  theme: {
    extend: {
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
    },
  },
}

Tailwind CSS v4: конфиг через CSS

В v4 всё проще — никакого JS конфига:

@import "tailwindcss";

@theme {
  /* Свои цвета */
  --color-brand: oklch(0.5 0.2 250);
  --color-brand-light: oklch(0.7 0.15 250);

  /* Свои шрифты */
  --font-display: "Cal Sans", sans-serif;

  /* Своя шкала */
  --spacing-128: 32rem;
}