1 травня 2026 р.

tailwind css необруталізм посібник веб-розробка css

Як побудувати необруталістський сайт на Tailwind CSS v4 (покроково)

Навчіться будувати повноцінний необруталістський сайт з нуля на Tailwind CSS v4. Цей практичний посібник проведе вас через встановлення, налаштування та збірку кожного компонента з прикладами коду, які можна копіювати та вставляти.

Dov Azencot

@DovAzencot

Поділитися в X

Отже, розробники. Побудуймо щось сміливе.

Жодної теорії. Жодної води. Лише ви, я і термінал. До кінця цього посібника у вас буде повністю робочий необруталістський сайт, зібраний на Tailwind CSS v4.

Ідеться про:

Товсті чорні рамки
Жорсткі падаючі тіні
Акценти електричного жовтого
Масивну типографіку
Нульове заокруглення кутів

Це не посібник із серії «ось вам компонент». Ми будуємо цілий лендинг з нуля — hero-секцію, функції, тарифи, футер, усе одразу. Кожен рядок коду пояснений. Кожне дизайн-рішення обґрунтоване.

Беріть каву. Відкривайте термінал. Зануримося в брутальне.

Що ми будуємо

Перш ніж почати, ось що ми створюємо:

Лендинг для вигаданого SaaS-продукту під назвою «BoldTask» — інструмента для керування проєктами, який не схожий на всі інші інструменти для керування проєктами.

Сторінка міститиме:

Hero-секцію з CTA
Картки функцій
Таблицю тарифів
Секцію відгуків
Футер

І все це у фірмовій необруталістській естетиці: сміливо, контрастно й неможливо оминути.

Технічний стек:

Tailwind CSS v4 (найновіша й найкраща версія)
HTML (або React/Next.js, якщо так зручніше)
Google Fonts (Archivo Black + Space Grotesk)

Орієнтовний час: 45-60 хвилин, якщо йти за кроками

Крок 1: підготовка проєкту (5 хвилин)

Почнімо з нуля. Тут ми використовуємо просте HTML-налаштування, але його легко адаптувати під React, Next.js чи будь-який інший фреймворк.

Створіть проєкт

mkdir neobrutalism-website
cd neobrutalism-website

Ініціалізуйте npm і встановіть Tailwind v4

npm init -y
npm install tailwindcss@next @tailwindcss/vite@next

Примітка: ми встановлюємо Tailwind v4 (наразі в беті, але вже достатньо стабільну для продакшену). Тег @next дає вам v4.

Створіть структуру проєкту

mkdir src
touch src/index.html src/styles.css

Структура папок має виглядати так:

neobrutalism-website/
├── src/
│   ├── index.html
│   └── styles.css
├── package.json
└── node_modules/

Крок 2: налаштування Tailwind v4 (3 хвилини)

У Tailwind v4 нова, чистіша система конфігурації. Замість tailwind.config.js усе налаштовується в CSS.

Створіть файл стилів

Відкрийте src/styles.css і додайте:

@import "tailwindcss";
 
/* Tailwind v4 Theme Configuration */
@theme {
  /* Fonts */
  --font-family-sans: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-family-display: 'Archivo Black', ui-sans-serif, system-ui, sans-serif;
 
  /* Colors - Neobrutalist Palette */
  --color-brutal-yellow: #ffdb33;
  --color-brutal-pink: #ff006e;
  --color-brutal-cyan: #00f0ff;
  --color-brutal-black: #000000;
  --color-brutal-white: #ffffff;
  --color-brutal-gray: #e5e5e5;
 
  /* Border Radius - Zero for neobrutalism */
  --radius-none: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
 
  /* Border Widths - Thick */
  --border-width-default: 3px;
  --border-width-thick: 4px;
  --border-width-heavy: 6px;
 
  /* Shadows - Hard offset shadows (no blur) */
  --shadow-brutal-sm: 2px 2px 0 0 var(--color-brutal-black);
  --shadow-brutal: 4px 4px 0 0 var(--color-brutal-black);
  --shadow-brutal-md: 6px 6px 0 0 var(--color-brutal-black);
  --shadow-brutal-lg: 8px 8px 0 0 var(--color-brutal-black);
  --shadow-brutal-xl: 10px 10px 0 0 var(--color-brutal-black);
 
  /* Spacing adjustments */
  --spacing-brutal: 1.5rem;
}
 
/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: var(--font-family-sans);
  background-color: var(--color-brutal-white);
  color: var(--color-brutal-black);
  line-height: 1.6;
}
 
/* Custom Utility Classes */
.border-brutal {
  border: 4px solid var(--color-brutal-black);
}
 
