1 de maio de 2026

tailwind css neobrutalismo tutorial desenvolvimento web css

Como criar um site neobrutalista com Tailwind CSS v4 (passo a passo)

Aprenda a criar um site neobrutalista completo do zero com Tailwind CSS v4. Este tutorial prático acompanha você pela instalação, configuração e construção de cada componente, com exemplos de código que você pode copiar e colar.

Dov Azencot

@DovAzencot

Compartilhar no X

Muito bem, desenvolvedores. Vamos construir algo ousado.

Nada de teoria. Nada de enrolação. Só você, eu e um terminal. Ao terminar este tutorial, você terá um site neobrutalista totalmente funcional, construído com Tailwind CSS v4.

Estamos falando de:

Bordas pretas grossas
Sombras projetadas duras
Acentos de amarelo elétrico
Tipografia maciça
Zero cantos arredondados

Isto não é um tutorial do tipo "aqui está um componente". Vamos construir uma landing page inteira do zero: seção hero, funcionalidades, planos, rodapé, tudo. Cada linha de código explicada. Cada decisão de design justificada.

Pegue o seu café. Abra o seu terminal. Vamos ficar brutais.

O que vamos construir

Antes de começar, veja o que vamos criar:

Uma landing page para um produto SaaS fictício chamado "BoldTask": uma ferramenta de gestão de projetos que não se parece com todas as outras ferramentas de gestão de projetos.

A página vai incluir:

Uma seção hero com CTA
Cards de funcionalidades
Uma tabela de planos
Uma seção de depoimentos
Um rodapé

Tudo com aquela estética neobrutalista tão característica: ousada, de alto contraste e impossível de ignorar.

Stack técnico:

Tailwind CSS v4 (a última e melhor versão)
HTML (ou React/Next.js se você preferir)
Google Fonts (Archivo Black + Space Grotesk)

Tempo estimado: de 45 a 60 minutos se você acompanhar o processo

Passo 1: preparar o projeto (5 minutos)

Vamos começar do zero. Uso uma configuração de HTML simples neste tutorial, mas você pode adaptá-lo facilmente para React, Next.js ou qualquer framework.

Crie o seu projeto

mkdir neobrutalism-website
cd neobrutalism-website

Inicialize o npm e instale o Tailwind v4

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

Observação: instalamos o Tailwind v4 (por enquanto em beta, mas já estável o bastante para produção). A tag @next te dá a v4.

Crie a estrutura do projeto

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

A sua estrutura de pastas deve ficar assim:

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

Passo 2: configurar o Tailwind v4 (3 minutos)

O Tailwind v4 traz um sistema de configuração novo e mais limpo. Em vez de tailwind.config.js, agora tudo é configurado no CSS.

Crie o seu arquivo de estilos

Abra o src/styles.css e adicione:

@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);
}

O que acabamos de fazer:

Definir uma paleta de cores personalizada (preto, branco, amarelo, rosa, ciano)
Eliminar todos os valores de border-radius (neobrutalismo = bordas afiadas)
Criar utilitários de sombra dura (deslocadas, sem desfoque)
Adicionar efeitos de hover personalizados para os botões que imitam o "afundar" da sombra

Passo 3: a estrutura HTML (5 minutos)

Crie a estrutura HTML básica. Abra o 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>

Configure o servidor de desenvolvimento

Precisamos de uma forma de visualizar o nosso trabalho. Vamos usar o Vite:


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

Adicione este script ao seu package.json:

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

Agora execute:


pnpm dev
npm run dev
yarn dev
bun dev

Abra http://localhost:5173 no seu navegador. Você deve ver uma barra de navegação básica com a marca BoldTask.

Passo 4: construir a seção hero (10 minutos)

Agora, a estrela do espetáculo. A seção hero precisa ser OUSADA.

Adicione isto logo após a tag <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>

O que construímos:

Um fundo amarelo em tela cheia (impacto imediato)
Um título enorme com Archivo Black
Uma caixa de conteúdo com borda grossa e sombra dura
CTAs com efeitos de hover (a sombra se move quando você passa o cursor)
Métricas de prova social
Uma maquete visual do produto (representação abstrata)
Um card de acento flutuante para dar profundidade

