Unleash the Designer in You (with Tailwind CSS)

Tailwind CSS is an extremely popular CSS framework. In fact, a CSS framework generator.

Beyond making developers highly productive with UI development, Tailwind is also highly attractive to designers: it forces developers to think like designers, and make it easier for designers to reason about code.

Aligning designer and developer thinking

From the onset of a project, Tailwind brings designers and developers at the table together, to define scales and “tokens” for colors, spacing, font sizes, etc. The Tailwind theme It’s at the core of how everything works.

Tailwind encourages designers to think like a developer with systems, constraints and composition.

At the same time, it tricks developers to think like designers with hierarchy, rhythm and consistency.

Tailwind can — and will — bridge the gap between designers and developers, making everyone closely aligned on the foundations of the UI styling strategy.

As a developer, you will trick yourself into an environment that will make you, over time, get better at design.

A design tool for the browser

Tailwind provides the right set of abstractions and guidelines to be an excellent tool to iterate on designs.

Designing in Tailwind and designing in a tool like Figma is surprisingly similar. Sure, they require different skillsets and serve different needs. But the way you think about styling an element is fundamentally the same.

Imagine you’re designing a button. Right now, you’re probably thinking about this button’s background color, padding, font size, or border radius.

Using Figma, you’d reach for toolbar values (or even better, predefined variables) to apply each of these “style concerns”.

In Tailwind, you reach for utility classes.

In both cases, these style concerns get composed together.

A set of options in the style panel in Figma, and a string of classes in Tailwind.

Both approaches follow a very comparable reasoning. Which is once again why Tailwind CSS makes designers and developers work extremely well together.

Become a better UI designer with Tailwind

Sorry to break it down, but Tailwind itself will not magically teach you design and instantly turn you into a great designer. That’s just not how it works 😅

However, the tools and workflows Tailwind provides will put developers in an ideal situation to develop and practice those UI design skills.

No big-brain concerns

With Tailwind, you’re applying styles at the local scope.

You’re laser-focus on one single element at a time, with no need to reason about the entire system in your head.

This creates a blissful “design iteration freedom” which is incredibly empowering, and typically very hard to pull off with HTML and CSS.

Trick yourself into becoming a UI designer

The key to get better at something is to create scenarios and habits that trick you into regularly practicing new skills.

And if Tailwind by itself doesn’t teach you design, it certainly will trick you into spending a lot of time tinkering with UIs, trying out a new ideas. Trick you into thinking (and acting) like a designer, and developing your skills in the process.

If you stick with it long enough, you’ll start seeing patterns on what makes your UIs look good.

You’ll realise that the carefully crafted default Tailwind theme does, in fact, make you a better designer.

You’ll get curious about learning more about UI design concepts and patterns.

You’ll learn about typography, vertical rhythm, the importance of whitespace.

Before you know, you’ll become someone that other developers reach out to, when they need something to “look good”.

Someone that designers trust, seek ideas and opinions from, and love working with.

They’ll call you a unicorn. You’ll think of yourself as a design engineer.

You’ll make your team better.

And you’ll have a lot of fun and new opportunities in the process.