.border-brutal-thick {
  border: 6px solid var(--color-brutal-black);
}
 
.shadow-brutal {
  box-shadow: var(--shadow-brutal);
}
 
.shadow-brutal-lg {
  box-shadow: var(--shadow-brutal-lg);
}
 
.shadow-brutal-xl {
  box-shadow: var(--shadow-brutal-xl);
}
 
/* Hover effect - shadow movement */
.btn-brutal {
  transition: all 0.15s ease;
}
 
.btn-brutal:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--color-brutal-black);
}
 
.btn-brutal:active {
  transform: translate(4px, 4px);
  box-shadow: 0px 0px 0 0 var(--color-brutal-black);
}

Що ми щойно зробили:

Задали власну палітру кольорів (чорний, білий, жовтий, рожевий, блакитний)
Прибрали всі значення border-radius (необруталізм = гострі краї)
Створили утиліти жорстких тіней (зі зсувом, без розмиття)
Додали власні ефекти наведення для кнопок, що імітують «вдавлювання» тіні

Крок 3: структура HTML (5 хвилин)

Створіть базову структуру HTML. Відкрийте src/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BoldTask - Project Management That Doesn't Suck</title>
 
  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
 
  <!-- Tailwind CSS -->
  <link rel="stylesheet" href="/src/styles.css">
</head>
<body>
  <!-- Navigation -->
  <nav class="border-b-4 border-brutal-black bg-brutal-white">
    <div class="max-w-7xl mx-auto px-6 py-4 flex justify-between items-center">
      <div class="text-2xl font-display">BoldTask</div>
      <div class="hidden md:flex gap-8">
        <a href="#features" class="font-bold hover:text-brutal-pink transition-colors">Features</a>
        <a href="#pricing" class="font-bold hover:text-brutal-pink transition-colors">Pricing</a>
        <a href="#about" class="font-bold hover:text-brutal-pink transition-colors">About</a>
      </div>
      <button class="bg-brutal-yellow border-brutal shadow-brutal px-6 py-2 font-bold uppercase btn-brutal">
        Sign Up
      </button>
    </div>
  </nav>
 
  <!-- We'll add more sections here -->
 
  <main>
    <!-- Hero section will go here -->
    <!-- Features section will go here -->
    <!-- Pricing section will go here -->
    <!-- Testimonial section will go here -->
  </main>
 
  <!-- Footer will go here -->
 
</body>
</html>

Налаштуйте сервер розробки

Нам потрібен спосіб дивитися на результат. Візьмімо Vite:


pnpm add vite
npm install vite
yarn add vite
bun add vite

Додайте цей скрипт у свій package.json:

{
  "scripts": {
    "dev": "vite src"
  }
}

Тепер запустіть:


pnpm dev
npm run dev
yarn dev
bun dev

Відкрийте http://localhost:5173 у браузері. Ви маєте побачити базову навігаційну панель із брендингом BoldTask.

Крок 4: збираємо hero-секцію (10 хвилин)

А тепер — зірка шоу. Hero-секція має бути СМІЛИВОЮ.

Додайте це одразу після тега <main>:

<!-- Hero Section -->
<section class="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
  <div class="max-w-6xl w-full">
    <div class="grid md:grid-cols-2 gap-12 items-center">
 
      <!-- Left Column - Text -->
      <div>
        <h1 class="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
          Task Management That Doesn't Bore You to Death
        </h1>
        <p class="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
          Stop using the same gray dashboard as everyone else.
          BoldTask gives you project management with personality.
        </p>
 
        <!-- CTA Buttons -->
        <div class="flex flex-col sm:flex-row gap-4">
          <button class="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Start Free Trial →
          </button>
          <button class="bg-brutal-white border-brutal shadow-brutal-lg
                         px-8 py-4 font-bold text-lg uppercase btn-brutal">
            Watch Demo
          </button>
        </div>
 
        <!-- Social Proof -->
        <div class="mt-12 flex items-center gap-8">
          <div class="text-center">
            <div class="text-4xl font-display">10K+</div>
            <div class="text-sm font-bold">Active Users</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">4.9★</div>
            <div class="text-sm font-bold">User Rating</div>
          </div>
          <div class="h-12 w-1 bg-brutal-black"></div>
          <div class="text-center">
            <div class="text-4xl font-display">24/7</div>
            <div class="text-sm font-bold">Support</div>
          </div>
        </div>
      </div>
 
      <!-- Right Column - Visual Element -->
      <div class="relative">
        <!-- Main Card -->
        <div class="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
          <div class="bg-brutal-pink h-4 w-20 mb-4"></div>
          <div class="h-3 bg-brutal-gray mb-2"></div>
          <div class="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
          <!-- Task Items -->
          <div class="space-y-3">
            <div class="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
              <div class="w-5 h-5 border-brutal bg-brutal-black"></div>
              <div class="h-2 bg-brutal-black w-full"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-4/5"></div>
            </div>
            <div class="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
              <div class="w-5 h-5 border-brutal"></div>
              <div class="h-2 bg-brutal-gray w-3/4"></div>
            </div>
          </div>
        </div>
 
        <!-- Floating accent card -->
        <div class="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                    shadow-brutal-lg p-6 w-40 text-center">
          <div class="text-3xl font-display mb-2">+47</div>
          <div class="text-xs font-bold">Tasks Done Today</div>
        </div>
      </div>
 
    </div>
  </div>
