01 mai 2026

tailwind css néobrutalisme tutoriel développement web css

Créer un site néobrutaliste avec Tailwind CSS v4 (guide pas à pas)

Construisez un site néobrutaliste complet de A à Z avec Tailwind CSS v4. Un tutoriel concret qui vous accompagne de l'installation à la configuration jusqu'au moindre composant, avec du code prêt à copier-coller.

Dov Azencot

@DovAzencot

Partager sur X

Bon, on se retrousse les manches. On va construire quelque chose qui a du caractère.

Pas de théorie, pas de blabla. Juste vous, moi et un terminal. À la fin de ce tutoriel, vous aurez un site néobrutaliste pleinement fonctionnel, bâti avec Tailwind CSS v4.

Au programme :

Des bordures noires épaisses
Des ombres portées bien franches
Des accents jaune électrique
Une typographie massive
Zéro coin arrondi

Ce n'est pas un tutoriel « voici un composant ». On construit une landing page entière depuis zéro : section hero, fonctionnalités, tarifs, pied de page, tout y passe. Chaque ligne de code est expliquée. Chaque choix de design est justifié.

Servez-vous un café. Ouvrez votre terminal. On passe en mode brut.

Ce que l'on va construire

Avant de commencer, voici ce que l'on met en place :

Une landing page pour un produit SaaS fictif baptisé « BoldTask » : un outil de gestion de projet qui ne ressemble pas à tous les autres outils de gestion de projet.

La page comprendra :

Une section hero avec CTA
Des cartes de fonctionnalités
Une grille de tarifs
Une section de témoignages
Un pied de page

Le tout avec cette signature néobrutaliste : audacieuse, très contrastée, impossible à ignorer.

Stack technique :

Tailwind CSS v4 (la toute dernière version)
HTML (ou React/Next.js si vous préférez)
Google Fonts (Archivo Black + Space Grotesk)

Temps estimé : 45 à 60 minutes si vous suivez pas à pas

Étape 1 : mise en place du projet (5 minutes)

On part de zéro. J'utilise une configuration HTML toute simple pour ce tutoriel, mais vous pouvez facilement l'adapter à React, Next.js ou n'importe quel framework.

Créer votre projet

mkdir neobrutalism-website
cd neobrutalism-website

Initialiser npm et installer Tailwind v4

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

À noter : on installe Tailwind v4 (encore en bêta, mais déjà assez stable pour la production). Le tag @next vous donne la v4.

Créer la structure du projet

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

Votre arborescence devrait ressembler à ceci :

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

Étape 2 : configurer Tailwind v4 (3 minutes)

Tailwind v4 embarque un nouveau système de configuration, plus propre. Fini le tailwind.config.js : tout se configure désormais en CSS.

Créer votre fichier de styles

Ouvrez src/styles.css et ajoutez :

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

Ce que l'on vient de faire :

Défini une palette de couleurs sur mesure (noir, blanc, jaune, rose, cyan)
Supprimé toutes les valeurs de border-radius (néobrutalisme = angles vifs)
Créé des utilitaires d'ombre franche (décalées, sans flou)
Ajouté des effets de survol qui donnent l'impression que le bouton « s'enfonce »

Étape 3 : la structure HTML (5 minutes)

Créez la structure HTML de base. Ouvrez 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-brutal-black bg-brutal-white border-b-4">
      <div
        class="mx-auto flex max-w-7xl items-center justify-between px-6 py-4"
      >
        <div class="font-display text-2xl">BoldTask</div>
        <div class="hidden gap-8 md:flex">
          <a
            href="#features"
            class="hover:text-brutal-pink font-bold transition-colors"
            >Features</a
          >
          <a
            href="#pricing"
            class="hover:text-brutal-pink font-bold transition-colors"
            >Pricing</a
          >
          <a
            href="#about"
            class="hover:text-brutal-pink font-bold transition-colors"
            >About</a
          >
        </div>
        <button
          class="bg-brutal-yellow border-brutal shadow-brutal btn-brutal px-6 py-2 font-bold uppercase"
        >
          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>

Mettre en place le serveur de dev

Il nous faut un moyen de prévisualiser notre travail. Utilisons Vite :


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

