Introducing Basewind — a supercharged Tailwind config

Introducing Basewind

Basewind is a supercharged Tailwind config with simple, custom composition utilities inspired by Every Layout, plus fluid typography created with Utopia. It includes sensible global styles I find myself adding to nearly every project, along with a growing collection of general-purpose utilities designed to solve the most common design challenges across projects.

Don’t worry, this isn’t another UI framework. Basewind is a collection of practical CSS utilities for rapid development, designed to work seamlessly with any UI stack.

Key links:

• The docs
• The repo

Why Basewind

For a long time, I’ve admired the layout concepts found in Every Layout, a series of simple, composable layout patterns that become essential in many projects. While existing plugins such as CaptainCSS and Tailwind Every Layout Plugin already incorporate these ideas, they don’t quite hit the mark for me.

I didn’t think a plugin was necessary for such simple layout primitives, which led to creating Basewind — a lean, dependency-free, and fully customizable config that embraces best practices. This project was also a rewarding way to explore the powerful custom functional utilities introduced in Tailwind V4. I’ve also shared some insights about spacing utilities here.

One of the benefits of this config-first approach is that it’s just a Tailwind config file at the end of the day. If you like everything as it is, that’s awesome. But if there’s something you don’t like, you can remove it or change it. It’s completely up to you. Take only the bits you want and build on top however you see fit. For example, if you don’t like the name cluster for grouping items, rename it to something like group or anything that fits your style better.

The problems it solves

When you start a new project and need to build something like a navigation, chances are it looks almost exactly the same every time. The same combination of classes, the same structure, repeated across different projects and probably multiple times within the same one. This isn’t unique to navs; you see it with button groups, tag lists, and many other UI elements you use again and again.

<header class="flex items-center justify-between gap-4">
  <MyLogo />
  <nav>
    <ul class="flex items-center gap-4">
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
    </ul>
  </nav>
</header>

If this is such a common pattern, why not have a utility for it? Just as you might create a reusable CSS class for this, Basewind provides custom Tailwind utilities like repel and cluster to solve these common layout patterns, which results in less repetition, and quicker development.

Here’s the same example using Basewind’s utilities:

<header class="repel">
  <MyLogo />
  <nav>
    <ul class="cluster">
      <li>Nav Item</li>
      <li>Nav Item</li>
      <li>Nav Item</li>
    </ul>
  </nav>
</header>

It’s not a revolutionary change, but a nice quality-of-life improvement that saves you time and keeps your markup cleaner.

Explore the complete config and documentation here to see how Basewind can improve your Tailwind workflow. I expect this to be an evolving project, shaped by ongoing experimentation and real-world use, so feedback and contributions are always welcome.