As decisões de design:

Fundo amarelo = energia alta, impossível de ignorar
Caixa de conteúdo branca = cria contraste e hierarquia
CTA preto sobre amarelo = visibilidade máxima
Card ciano flutuante = adiciona assimetria (um princípio neobrutalista)

Passo 5: a seção de funcionalidades (10 minutos)

Vamos construir os cards de funcionalidades. Adicione isto depois da seção 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>

O que construímos:

6 cards de funcionalidades em uma grade responsiva
Aplicação de blocos de cor (rosa, ciano, amarelo, branco) para dar interesse visual
Ícones emoji (simples, descontraídos, alinhados com a marca)
Efeito de hover (os cards se elevam ao passar o cursor)
Bordas grossas e sombras duras, sempre coerentes

O padrão de design: Repare como os três primeiros cards usam cores de acento (rosa, ciano, amarelo), enquanto os três de baixo são brancos? Isso cria uma hierarquia visual: a linha de cima capta mais atenção.

Passo 6: a seção de planos (12 minutos)

As tabelas de planos são cruciais. Vamos torná-las impossíveis de ignorar:

<!-- 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>

O que construímos:

Três níveis de planos claramente diferenciados
Um código de cor (branco = grátis, amarelo = popular, ciano = premium)
O card central, elevado e maior (atrai a atenção para o plano recomendado)
Um selo "Most Popular" no plano Pro
Marcações de funcionalidades (✓ e ✗) para maior clareza
Uma garantia de devolução do dinheiro, para gerar confiança

A estratégia de design:

O fundo preto faz os cards de cor SALTAREM
O card central, ligeiramente elevado, cria hierarquia visual
Colocar o CTA sempre no mesmo lugar facilita a comparação
Cada CTA de cor combina com o fundo do seu card

Passo 7: a seção de depoimentos (8 minutos)

A prova social vende. Vamos adicionar depoimentos:

<!-- 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>

O que construímos:

Três cards de depoimentos com um estilo homogêneo
Avaliações com estrelas (amarelo = atenção)
Avatares de usuário (quadrados de cor abstratos em vez de fotos)
Nomes e cargos, para dar credibilidade

Por que avatares abstratos? Fotos reais podem dar um ar corporativo. Os quadrados de cor mantêm a estética neobrutalista descontraída e geométrica.

Passo 8: o rodapé (5 minutos)

Todo site precisa de um rodapé. Vamos fazer o nosso com caráter:

<!-- 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>

O que construímos:

Um rodapé de quatro colunas
A marca, a navegação e a inscrição na newsletter
Efeitos de hover (os links ficam amarelos)
Um campo de e-mail com estilo brutal
Uma barra de copyright na parte inferior

Passo 9: adicionar polimento e interações (5 minutos)

Vamos adicionar alguns toques finais para que o site pareça polido.

Rolagem suave

Adicione isto ao seu 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);
}

Adicione este JavaScript antes da tag de fechamento </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>

Otimização do desempenho

Adicione estas meta tags ao seu <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">

Passo 10: testes e ajustes (5 minutos)

Agora teste o seu site:

Testes de responsividade

Abra as DevTools (F12) e teste estes breakpoints:

Mobile (375px)
Tablet (768px)
Desktop (1280px)

Garanta que:

O texto seja legível em todos os tamanhos
Os botões possam ser tocados no celular (pelo menos 44px de altura)
As grades se reorganizem corretamente
As sombras não sejam cortadas em telas pequenas

Verificação de acessibilidade

Revise esta lista de conferência:

Todos os elementos interativos são acessíveis pelo teclado (percorra a página com Tab)
O contraste de cor atende aos critérios WCAG AA (preto sobre branco ✓, amarelo sobre branco ✓)
As imagens têm texto alternativo (aqui usamos divs, mas se você adicionar imagens, adicione o alt)
Os campos de formulário têm rótulos
Os estados de focus são visíveis

Verificação de desempenho