Ajoutez ce script à votre package.json :

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

Puis lancez :


pnpm dev
npm run dev
yarn dev
bun dev

Ouvrez http://localhost:5173 dans votre navigateur. Vous devriez voir une barre de navigation basique portant la marque BoldTask.

Étape 4 : construire la section hero (10 minutes)

Passons à la vedette du spectacle. La section hero doit en imposer.

Ajoutez ceci juste après la balise <main> :

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

Ce que l'on a construit :

Un fond jaune plein écran (impact immédiat)
Un titre gigantesque en Archivo Black
Un encadré de contenu à bordure épaisse et ombre franche
Des CTA avec effet de survol (l'ombre se déplace au passage de la souris)
Des chiffres de preuve sociale
Une maquette du produit (représentation abstraite)
Une carte d'accent flottante pour donner de la profondeur

Les choix de design :

Fond jaune = énergie maximale, impossible à ignorer
Encadré blanc = crée du contraste et de la hiérarchie
CTA noir sur jaune = visibilité maximale
Carte cyan flottante = introduit de l'asymétrie (un principe néobrutaliste)

Étape 5 : la section fonctionnalités (10 minutes)

Construisons des cartes de fonctionnalités. Ajoutez ceci après la section hero :

<!-- Features Section -->
<section class="bg-brutal-white px-6 py-20">
  <div class="mx-auto max-w-7xl">
    <!-- Section Header -->
    <div class="mb-16 text-center">
      <h2 class="font-display mb-6 text-5xl uppercase md:text-7xl">
        Why BoldTask?
      </h2>
      <p class="mx-auto max-w-3xl text-xl font-bold md:text-2xl">
        Because your productivity tool shouldn't put you to sleep
      </p>
    </div>
 
    <!-- Feature Grid -->
    <div class="grid gap-8 md:grid-cols-3">
      <!-- Feature 1 -->
      <div
        class="bg-brutal-pink text-brutal-white border-brutal-thick shadow-brutal-lg p-8 transition-transform hover:-translate-y-2"
      >
        <div class="font-display mb-4 text-6xl">⚡</div>
        <h3 class="font-display mb-4 text-2xl uppercase">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 transition-transform hover:-translate-y-2"
      >
        <div class="font-display mb-4 text-6xl">🎨</div>
        <h3 class="font-display mb-4 text-2xl uppercase">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 transition-transform hover:-translate-y-2"
      >
        <div class="font-display mb-4 text-6xl">🔒</div>
        <h3 class="font-display mb-4 text-2xl uppercase">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 transition-transform hover:-translate-y-2"
      >
        <div class="font-display mb-4 text-6xl">📱</div>
        <h3 class="font-display mb-4 text-2xl uppercase">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 transition-transform hover:-translate-y-2"
      >
        <div class="font-display mb-4 text-6xl">🤝</div>
        <h3 class="font-display mb-4 text-2xl uppercase">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 transition-transform hover:-translate-y-2"
      >
        <div class="font-display mb-4 text-6xl">💰</div>
        <h3 class="font-display mb-4 text-2xl uppercase">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>

Ce que l'on a construit :

6 cartes de fonctionnalités dans une grille responsive
Des aplats de couleur (rose, cyan, jaune, blanc) pour rythmer l'ensemble
Des icônes emoji (simples, ludiques, dans le ton)
Un effet de survol (les cartes se soulèvent)
Des bordures épaisses et des ombres franches, toujours cohérentes

Le motif de design : Vous remarquez que les trois premières cartes utilisent des couleurs d'accent (rose, cyan, jaune) tandis que les trois du bas restent blanches ? Cela crée une hiérarchie visuelle : la première rangée capte davantage l'attention.

Étape 6 : la section tarifs (12 minutes)

Les grilles de tarifs sont cruciales. Rendons-les impossibles à rater :

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

Ce que l'on a construit :

Trois paliers de tarifs nettement différenciés
Un code couleur (blanc = gratuit, jaune = populaire, cyan = premium)
Une carte centrale surélevée et plus grande (elle attire l'œil vers le plan recommandé)
Un badge « Most Popular » sur le plan Pro
Des coches de fonctionnalités (✓ et ✗) pour plus de clarté
Une garantie satisfait ou remboursé, gage de confiance

La stratégie de design :

Le fond noir fait ressortir les cartes colorées
La carte centrale légèrement surélevée crée une hiérarchie visuelle
Le CTA toujours placé au même endroit facilite la comparaison
Chaque CTA reprend la couleur de sa carte

Étape 7 : la section témoignages (8 minutes)

La preuve sociale, ça vend. Ajoutons des témoignages :

<!-- Testimonial Section -->
<section class="bg-brutal-gray px-6 py-20">
  <div class="mx-auto max-w-7xl">
    <!-- Section Header -->
    <div class="mb-16 text-center">
      <h2 class="font-display mb-6 text-5xl uppercase md:text-7xl">
        People Love It
      </h2>
      <p class="mx-auto max-w-2xl text-xl font-bold md:text-2xl">
        Don't take our word for it. Here's what actual users say.
      </p>
    </div>
 
    <!-- Testimonials Grid -->
    <div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Testimonial 1 -->
      <div class="bg-brutal-white border-brutal shadow-brutal-lg p-6">
        <div class="text-brutal-yellow mb-4 text-2xl">★★★★★</div>
        <p class="mb-6 text-lg font-bold">
          "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="bg-brutal-pink border-brutal h-12 w-12"></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 mb-4 text-2xl">★★★★★</div>
        <p class="mb-6 text-lg font-bold">
          "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="bg-brutal-cyan border-brutal h-12 w-12"></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 mb-4 text-2xl">★★★★★</div>
        <p class="mb-6 text-lg font-bold">
          "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="bg-brutal-yellow border-brutal h-12 w-12"></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>

Ce que l'on a construit :

Trois cartes de témoignages au style homogène
Des notes en étoiles (le jaune capte l'attention)
Des avatars d'utilisateurs (des carrés de couleur abstraits plutôt que des photos)
Des noms et des fonctions, pour la crédibilité

Pourquoi des avatars abstraits ? Les vraies photos peuvent faire « corporate ». Des carrés de couleur préservent l'esprit ludique et géométrique du néobrutalisme.

Étape 8 : le pied de page (5 minutes)

Tout site a besoin d'un pied de page. Faisons le nôtre avec du caractère :

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

Ce que l'on a construit :

Un pied de page sur quatre colonnes
La marque, la navigation et l'inscription à la newsletter
Des effets de survol (les liens virent au jaune)
Un champ e-mail au style brut
Une barre de copyright en bas

Étape 9 : peaufinage et interactions (5 minutes)

Ajoutons quelques touches finales pour que le site paraisse abouti.

Défilement fluide

Ajoutez ceci à votre 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);
}

Ajoutez ce JavaScript juste avant la balise </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>

Optimisation des performances

Ajoutez ces balises meta à votre <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" />

Étape 10 : tests et ajustements (5 minutes)

Testez maintenant votre site :

Tester le responsive

Ouvrez les DevTools (F12) et testez ces points de rupture :

Mobile (375px)
Tablette (768px)
Ordinateur de bureau (1280px)

Assurez-vous que :

Le texte reste lisible à toutes les tailles
Les boutons sont assez grands pour être touchés au doigt sur mobile (au moins 44px de haut)
Les grilles se réorganisent correctement
Les ombres ne sont pas rognées sur les petits écrans

Contrôle d'accessibilité

Passez cette liste en revue :

Tous les éléments interactifs sont accessibles au clavier (parcourez la page avec Tab)
Le contraste des couleurs respecte les critères WCAG AA (noir sur blanc ✓, jaune sur blanc ✓)
Les images ont un texte alternatif (ici on a utilisé des div, mais si vous ajoutez des images, pensez au alt)
Les champs de formulaire ont un label
Les états de focus sont visibles

Contrôle des performances

Ouvrez Lighthouse dans les DevTools de Chrome et lancez un audit. Vous devriez voir :

Performance : 90+ (peu de CSS, aucun framework lourd)
Accessibilité : 90+ (contraste élevé, HTML sémantique)
Bonnes pratiques : 90+
SEO : 90+

Si les scores sont bas, voici les correctifs les plus fréquents :

Ajouter width et height aux images
Minifier le CSS en production
Activer les en-têtes de cache
Compresser les images

Bonus : passer à React/Next.js

Envie d'utiliser tout ça dans une application React ? Voici comment convertir la section hero :

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

Puis dans votre 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

Les erreurs fréquentes et comment les éviter

Après avoir construit des dizaines de sites néobrutalistes, voici les pièges que je rencontre le plus souvent :

1. Des épaisseurs de bordure incohérentes

L'erreur : utiliser des bordures de 2px sur certains éléments, de 5px sur d'autres, de 3px ailleurs.

La solution : choisissez 2 ou 3 épaisseurs de bordure (par exemple 3px en standard, 4px pour l'emphase, 6px pour les éléments majeurs) et tenez-vous-y d'un bout à l'autre.

2. Oublier les décalages d'ombre sur mobile

L'erreur : des ombres décalées de 10px sur mobile qui débordent ou provoquent un défilement horizontal.

La solution : utilisez des utilitaires d'ombre responsive :

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

3. Trop de couleurs d'accent

L'erreur : utiliser 5 couleurs ou plus en pensant que « plus, c'est plus brut ».

La solution : limitez-vous à noir + blanc + 2 ou 3 couleurs d'accent maximum. Notre palette utilise le jaune, le rose et le cyan, et c'est déjà à la limite.

4. Négliger l'accessibilité

L'erreur : du texte jaune sur fond blanc (illisible), aucun état de focus, un contraste médiocre.

La solution : testez toujours le contraste. Utilisez du texte noir sur des fonds jaune/blanc, du texte blanc sur des fonds noir/sombre.

5. Des ombres douces qui s'invitent en douce

L'erreur : utiliser par mégarde les ombres par défaut de Tailwind (shadow-lg), qui ont du flou.

La solution : créez vos propres utilitaires d'ombre et désactivez au besoin les ombres par défaut.

La suite et les ressources

Félicitations ! Vous venez de construire un site néobrutaliste complet en partant de zéro.

Que faire ensuite

1. Le déployer

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

2. Ajouter des fonctionnalités

Relier le formulaire de newsletter à un service (ConvertKit, Mailchimp)
Brancher les CTA de tarifs sur Stripe
Ajouter des statistiques (Plausible, Fathom)

3. Étoffer le design system

Créer d'autres composants (modales, menus déroulants, infobulles)
Construire des pages supplémentaires (à propos, blog, contact)
Ajouter un mode sombre (le néobrutalisme y fonctionne très bien aussi)

4. Optimiser encore

Minifier le CSS et le HTML
Ajouter l'optimisation des images
Mettre en place des stratégies de cache
Envisager un générateur de site statique pour des performances encore meilleures

Ressources utiles

Inspiration design :

Brutalist Websites - Une collection triée sur le volet
Gumroad - Le néobrutalisme bien exécuté
Feastables - Un e-commerce néobrutaliste et ludique

Outils :

Neobrutalism - Des composants néobrutalistes prêts à l'emploi
Tailwind CSS v4 Docs - La documentation officielle
Google Fonts - Des polices gratuites (Archivo Black, Space Grotesk)

Générateurs de palettes :

Coolors - Générer des combinaisons de couleurs
Adobe Color - Roue chromatique et outils de palette

Pour conclure

Vous venez de construire un site néobrutaliste, de la page blanche au déploiement, en moins d'une heure. Franchement, c'est du beau travail.

À retenir :

Néobrutalisme = bordures épaisses + ombres franches + couleurs vives + zéro border-radius
La directive @theme de Tailwind v4 rend la personnalisation plus limpide
La cohérence est essentielle (épaisseurs de bordure, ombres, couleurs)
L'accessibilité compte toujours (le contraste élevé y aide)
Commencez par un design system solide, puis construisez les composants

Ce site n'est pas qu'une démo : c'est un modèle que vous pouvez adapter à de vrais projets. Changez les couleurs, remplacez les polices, ajustez les ombres, faites-en le vôtre.

Le meilleur avec le néobrutalisme ? Il pardonne tout. L'imperfection fait partie de l'esthétique. Cette bordure légèrement de travers, cet élément un peu décentré ? Ce n'est pas un bug, c'est du caractère.

À vous de jouer : construisez quelque chose d'audacieux qui ne ressemble pas au portfolio/SaaS/landing page de tout le monde.

Et si vous voulez des composants prêts à l'emploi pour aller encore plus vite, jetez un œil à Neobrutalism. C'est cette esthétique, packagée en composants à copier-coller.

Bon build. 🚀

Des questions ? Laissez un commentaire ou écrivez-moi sur Twitter. J'adore voir ce que les gens construisent dans ce style.

Envie du code complet ? Le fichier HTML intégral est disponible sous forme de GitHub Gist (lien en commentaire).

Cet article vous a été utile ? Partagez-le avec un développeur qui a besoin d'échapper au piège du design ennuyeux.

← Retour aux articles

Créer un site néobrutaliste avec Tailwind CSS v4 (guide pas à pas)

Ce que l'on va construire

Étape 1 : mise en place du projet (5 minutes)

Créer votre projet

Initialiser npm et installer Tailwind v4

Créer la structure du projet

Étape 2 : configurer Tailwind v4 (3 minutes)

Créer votre fichier de styles

Étape 3 : la structure HTML (5 minutes)

Mettre en place le serveur de dev

Étape 4 : construire la section hero (10 minutes)

Étape 5 : la section fonctionnalités (10 minutes)

Étape 6 : la section tarifs (12 minutes)

Étape 7 : la section témoignages (8 minutes)

Étape 8 : le pied de page (5 minutes)

Étape 9 : peaufinage et interactions (5 minutes)

Défilement fluide

Bouton de menu mobile

Optimisation des performances

Étape 10 : tests et ajustements (5 minutes)

Tester le responsive

Contrôle d'accessibilité

Contrôle des performances

Bonus : passer à React/Next.js

Les erreurs fréquentes et comment les éviter

1. Des épaisseurs de bordure incohérentes

2. Oublier les décalages d'ombre sur mobile

3. Trop de couleurs d'accent

4. Négliger l'accessibilité

5. Des ombres douces qui s'invitent en douce

La suite et les ressources

Que faire ensuite

Ressources utiles

Pour conclure

20 palettes de couleurs néobrutalistes avec codes hexadécimaux (prêtes à copier-coller)

Convertir n'importe quel projet React au néobrutalisme en 10 minutes

Néobrutalisme vs minimalisme : quand choisir l’un ou l’autre (et quand s’en abstenir)

Créer un site néobrutaliste avec Tailwind CSS v4 (guide pas à pas)

Ce que l'on va construire

Étape 1 : mise en place du projet (5 minutes)

Créer votre projet

Initialiser npm et installer Tailwind v4

Créer la structure du projet

Étape 2 : configurer Tailwind v4 (3 minutes)

Créer votre fichier de styles

Étape 3 : la structure HTML (5 minutes)

Mettre en place le serveur de dev

Étape 4 : construire la section hero (10 minutes)

Étape 5 : la section fonctionnalités (10 minutes)

Étape 6 : la section tarifs (12 minutes)

Étape 7 : la section témoignages (8 minutes)

Étape 8 : le pied de page (5 minutes)

Étape 9 : peaufinage et interactions (5 minutes)

Défilement fluide

Bouton de menu mobile

Optimisation des performances

Étape 10 : tests et ajustements (5 minutes)

Tester le responsive

Contrôle d'accessibilité

Contrôle des performances

Bonus : passer à React/Next.js

Les erreurs fréquentes et comment les éviter

1. Des épaisseurs de bordure incohérentes

2. Oublier les décalages d'ombre sur mobile

3. Trop de couleurs d'accent

4. Négliger l'accessibilité

5. Des ombres douces qui s'invitent en douce

La suite et les ressources

Que faire ensuite

Ressources utiles

Pour conclure

À lire ensuite

20 palettes de couleurs néobrutalistes avec codes hexadécimaux (prêtes à copier-coller)

Convertir n'importe quel projet React au néobrutalisme en 10 minutes

Néobrutalisme vs minimalisme : quand choisir l’un ou l’autre (et quand s’en abstenir)