</section>

Що ми зібрали:

Жовтий фон на весь екран (миттєвий ефект)
Гігантський заголовок на Archivo Black
Блок контенту з товстою рамкою та жорсткою тінню
CTA з ефектами наведення (тінь зсувається під час наведення)
Метрики соціального доказу
Візуальний макет продукту (абстрактне представлення)
Плаваючу акцентну картку для глибини

Дизайн-рішення:

Жовтий фон = висока енергія, неможливо оминути
Білий блок контенту = створює контраст та ієрархію
Чорний CTA на жовтому = максимальна помітність
Плаваюча блакитна картка = додає асиметрію (необруталістський принцип)

Крок 5: секція функцій (10 хвилин)

Зберімо картки функцій. Додайте це після hero-секції:

<!-- Features Section -->
<section class="bg-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Why BoldTask?
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-3xl mx-auto">
        Because your productivity tool shouldn't put you to sleep
      </p>
    </div>
 
    <!-- Feature Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Feature 1 -->
      <div class="bg-brutal-pink text-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">⚡</div>
        <h3 class="font-display text-2xl uppercase mb-4">Lightning Fast</h3>
        <p class="font-bold">
          No lag. No loading. No waiting. Your tasks appear instantly
          because we don't bloat our code with unnecessary animations.
        </p>
      </div>
 
      <!-- Feature 2 -->
      <div class="bg-brutal-cyan border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🎨</div>
        <h3 class="font-display text-2xl uppercase mb-4">Actually Unique</h3>
        <p class="font-bold">
          Tired of boring dashboards? We built something you'll actually
          want to open. Bold colors, zero BS.
        </p>
      </div>
 
      <!-- Feature 3 -->
      <div class="bg-brutal-yellow border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🔒</div>
        <h3 class="font-display text-2xl uppercase mb-4">Privacy First</h3>
        <p class="font-bold">
          Your data stays yours. No tracking. No selling. No corporate
          surveillance. Just your tasks, secured.
        </p>
      </div>
 
      <!-- Feature 4 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">📱</div>
        <h3 class="font-display text-2xl uppercase mb-4">Mobile Ready</h3>
        <p class="font-bold">
          Works on your phone, tablet, or desktop. Same bold design,
          same fast performance everywhere.
        </p>
      </div>
 
      <!-- Feature 5 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">🤝</div>
        <h3 class="font-display text-2xl uppercase mb-4">Team Friendly</h3>
        <p class="font-bold">
          Invite your team. Assign tasks. Track progress. All without
          the corporate bloat of "enterprise" tools.
        </p>
      </div>
 
      <!-- Feature 6 -->
      <div class="bg-brutal-white border-brutal-thick shadow-brutal-lg p-8
                  hover:-translate-y-2 transition-transform">
        <div class="text-6xl font-display mb-4">💰</div>
        <h3 class="font-display text-2xl uppercase mb-4">Fair Pricing</h3>
        <p class="font-bold">
          No hidden fees. No "contact sales." Just honest pricing that
          makes sense. Pay for what you use.
        </p>
      </div>
 
    </div>
  </div>
</section>

Що ми зібрали:

6 карток функцій в адаптивній сітці
Кольорові блоки (рожевий, блакитний, жовтий, білий) для візуального інтересу
Емодзі-іконки (прості, грайливі, у дусі бренду)
Ефект наведення (картки піднімаються)
Однакові товсті рамки й жорсткі тіні

Патерн дизайну: Помітили, що перші три картки використовують акцентні кольори (рожевий, блакитний, жовтий), а нижні три — білий? Це створює візуальну ієрархію — верхній ряд отримує більше уваги.

Крок 6: секція тарифів (12 хвилин)

Таблиці тарифів критично важливі. Зробімо їх такими, щоб їх неможливо було пропустити:

<!-- Pricing Section -->
<section id="pricing" class="bg-brutal-black text-brutal-white py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        Simple Pricing
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        No tricks. No hidden costs. Just pick a plan and start shipping.
      </p>
    </div>
 
    <!-- Pricing Grid -->
    <div class="grid md:grid-cols-3 gap-8">
 
      <!-- Free Plan -->
      <div class="bg-brutal-white text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2 text-gray-600">For Individuals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Free</h3>
          <div class="text-5xl font-display mb-2">$0</div>
          <div class="text-sm font-bold text-gray-600">Forever free</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Up to 10 projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-yellow text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Team collaboration</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-gray-400 text-xl">✗</span>
            <span class="font-bold text-gray-400">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-white border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Start Free
        </button>
      </div>
 
      <!-- Pro Plan (Highlighted) -->
      <div class="bg-brutal-yellow text-brutal-black border-brutal-thick shadow-brutal-xl p-8
                  relative transform md:-translate-y-4">
        <!-- Popular Badge -->
        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-brutal-pink text-brutal-white
                    border-brutal px-6 py-2 font-bold uppercase text-sm">
          Most Popular
        </div>
 
        <div class="mb-6 mt-4">
          <div class="text-sm font-bold uppercase mb-2">For Professionals</div>
          <h3 class="font-display text-4xl uppercase mb-4">Pro</h3>
          <div class="text-5xl font-display mb-2">$12</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited projects</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited tasks</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Mobile apps</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Team collaboration (5 members)</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Pro →
        </button>
      </div>
 
      <!-- Team Plan -->
      <div class="bg-brutal-cyan text-brutal-black border-brutal-thick shadow-brutal-lg p-8">
        <div class="mb-6">
          <div class="text-sm font-bold uppercase mb-2">For Teams</div>
          <h3 class="font-display text-4xl uppercase mb-4">Team</h3>
          <div class="text-5xl font-display mb-2">$29</div>
          <div class="text-sm font-bold">Per month</div>
        </div>
 
        <ul class="space-y-3 mb-8">
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Everything in Pro</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Unlimited team members</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Advanced analytics</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">Custom integrations</span>
          </li>
          <li class="flex items-start gap-3">
            <span class="text-brutal-black text-xl">✓</span>
            <span class="font-bold">24/7 priority support</span>
          </li>
        </ul>
 
        <button class="w-full bg-brutal-black text-brutal-cyan border-brutal shadow-brutal
                       px-6 py-3 font-bold uppercase btn-brutal">
          Get Team
        </button>
      </div>
 
    </div>
 
    <!-- Money Back Guarantee -->
    <div class="mt-16 text-center">
      <div class="inline-block bg-brutal-yellow text-brutal-black border-brutal-thick
                  shadow-brutal-lg px-8 py-4 font-bold text-lg">
        💰 30-Day Money Back Guarantee - No Questions Asked
      </div>
    </div>
 
  </div>
</section>

Що ми зібрали:

Три тарифні рівні з чіткими відмінностями
Кольорове кодування (білий = безкоштовний, жовтий = популярний, блакитний = преміум)
Центральну картку — підняту та більшу (привертає увагу до рекомендованого плану)
Бейдж «Most Popular» на плані Pro
Позначки функцій (✓ і ✗) для ясності
Гарантію повернення грошей для довіри

Стратегія дизайну:

Чорний фон змушує кольорові картки ВИРІЗНЯТИСЯ
Трохи піднята центральна картка створює візуальну ієрархію
Однакове розташування CTA спрощує порівняння
Різнокольорові CTA збігаються з фоном картки

Крок 7: секція відгуків (8 хвилин)

Соціальний доказ продає. Додаймо відгуки:

<!-- Testimonial Section -->
<section class="bg-brutal-gray py-20 px-6">
  <div class="max-w-7xl mx-auto">
 
    <!-- Section Header -->
    <div class="text-center mb-16">
      <h2 class="font-display text-5xl md:text-7xl uppercase mb-6">
        People Love It
      </h2>
      <p class="text-xl md:text-2xl font-bold max-w-2xl mx-auto">
        Don't take our word for it. Here's what actual users say.
      </p>
    </div>
 
    <!-- Testimonials Grid -->
    <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
 
      <!-- Testimonial 1 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Finally, a task manager that doesn't look like it was designed
          by accountants. BoldTask actually makes me WANT to check my tasks."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-pink border-brutal"></div>
          <div>
            <div class="font-bold">Sarah Chen</div>
            <div class="text-sm text-gray-600">Product Designer</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 2 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "I switched from Asana and never looked back. BoldTask is faster,
          cleaner, and way more fun to use. Plus it's actually affordable."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-cyan border-brutal"></div>
          <div>
            <div class="font-bold">Marcus Rodriguez</div>
            <div class="text-sm text-gray-600">Startup Founder</div>
          </div>
        </div>
      </div>
 
      <!-- Testimonial 3 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow text-2xl mb-4">★★★★★</div>
        <p class="font-bold mb-6 text-lg">
          "Our whole team uses it now. The bold design actually helps us
          stay focused. Weird but true."
        </p>
        <div class="flex items-center gap-3">
          <div class="w-12 h-12 bg-brutal-yellow border-brutal"></div>
          <div>
            <div class="font-bold">Priya Kapoor</div>
            <div class="text-sm text-gray-600">Engineering Manager</div>
          </div>
        </div>
      </div>
 
    </div>
  </div>