Abra o Lighthouse nas DevTools do Chrome e execute uma auditoria. Você deve ver:

Desempenho: 90+ (pouco CSS, sem frameworks pesados)
Acessibilidade: 90+ (alto contraste, HTML semântico)
Boas práticas: 90+
SEO: 90+

Se as pontuações estiverem baixas, correções comuns:

Adicione width e height às imagens
Minifique o CSS em produção
Ative os cabeçalhos de cache
Comprima as imagens

Bônus: passar para React/Next.js

Quer usar isto em um app React? Veja como converter a seção 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>
  );
}

Depois, no seu 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

Erros comuns e como evitá-los

Depois de construir dezenas de sites neobrutalistas, estes são os tropeços que vejo com mais frequência:

1. Larguras de borda inconsistentes

O erro: usar bordas de 2px em alguns elementos, de 5px em outros e de 3px em algum outro lugar.

A solução: escolha 2 ou 3 larguras de borda (por exemplo, 3px padrão, 4px para o ênfase, 6px para os elementos principais) e respeite-as do começo ao fim.

2. Esquecer os deslocamentos de sombra no celular

O erro: deslocamentos de sombra de 10px no celular que são cortados ou provocam rolagem horizontal.

A solução: use utilitários de sombra responsivos:

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

3. Cores de acento demais

O erro: usar 5 cores ou mais achando que "mais = mais brutal".

A solução: fique com preto + branco + 2 ou 3 cores de acento no máximo. A nossa paleta usa amarelo, rosa e ciano, e isso já está no limite.

4. Negligenciar a acessibilidade

O erro: texto amarelo sobre fundo branco (ilegível), sem estados de focus, contraste pobre.

A solução: teste sempre o contraste. Use texto preto sobre fundos amarelos/brancos e texto branco sobre fundos pretos/escuros.

5. Sombras suaves que se infiltram

O erro: usar sem querer as sombras padrão do Tailwind (shadow-lg), que têm desfoque.

A solução: crie utilitários de sombra personalizados e desative as sombras padrão se precisar.

Próximos passos e recursos

Parabéns. Você acabou de construir um site neobrutalista completo do zero.

O que fazer em seguida

1. Faça o deploy

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

2. Adicione funcionalidade

Conecte o formulário de newsletter a um serviço (ConvertKit, Mailchimp)
Implemente os CTAs de planos com o Stripe
Adicione analytics (Plausible, Fathom)

3. Amplie o design system

Crie mais componentes (modais, menus suspensos, tooltips)
Construa páginas adicionais (sobre, blog, contato)
Adicione modo escuro (o neobrutalismo também funciona muito bem no modo escuro)

4. Otimize ainda mais

Minifique o CSS e o HTML
Adicione otimização de imagens
Implemente estratégias de cache
Considere um gerador de sites estáticos para um desempenho ainda melhor

Recursos úteis

Inspiração de design:

Brutalist Websites - Uma coleção selecionada
Gumroad - O neobrutalismo bem feito
Feastables - Um e-commerce neobrutalista e descontraído

Ferramentas:

Neobrutalism - Componentes neobrutalistas prontos para usar
Tailwind CSS v4 Docs - A documentação oficial
Google Fonts - Fontes gratuitas (Archivo Black, Space Grotesk)

Geradores de paletas de cores:

Coolors - Gera combinações de cores
Adobe Color - Círculo cromático e ferramentas de paletas

Considerações finais

Você acabou de construir um site neobrutalista, do zero ao deploy, em menos de uma hora. Isso é realmente impressionante.

Pontos-chave:

Neobrutalismo = bordas grossas + sombras duras + cores ousadas + zero border-radius
A diretiva @theme do Tailwind v4 deixa a personalização mais limpa
A coerência é crucial (larguras de borda, sombras, cores)
A acessibilidade continua importando (o alto contraste ajuda)
Comece com um design system sólido e depois construa os componentes

Este site não é só uma demo: é um template que você pode adaptar a projetos reais. Mude as cores, troque as fontes, ajuste as sombras, faça-o seu.

