Add Neo-Brutalist Style to Your TailwindCSS Projects – NeoBrutalism.css

NeoBrutalism.css is a lightweight CSS library that applies Neo-Brutalism’s raw, bold design principles to UI elements.

It works with TailwindCSS to provide distinctive borders, shadows, and interactive elements that create the bold, unapologetic aesthetic of Neo-Brutalist design.

How to use it:

1. Download the neobrutalism.css and import it into your TailwindCSS project:

<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./neobrutalism.css" />

2. Use the nb-* classes to apply the Neo Brutalism design to your elements. Here’s an example of how to use it:

• Borders: nb-border (2px), nb-border-lg (3px), nb-border-xl (4px)
• Shadows: nb-shadow (2px offset), nb-shadow-lg (4px), nb-shadow-xl (6px)
• Links: nb-link adds a 2px underline with 4px offset
• Hover effects: nb-hover shifts elements 4px down/right on hover
• Inputs: Use nb-input for text fields, nb-checkbox for custom checkboxes, nb-range for sliders

<a class="text-lg nb-font-large self-center font-bold nb-link"
  href="https://github.com/zAlweNy26/neobrutalism.css">Click here to ⭐ the GitHub repo!</a>
<div class="text-lg p-2 bg-gray-200 nb-border nb-shadow">
  <p>Welcome to NeoBrutalism.css! This is a simple page.</p>
</div>
<div class="text-lg p-2 bg-gray-200 nb-border-lg nb-shadow-lg">
  <p>Welcome to NeoBrutalism.css! This is a simple page.</p>
</div>
<div class="text-lg p-2 bg-gray-200 nb-border-xl nb-shadow-xl">
  <p>Welcome to NeoBrutalism.css! This is a simple page.</p>
</div>
<div class="flex items-center gap-4">
  <div class="text-sm transition p-1 bg-gray-200 nb-border-lg nb-shadow-lg nb-hover">
    <p>Hover me</p>
  </div>
  <div class="text-sm p-1 bg-gray-200 nb-border-lg nb-shadow-lg">
    <p>Badge</p>
  </div>
  <div class="text-sm font-bold p-2 bg-gray-200 rounded-full nb-border-lg nb-shadow-lg">
    <p>NB</p>
  </div>
  <input type="checkbox" class="nb-checkbox">
</div>
<progress class="w-56 nb-border nb-shadow nb-progress" value="5" max="10"></progress>
<input type="range" min="0" max="20" value="5" class="nb-border nb-shadow nb-range">
<input class="nb-border nb-shadow nb-input" type="text" placeholder="Type something...">
<select class="nb-border nb-shadow nb-input">
  <optgroup label="Mammals">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </optgroup>
</select>
<textarea class="nb-border nb-shadow nb-input" rows="5" placeholder="Type something..."></textarea>