</section>

Що ми зібрали:

Три картки відгуків з однаковим оформленням
Зіркові рейтинги (жовтий = увага)
Аватари користувачів (абстрактні кольорові квадрати замість фото)
Імена та посади для переконливості

Чому абстрактні аватари? Справжні фото можуть відчуватися корпоративно. Кольорові квадрати зберігають грайливу геометричну необруталістську естетику.

Крок 8: футер (5 хвилин)

Кожному сайту потрібен футер. Зробімо наш сміливим:

<!-- Footer -->
<footer class="bg-brutal-black text-brutal-white border-t-4 border-brutal-white py-12 px-6">
  <div class="max-w-7xl mx-auto">
 
    <div class="grid md:grid-cols-4 gap-12 mb-12">
 
      <!-- Brand -->
      <div>
        <div class="font-display text-3xl mb-4">BoldTask</div>
        <p class="font-bold text-gray-300">
          Project management that doesn't suck.
        </p>
      </div>
 
      <!-- Product Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Product</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Features</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Pricing</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Roadmap</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Changelog</a></li>
        </ul>
      </div>
 
      <!-- Company Links -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Company</h4>
        <ul class="space-y-2">
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">About</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Blog</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Careers</a></li>
          <li><a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Contact</a></li>
        </ul>
      </div>
 
      <!-- Newsletter -->
      <div>
        <h4 class="font-display text-lg uppercase mb-4">Stay Updated</h4>
        <p class="font-bold mb-4 text-gray-300">Get updates about new features.</p>
        <div class="flex gap-2">
          <input
            type="email"
            placeholder="Your email"
            class="flex-1 bg-brutal-white text-brutal-black border-brutal px-4 py-2
                   font-bold placeholder:text-gray-400"
          />
          <button class="bg-brutal-yellow text-brutal-black border-brutal shadow-brutal
                         px-4 py-2 font-bold uppercase btn-brutal">
            →
          </button>
        </div>
      </div>
 
    </div>
 
    <!-- Bottom Bar -->
    <div class="border-t-2 border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
      <div class="font-bold text-gray-400">
        © 2026 BoldTask. All rights reserved.
      </div>
      <div class="flex gap-6">
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Privacy</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Terms</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">Twitter</a>
        <a href="#" class="font-bold hover:text-brutal-yellow transition-colors">GitHub</a>
      </div>
    </div>
 
  </div>
</footer>

Що ми зібрали:

Футер у чотири колонки
Бренд, навігацію та підписку на розсилку
Ефекти наведення (посилання стають жовтими)
Поле email з брутальним оформленням
Нижній рядок із копірайтом

Крок 9: додаємо лиск та інтерактивність (5 хвилин)

Додаймо фінальні штрихи, щоб сайт відчувався відполірованим.

Плавне прокручування

Додайте це у свій src/styles.css:

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}
 
/* Custom scrollbar (optional but on-brand) */
::-webkit-scrollbar {
  width: 12px;
}
 
::-webkit-scrollbar-track {
  background: var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb {
  background: var(--color-brutal-black);
  border: 2px solid var(--color-brutal-gray);
}
 
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brutal-yellow);
}

Перемикач мобільного меню

Додайте цей JavaScript перед закривним тегом </body>:

<script>
  // Mobile menu toggle
  const mobileMenuButton = document.createElement('button');
  mobileMenuButton.className = 'md:hidden border-brutal bg-brutal-yellow px-4 py-2 font-bold';
  mobileMenuButton.textContent = 'MENU';
 
  const nav = document.querySelector('nav > div');
  const navLinks = nav.querySelector('.hidden');
 
  // This is a simple example - you'd want to make this more robust
  mobileMenuButton.addEventListener('click', () => {
    navLinks.classList.toggle('hidden');
    navLinks.classList.toggle('flex');
  });
 
  // Add button to nav (you'd do this more elegantly in production)
