Tailwind for the Win

The proliferation of CSS frameworks is evidence that we still haven't solved for the true problems that need solving in CSS. We saw this situation with JavaScript frameworks until React came along and introduced unidirectional data flow with reactive components. So what are the real CSS problems and how is Tailwind solving for them?

Competing Componentizations

In the early days of HTML and CSS, before JavaScript took main stage, CSS was the primary componentization mechanism. HTML was just content, but styling needed to be consistently applied across elements and pages. Cascading with overrides, styling elements by types and hierarchal selectors, elements opting into multiple styles. CSS was an amazing solution.

But then JavaScript frameworks came along and introduced componentization models for the HTML. This brought a new challenge, how do you reconcile CSS and HTML componentization models? In fact some CSS frameworks are focused on this exact problem, such as styled components and CSS modules.

Standardizing Naming

Naming things in CSS has always been hard, but now having to bind those names to another componentization model with it's own naming problems can become a nightmare. Some approaches try to create naming standards for coupling styles to structure. Other patterns strictly avoid structure in CSS naming. You can even avoid naming things by going straight to inline styles.

But let's take a step back. Why do we name things? So we can reuse them. Where are we reusing them? Within a page, a site, a design system? Does knowing BEM patterns make you instantly productive in a new company using BEM? Probably not. This is where utility class naming steps in. Simple universally standard names.

Portability

If someone creates an amazing Button component in React, how do you take that component and use it in your project? Do you have to copy a JavaScript file and a SASS file of the same name? Can you copy just the JavaScript file and get styling along with it? How portable is the component with styling?

Most CSS frameworks fail this simple portability test: can you copy just the Button component? You probably have to copy external styling definitions, sometimes files, sometimes additional style objects or components. If you can't copy just the Button component it means the developer is tasked with keeping two different component models in sync. And this limits porting code.

Take this one step further. Can you copy the resulting HTML loaded in the DOM, paste it in your project, and it look the same? Chances are the HTML will have something like class="fj7sd" on it. Definitely not going to work.

Imagine a design system where the components are defined in plain old HTML that you can copy, adapt for React or Vue or whatever framework, and it look perfectly to spec while you add the functionality. Enter Tailwind CSS.

Tailwind CSS

Tailwind is built on utility classes that allow you to have just one componentization model, the one you get from your JavaScript framework.

Learning Tailwind is 100% transferable across projects and companies. The class names are universal and delightfully consistent.

The HTML is understandable and portable, you can even copy the HTML to a new component with perfect visual fidelity.

Button Example

The use of the clsx library is optional. We like it for consistent structuring and commenting of the styling.

function Button(props: {
  children: React.ReactNode
}) {
  return (
    <button
      className={clsx(
        'px-4 py-2', // spacing
        'text-white bg-green-600', // color
        'hover:bg-green-400', // hover
        'active:bg-green-700', // active
        'rounded-lg', // border
        'shadow', // effects
      )}
    >
      {props.children}
    </button>
  );
}

The output HTML when you inspect the button.

<button class="px-4 py-2 text-white bg-green-600 
hover:bg-green-400 active:bg-green-700 rounded-lg
shadow">Hello Tailwind!</button>

There's only one component, the button. The class names are universal and easy to understand. You can even copy this HTML, paste it into your own project, and get the exact same result.

Setting up Tailwind CSS is a task, and you'll end up using their documentation to look things up more than you use Stack Overflow for a while, but the investment has changed our lives.

Get started here.