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 минут

Необрутализм против минимализма: когда использовать каждый (и когда не стоит)