Реалізація Utility-First CSS підходу для сайту

Utility-First CSS підхід для сайту

Utility-First — писати стилі прямо в класах HTML-елементів, використовуючи готові утиліти: flex, items-center, text-lg, bg-blue-500. Не придумувати імена класів (.card-header-wrapper), не переключатися між HTML та CSS файлами. Tailwind CSS — реалізація цього підходу.

Це працює швидше не тому що класи гарні, а тому що CSS не зростає: кожен новий компонент переіспользує ті самі утиліти. Bundle CSS перестає лінійно зростати з проектом.

Встановлення Tailwind CSS 4

Tailwind CSS 4 повністю переробив конфігурацію — тепер всі через CSS, без tailwind.config.ts:

npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite'
import { defineConfig } from 'vite'

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

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

/* Користувацькі токени прямо в CSS */
@theme {
  --color-primary: #2563eb;
  --color-primary-foreground: #ffffff;
  --color-secondary: #f1f5f9;
  --radius-md: 8px;
  --font-sans: 'Inter', system-ui, sans-serif;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Базові стили */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  body {
    font-family: var(--font-sans);
    color: var(--color-foreground);
    background: var(--color-background);
  }

  h1, h2, h3 { font-weight: 600; }
}

Використання Tailwind утиліт

function Card({ title, children }) {
  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6 shadow-sm">
      <h2 className="text-lg font-bold mb-4">{title}</h2>
      <p className="text-gray-600">{children}</p>
    </div>
  )
}

function Button({ children, variant = 'primary' }) {
  const variants = {
    primary: 'bg-blue-500 text-white hover:bg-blue-600',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300',
    ghost: 'text-gray-700 hover:bg-gray-100',
  }

  return (
    <button className={`px-4 py-2 rounded-md font-medium transition-colors ${variants[variant]}`}>
      {children}
    </button>
  )
}

Tailwind CSS 3 (стабільна версія)

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

// tailwind.config.ts
import type { Config } from 'tailwindcss'

export default {
  content: ['./index.html', './src/**/*.{ts,tsx}'],
  darkMode: ['selector', '[data-theme="dark"]'],
  theme: {
    extend: {
      colors: {
        primary: '#2563eb',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
} satisfies Config

Utility-First CSS прискорює розробку та зменшує розмір CSS bundle.