O melhor do neobrutalismo? Ele perdoa tudo. A imperfeição faz parte da estética. Aquela borda um pouco desalinhada ou aquele elemento meio descentralizado? Não é um bug, é caráter.

Agora vá construir algo ousado que não se pareça com o portfólio/SaaS/landing page de todo mundo.

E se você quer componentes prontos para usar e avançar ainda mais rápido, dê uma olhada no Neobrutalism. É esta estética, empacotada em componentes para copiar e colar.

Boa construção. 🚀

Tem perguntas? Deixe um comentário ou fale comigo no Twitter. Adoro ver o que as pessoas constroem com este estilo.

Quer o código completo? O arquivo HTML inteiro está disponível como GitHub Gist (link nos comentários).

Achou útil? Compartilhe com algum desenvolvedor que precise escapar da armadilha do design entediante.

← Voltar aos artigos

Como criar um site neobrutalista com Tailwind CSS v4 (passo a passo)

O que vamos construir

Passo 1: preparar o projeto (5 minutos)

Crie o seu projeto

Inicialize o npm e instale o Tailwind v4

Crie a estrutura do projeto

Passo 2: configurar o Tailwind v4 (3 minutos)

Crie o seu arquivo de estilos

Passo 3: a estrutura HTML (5 minutos)

Configure o servidor de desenvolvimento

Passo 4: construir a seção hero (10 minutos)

Passo 5: a seção de funcionalidades (10 minutos)

Passo 6: a seção de planos (12 minutos)

Passo 7: a seção de depoimentos (8 minutos)

Passo 8: o rodapé (5 minutos)

Passo 9: adicionar polimento e interações (5 minutos)

Rolagem suave

Botão do menu mobile

Otimização do desempenho

Passo 10: testes e ajustes (5 minutos)

Testes de responsividade

Verificação de acessibilidade

Verificação de desempenho

Bônus: passar para React/Next.js

Erros comuns e como evitá-los

1. Larguras de borda inconsistentes

2. Esquecer os deslocamentos de sombra no celular

3. Cores de acento demais

4. Negligenciar a acessibilidade

5. Sombras suaves que se infiltram

Próximos passos e recursos

O que fazer em seguida

Recursos úteis

Considerações finais

20 paletas de cores neobrutalistas com códigos hex (prontas para copiar e colar)

Como converter qualquer projeto React para o neobrutalismo em 10 minutos

Neobrutalismo vs minimalismo: quando usar cada um (e quando não)

Como criar um site neobrutalista com Tailwind CSS v4 (passo a passo)

O que vamos construir

Passo 1: preparar o projeto (5 minutos)

Crie o seu projeto

Inicialize o npm e instale o Tailwind v4

Crie a estrutura do projeto

Passo 2: configurar o Tailwind v4 (3 minutos)

Crie o seu arquivo de estilos

Passo 3: a estrutura HTML (5 minutos)

Configure o servidor de desenvolvimento

Passo 4: construir a seção hero (10 minutos)

Passo 5: a seção de funcionalidades (10 minutos)

Passo 6: a seção de planos (12 minutos)

Passo 7: a seção de depoimentos (8 minutos)

Passo 8: o rodapé (5 minutos)

Passo 9: adicionar polimento e interações (5 minutos)

Rolagem suave

Botão do menu mobile

Otimização do desempenho

Passo 10: testes e ajustes (5 minutos)

Testes de responsividade

Verificação de acessibilidade

Verificação de desempenho

Bônus: passar para React/Next.js

Erros comuns e como evitá-los

1. Larguras de borda inconsistentes

2. Esquecer os deslocamentos de sombra no celular

3. Cores de acento demais

4. Negligenciar a acessibilidade

5. Sombras suaves que se infiltram

Próximos passos e recursos

O que fazer em seguida

Recursos úteis

Considerações finais

Continue lendo

20 paletas de cores neobrutalistas com códigos hex (prontas para copiar e colar)

Como converter qualquer projeto React para o neobrutalismo em 10 minutos

Neobrutalismo vs minimalismo: quando usar cada um (e quando não)