</script>

Оптимізація продуктивності

Додайте ці мета-теги у свій <head>:

<!-- Preload critical fonts -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap">
 
<!-- Meta tags for SEO and social -->
<meta name="description" content="BoldTask - Project management that doesn't suck. Bold design, fast performance, fair pricing.">
<meta property="og:title" content="BoldTask - Project Management That Doesn't Suck">
<meta property="og:description" content="Stop using boring task managers. BoldTask gives you project management with personality.">
<meta property="og:image" content="/og-image.png">
<meta name="twitter:card" content="summary_large_image">

Крок 10: тестування та доопрацювання (5 хвилин)

Тепер протестуйте свій сайт:

Тестування адаптивності

Відкрийте DevTools (F12) і перевірте ці брейкпоінти:

Мобільний (375px)
Планшет (768px)
Десктоп (1280px)

Переконайтеся, що:

текст читається на всіх розмірах
кнопки зручно натискати на мобільному (висота хоча б 44px)
сіткові макети коректно перебудовуються
тіні не обрізаються на маленьких екранах

Перевірка доступності

Пройдіться цим чек-листом:

усі інтерактивні елементи доступні з клавіатури (пройдіть сторінкою через Tab)
контраст кольорів відповідає стандартам WCAG AA (чорний на білому ✓, жовтий на білому ✓)
у зображень є alt-текст (тут ми використали div, але якщо додаєте зображення, додавайте alt)
у полів форм є підписи
стани фокуса видно

Перевірка продуктивності

Відкрийте Lighthouse у Chrome DevTools і запустіть аудит. Ви маєте побачити:

Продуктивність: 90+ (мінімум CSS, жодних важких фреймворків)
Доступність: 90+ (високий контраст, семантичний HTML)
Найкращі практики: 90+
SEO: 90+

Якщо бали низькі, ось часті виправлення:

Додайте width і height до зображень
Мініфікуйте CSS у продакшені
Увімкніть заголовки кешування
Стисніть зображення

Бонус: перехід на React/Next.js

Хочете використати це в застосунку React? Ось як перенести hero-секцію:

// components/Hero.tsx
export default function Hero() {
  return (
    <section className="bg-brutal-yellow min-h-screen flex items-center justify-center px-6 py-20">
      <div className="max-w-6xl w-full">
        <div className="grid md:grid-cols-2 gap-12 items-center">
 
          {/* Left Column */}
          <div>
            <h1 className="font-display text-6xl md:text-8xl uppercase leading-none mb-6">
              Task Management That Doesn't Bore You to Death
            </h1>
            <p className="text-xl md:text-2xl font-bold mb-8 bg-brutal-white border-brutal shadow-brutal-lg p-6">
              Stop using the same gray dashboard as everyone else.
              BoldTask gives you project management with personality.
            </p>
 
            <div className="flex flex-col sm:flex-row gap-4">
              <button className="bg-brutal-black text-brutal-yellow border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Start Free Trial →
              </button>
              <button className="bg-brutal-white border-brutal shadow-brutal-lg
                               px-8 py-4 font-bold text-lg uppercase btn-brutal">
                Watch Demo
              </button>
            </div>
 
            {/* Social Proof */}
            <div className="mt-12 flex items-center gap-8">
              <div className="text-center">
                <div className="text-4xl font-display">10K+</div>
                <div className="text-sm font-bold">Active Users</div>
              </div>
              <div className="h-12 w-1 bg-brutal-black"></div>
              <div className="text-center">
                <div className="text-4xl font-display">4.9★</div>
                <div className="text-sm font-bold">User Rating</div>
              </div>
            </div>
          </div>
 
          {/* Right Column - Visual */}
          <div className="relative">
            <div className="bg-brutal-white border-brutal-thick shadow-brutal-xl p-8 relative z-10">
              {/* Task mockup */}
              <div className="bg-brutal-pink h-4 w-20 mb-4"></div>
              <div className="h-3 bg-brutal-gray mb-2"></div>
              <div className="h-3 bg-brutal-gray w-3/4 mb-6"></div>
 
              <div className="space-y-3">
                <div className="flex items-center gap-3 p-3 bg-brutal-yellow border-brutal">
                  <div className="w-5 h-5 border-brutal bg-brutal-black"></div>
                  <div className="h-2 bg-brutal-black w-full"></div>
                </div>
                <div className="flex items-center gap-3 p-3 bg-brutal-white border-brutal">
                  <div className="w-5 h-5 border-brutal"></div>
                  <div className="h-2 bg-brutal-gray w-4/5"></div>
                </div>
              </div>
            </div>
 
            <div className="absolute -bottom-8 -right-8 bg-brutal-cyan border-brutal-thick
                          shadow-brutal-lg p-6 w-40 text-center">
              <div className="text-3xl font-display mb-2">+47</div>
              <div className="text-xs font-bold">Tasks Done Today</div>
            </div>
          </div>
 
        </div>
      </div>
    </section>
  );
}

