Верстка сайту з використанням Tailwind CSS

Вёрстка сайта з використанням Tailwind CSS

Tailwind CSS — utility-first фреймворк з генерацією лише використаних класів. У production bundle — лише ті класи, які реально присутні в JSX/HTML. Середностатистичний проект: 8–15 KB CSS після gzip. Це не фреймворк компонентів — це інструмент швидкого прототипування та масштабованої вёрстки без переключення контексту між файлами.

Установка та налаштування (Tailwind v4)

Tailwind v4 переходить на CSS-first конфігурацію:

npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [
    react(),
    tailwindcss(),
  ],
});

/* src/styles/globals.css */
@import "tailwindcss";

/* Кастомізація через CSS-переменні (v4) */
@theme {
  --color-brand-50: #eff6ff;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;

  --font-sans: 'Inter', ui-sans-serif, system-ui;
  --font-mono: 'JetBrains Mono', ui-monospace;

  --radius-card: 0.75rem;

  --breakpoint-xs: 375px;
}

Компоненти: clsx + tailwind-merge

Без tailwind-merge при злиттю класів побеждает не останній клас, а порядок у CSS-файлі. twMerge вирішує це:

npm install clsx tailwind-merge

// lib/utils.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// components/Button/Button.tsx
import { ButtonHTMLAttributes, FC } from 'react';
import { cn } from '@/lib/utils';
import { cva, type VariantProps } from 'class-variance-authority';

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 rounded-md font-medium transition-colors focus-visible:outline-none disabled:opacity-50',
  {
    variants: {
      variant: {
        default: 'bg-blue-600 text-white hover:bg-blue-700',
        ghost: 'bg-transparent text-blue-600 border border-blue-600 hover:bg-blue-50',
        destructive: 'bg-red-600 text-white hover:bg-red-700',
      },
      size: {
        sm: 'h-8 px-3 text-sm',
        md: 'h-10 px-4 text-sm',
        lg: 'h-12 px-6 text-base',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'md',
    },
  }
);

interface ButtonProps
  extends ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

const Button: FC<ButtonProps> = ({ className, variant, size, ...props }) => (
  <button className={cn(buttonVariants({ variant, size }), className)} {...props} />
);

Типові паттерни вёрстки

Адаптивна сітка карточок

<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  {items.map((item) => (
    <article
      key={item.id}
      className="flex flex-col rounded-lg bg-white p-5 shadow-sm ring-1 ring-black/5 hover:shadow-md"
    >
      <img
        src={item.image}
        alt={item.title}
        className="mb-4 h-48 w-full rounded-md object-cover"
      />
      <h3 className="mb-2 text-lg font-semibold text-gray-900">{item.title}</h3>
      <p className="flex-1 text-sm text-gray-500">{item.description}</p>
      <Button className="mt-4" size="sm">Детальніше</Button>
    </article>
  ))}
</div>

Навігація з мобільним меню

<header className="sticky top-0 z-50 border-b border-gray-100 bg-white/80 backdrop-blur-md">
  <div className="mx-auto flex h-16 max-w-7xl items-center justify-between px-4 lg:px-8">
    <Logo className="h-8" />

    <nav className="hidden items-center gap-6 lg:flex">
      {navLinks.map((link) => (
        <a
          key={link.href}
          href={link.href}
          className="text-sm font-medium text-gray-600 transition-colors hover:text-gray-900"
        >
          {link.label}
        </a>
      ))}
    </nav>

    <Button className="hidden lg:inline-flex">Зв'язатися</Button>
    <MobileMenuButton className="lg:hidden" />
  </div>
</header>

Dark mode

/* globals.css */
@import "tailwindcss";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

<div className="bg-white text-gray-900 dark:bg-gray-950 dark:text-gray-50">

Arbitrary values

<div className="top-[72px] h-[calc(100svh-72px)] grid-cols-[280px_1fr] bg-[#1a1a2e]">

Використовуйте лише коли потрібно — залишайтесь в межах design system.

Сроки

Налаштування Tailwind + конфігурація токенів: 2–3 години. Швидкість вёрстки сторінок з Tailwind приблизно у 1.5–2 рази швидше класичного CSS за рахунок усунення переключення файлів. Посадочна сторінка зі всіма секціями: 1–2 дні. Повний багатосторінковий сайт: 3–7 днів.