How Tailwind CSS adds value in web development

Tailwind delivers branded, polished UI with less development time

Tailwind is a utility-first CSS framework. It follows the path of projects like Beard CSS and Tachyons CSS, and brings more focus to the developer experience and delivering designs for the web efficiently. Implementing a company’s brand is easy with Tailwind.

Tailwind CSS class names are design constraints that don't represent a particular component name or identity. This is what makes Tailwind designs look “clean.” Spacing, font sizes, colors, and other design elements are consistent because they are constrained.

How it’s different from other CSS frameworks

Most CSS frameworks offer a set of utility classes to customize components, especially when it comes to spacing. For example, Bootstrap includes utility helpers that enable you to write mx-auto or mx-5 (and so on) to control spacing in a more granular way. You use them alongside the typical Bootstrap classes like btn or card, but the utility aspect is secondary in Bootstrap. It’s an opinionated, pre designed CSS library. While it offers customization options, making Bootstrap not look like Bootstrap is quite a task, as is maintaining your customization. The same is true for similar libraries such as Foundation, Bulma, and Skeleton.

You can think of these traditional frameworks as templating frameworks. Tailwind is different. It’s a design framework for the web. It’s extremely efficient for developing custom designs and unique visual identities. Tailwind does a great job not getting in your way, behaves predictably, compiles to a small size in production, and has clear documentation. It isn’t opinionated in any way, and comes with a common-sense preset config that’s easy to make yours.

Tailwind also doesn’t assume which browsers you’ll support on your project. On most projects, you can get away with writing very little custom CSS. It offers first-class support for responsive design, modern CSS features like Flexbox and CSS Grid, transitions, and accessibility helpers; and it’s easy to extend. You can customize it by altering its configuration, allowing you to make a customized (and portable) design system that can be moved from project to project.

Why do some developers hesitate to use Tailwind?

Some developers against using Tailwind argue it’s a more verbose markup that feels like inline styling, isn’t reusable, and lacks common pre-designed components to start with.

Pushback: Verbose markup that feels like inline styling

There’s no way around it. It isn’t the cleanest looking markup.

Here’s a button in Tailwind:

<button class="py-2 px-4 border border-transparent text-sm leading-5 font-medium
    rounded-md text-white bg-indigo-600 shadow-sm hover:bg-indigo-500
    focus:outline-none focus:shadow-outline-blue active:bg-indigo-600 transition
    duration-150 ease-in-out">
    Save
</button>

Compare that to a button authored in a more traditional way:

<button class="button button-primary">Save</button>

However, there’s more to the story. The second example omits the CSS code required to make it happen. Here’s the other part you’d have to write somewhere:

.button .button-primary {
    background: #5850ec;
    border: 1px transparent;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25rem;
    padding: 1rem 0.5rem 1rem 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
    color: white;
    transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;
    transition-timing-function: cubic-bezier(.4,0,.2,1);
    transition-duration: 0.15s;
}

So yes, with Tailwind, HTML markup is verbose. But without it you’re not writing less, you’re writing the code elsewhere and hiding it from the markup.

If you look at the minified CSS source in the browser it will look “uglier” than the Tailwind markup in the HTML source. The Tailwind skeptic asks “Why would I look at the CSS source?” to which I ask “Well, why are you looking at the HTML source?” There’s a big advantage to the Tailwind approach. While developing you can “design in the browser” with immediate feedback and without the need to compile anything. This approach supercharges the UI development workflow – especially when it comes to fine tuning

While on the surface this may look like inline styles, it’s anything but. Tailwind classes are constrained. You can’t pick any size, but use classes are configured according to the design system or constraints you have in place. Spacing isn’t just consistent on an element basis, it’s consistent everywhere. Colors aren’t just consistent on buttons, they’re consistent everywhere.

Pushback: Reusability and Tailwind

The skeptic will ask “What about reusability?” This leads us to what Tailwind is particularly good at: delivering projects for the modern web.

Whether working with traditional server-rendered applications or more Javascript heavy ones, duplication is best avoided by creating reusable components. CSS is only part of them. Most often components encapsulate HTML markup and any Javascript functionality in addition to CSS. In this context there isn’t really any duplication, and if anything, it streamlines your workflow.

Tailwind also provides the means to further reduce duplication via the @apply directive. It enables you to author CSS within the design constraints of your project.

.button {
    @apply py-2 px-4 border border-transparent text-sm;
}

That said, if you’re reaching for @apply, maybe you should take another look at how you’re writing your components. Look for opportunities to encapsulate the CSS into the component itself.

Pushback: Tailwind doesn’t come with pre-designed components.

Yes, Tailwind doesn’t come with any pre-designed components or elements. There aren’t any pre-styled buttons or forms. However, if you need some basic elements to start with, there are ways to kick start your design by pulling in the Tailwind CSS Custom Forms as well as the Tailwind CSS Typography Plugin, which are both official Tailwind CSS projects. There are also plenty of examples available in the Tailwind Documentation to get you started. In addition, there’s Tailwind UI, which while not free, provides plenty of well-thought, beautifully designed components.

There are resources out there to help scaffold things quickly. The lack of pre-built components in Tailwind prevents it from having a “Tailwind look”. It isn’t easy to recognize whether a project is using Tailwind just by looking at a website. That’s a good thing.

Pushback: Not everyone thinks or works the same.

It’s common in the developer community to resist a constrained approach. We tend to be attached to specific ways of working, and some of us make a living based on a specific niche. An advanced understanding of CSS is valuable, though not as necessary with Tailwind. There are always trade-offs, but you should only need to go outside the framework for odd-edge cases. Developers early in their careers tend to create complex solutions to problems we don’t really have; it’s part of the learning process. On the other end of their careers, developers with years of experience doing things in a specific way are often not open to new ways, and sometimes sell complex solutions to problems that are simple today.

Every project is different, and Tailwind may not be the best solution to a specific problem; there’s no such thing as a silver bullet in web development. But Tailwind often enables you to deliver more value efficiently, and it’s rare to find a business with unlimited resources.

A common language to visual design

What makes Tailwind a convincing choice is its use as a common language across people on a project. Select any style guide or design system, along with any framework, and Tailwind. You’ll find most of the style constraints match options in your Tailwind config file. It enables you to work efficiently with the marketing and design teams at established companies. It also enables you to craft custom, polished visual identities for new companies. Having a consistent brand identity is crucial for brand recognition and being able to implement that reliably in web projects is key.

Currently, nothing else is as efficient for getting this done, and getting it done well. Tailwind was developed with user feedback — down to naming individual classes — so it isn’t surprising it reads well. You don’t need to translate human conversations to code; you just add what was asked, where it was asked, and it will do what you expect it to do. More importantly, it will do what the designer or business expects it to.

Making your CSS as polished as the style guide doesn’t require effort because its configuration is the style guide. You can certainly design things that don’t look right in Tailwind, but it’s much harder to do so. It enables visual consistency in a collaborative development setting. While managing consistency matters in any size team, the benefit of Tailwind’s efficiency grows with each additional team member.

If you’re working on a project that already has a style guide already in place, you’ll love Tailwind. Most style guides provide the requirements for typography, spacing, and color palette. You code those constraints into the Tailwind configuration in little time, and most style guides also include pre-designed components. With the constraints already in place scaffolding the reusable brand components is a breeze.

Tailwind CSS is a powerful tool in any modern web development stack. It’s no surprise it’s being adopted by startups and leading companies for mission-critical projects.