Потім у своєму tailwind.config.ts:

import type { Config } from 'tailwindcss'
 
const config: Config = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
    './app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-space-grotesk)', 'sans-serif'],
        display: ['var(--font-archivo-black)', 'sans-serif'],
      },
      colors: {
        'brutal-yellow': '#ffdb33',
        'brutal-pink': '#ff006e',
        'brutal-cyan': '#00f0ff',
        'brutal-black': '#000000',
        'brutal-white': '#ffffff',
        'brutal-gray': '#e5e5e5',
      },
      boxShadow: {
        'brutal-sm': '2px 2px 0 0 #000',
        'brutal': '4px 4px 0 0 #000',
        'brutal-lg': '6px 6px 0 0 #000',
        'brutal-xl': '8px 8px 0 0 #000',
      },
      borderWidth: {
        'brutal': '4px',
        'brutal-thick': '6px',
      },
    },
  },
  plugins: [],
}
 
export default config

Часті помилки та як їх уникнути

Побудувавши десятки необруталістських сайтів, ось підводні камені, які трапляються найчастіше:

1. Непослідовна товщина рамок

Помилка: рамки 2px на одних елементах, 5px на інших, 3px десь ще.

Рішення: оберіть 2-3 значення товщини (наприклад, 3px стандартно, 4px для акцентів, 6px для головних елементів) і дотримуйтеся їх усюди.

2. Забути про зсуви тіней на мобільних

Помилка: зсуви тіней 10px на мобільних, які обрізаються або створюють горизонтальне прокручування.

Рішення: використовуйте адаптивні утиліти тіней:

.card {
  box-shadow: 4px 4px 0 0 #000;
}
 
@media (min-width: 768px) {
  .card {
    box-shadow: 8px 8px 0 0 #000;
  }
}

3. Забагато акцентних кольорів

Помилка: використовувати 5+ кольорів у впевненості, що «більше = брутальніше».

Рішення: тримайтеся чорного + білого + максимум 2-3 акцентних кольори. Наша палітра використовує жовтий, рожевий і блакитний — і це вже на межі.

4. Нехтувати доступністю

Помилка: жовтий текст на білому фоні (нечитабельно), немає станів фокуса, слабкий контраст.

Рішення: завжди перевіряйте контраст. Використовуйте чорний текст на жовтому/білому фоні, білий текст на чорному/темному фоні.

5. М’які тіні, що прокрадаються

Помилка: випадково використати стандартні тіні Tailwind (shadow-lg), у яких є розмиття.

Рішення: створіть власні утиліти тіней і за потреби вимкніть стандартні.

Подальші кроки та ресурси

Вітаємо. Ви щойно побудували повноцінний необруталістський сайт з нуля.

Що робити далі

1. Задеплойте

# Build for production
npm run build
 
# Deploy to Vercel, Netlify, or wherever

2. Додайте функціональність

Підключіть форму розсилки до сервісу (ConvertKit, Mailchimp)
Реалізуйте CTA тарифів через Stripe
Додайте аналітику (Plausible, Fathom)

3. Розширте дизайн-систему

Створіть більше компонентів (модалки, випадні списки, тултипи)
Зберіть додаткові сторінки (про нас, блог, контакти)
Додайте темну тему (необруталізм чудово працює й у темній темі)

4. Оптимізуйте далі

Мініфікуйте CSS і HTML
Додайте оптимізацію зображень
Впровадьте стратегії кешування
Розгляньте генератор статичних сайтів для ще кращої продуктивності

Корисні ресурси

Натхнення для дизайну:

Brutalist Websites - Підібрана колекція
Gumroad - Необруталізм, зроблений правильно
Feastables - Грайлива необруталістська електронна торгівля

Інструменти:

Neobrutalism - Готові необруталістські компоненти
Tailwind CSS v4 Docs - Офіційна документація
Google Fonts - Безкоштовні шрифти (Archivo Black, Space Grotesk)

Генератори палітр кольорів:

Coolors - Генерація колірних схем
Adobe Color - Колірне коло та інструменти для палітр

Наостанок

Ви щойно побудували необруталістський сайт від нуля до деплою менш ніж за годину. Це справді вражає.

Ключові висновки:

Необруталізм = товсті рамки + жорсткі тіні + сміливі кольори + нульовий border-radius
Директива @theme у Tailwind v4 робить кастомізацію чистішою
Послідовність критично важлива (товщина рамок, тіні, кольори)
Доступність досі важлива (високий контраст допомагає)
Почніть із міцної дизайн-системи, а потім будуйте компоненти

Цей сайт — не просто демо, а шаблон, який можна адаптувати під реальні проєкти. Змінюйте кольори, підставляйте шрифти, підлаштовуйте тіні, робіть його своїм.

Що найприємніше в необруталізмі? Він усе прощає. Недосконалість — частина естетики. Трохи з’їхала рамка або елемент не по центру? Це не баг, це характер.

А тепер ідіть і побудуйте щось сміливе, що не схоже на чужі портфоліо/SaaS/лендинги.

А якщо хочете готові компоненти, щоб рухатися ще швидше, погляньте на Neobrutalism. Це та сама естетика, запакована в компоненти для копіювання та вставки.

Приємної збірки. 🚀

Маєте питання? Залиште коментар або напишіть у Twitter. Мені дуже подобається бачити, що люди будують у цьому стилі.

Хочете повний код? Цілий HTML-файл доступний як GitHub Gist (посилання в коментарях).

Виявилося корисним? Поділіться з розробником, якому треба вирватися з пастки нудного дизайну.

← Назад до статей

Як побудувати необруталістський сайт на Tailwind CSS v4 (покроково)

Що ми будуємо

Крок 1: підготовка проєкту (5 хвилин)

Створіть проєкт

Ініціалізуйте npm і встановіть Tailwind v4

Створіть структуру проєкту

Крок 2: налаштування Tailwind v4 (3 хвилини)

Створіть файл стилів

Крок 3: структура HTML (5 хвилин)

Налаштуйте сервер розробки

Крок 4: збираємо hero-секцію (10 хвилин)

Крок 5: секція функцій (10 хвилин)

Крок 6: секція тарифів (12 хвилин)

Крок 7: секція відгуків (8 хвилин)

Крок 8: футер (5 хвилин)

Крок 9: додаємо лиск та інтерактивність (5 хвилин)

Плавне прокручування

Перемикач мобільного меню

Оптимізація продуктивності

Крок 10: тестування та доопрацювання (5 хвилин)

Тестування адаптивності

Перевірка доступності

Перевірка продуктивності

Бонус: перехід на React/Next.js

Часті помилки та як їх уникнути

1. Непослідовна товщина рамок

2. Забути про зсуви тіней на мобільних

3. Забагато акцентних кольорів

4. Нехтувати доступністю

5. М’які тіні, що прокрадаються

Подальші кроки та ресурси

Що робити далі

Корисні ресурси

Наостанок

20 необруталістських палітр кольорів із hex-кодами (готові до копіювання)

Як перевести будь-який проєкт React на необруталізм за 10 хвилин

Необруталізм проти мінімалізму: коли використовувати кожен (і коли не варто)

Як побудувати необруталістський сайт на Tailwind CSS v4 (покроково)

Що ми будуємо

Крок 1: підготовка проєкту (5 хвилин)

Створіть проєкт

Ініціалізуйте npm і встановіть Tailwind v4

Створіть структуру проєкту

Крок 2: налаштування Tailwind v4 (3 хвилини)

Створіть файл стилів

Крок 3: структура HTML (5 хвилин)

Налаштуйте сервер розробки

Крок 4: збираємо hero-секцію (10 хвилин)

Крок 5: секція функцій (10 хвилин)

Крок 6: секція тарифів (12 хвилин)

Крок 7: секція відгуків (8 хвилин)

Крок 8: футер (5 хвилин)

Крок 9: додаємо лиск та інтерактивність (5 хвилин)

Плавне прокручування

Перемикач мобільного меню

Оптимізація продуктивності

Крок 10: тестування та доопрацювання (5 хвилин)

Тестування адаптивності

Перевірка доступності

Перевірка продуктивності

Бонус: перехід на React/Next.js

Часті помилки та як їх уникнути

1. Непослідовна товщина рамок

2. Забути про зсуви тіней на мобільних

3. Забагато акцентних кольорів

4. Нехтувати доступністю

5. М’які тіні, що прокрадаються

Подальші кроки та ресурси

Що робити далі

Корисні ресурси

Наостанок

Читайте також

20 необруталістських палітр кольорів із hex-кодами (готові до копіювання)

Як перевести будь-який проєкт React на необруталізм за 10 хвилин

Необруталізм проти мінімалізму: коли використовувати кожен (і коли не варто)