How We Use Tailwind in Components

I wrote about Why We Use Tailwind at ConvertKit. This is about how we use Tailwind in our components.

The short version is that we use the tailwind classes directly in our components:

const Button = (props) => 
  <button {...props} className="px-4 py-2 bg-gray-700 text-white" />

But, we also want our components to do a little more. We want to work with a fixed set of colors, sizes, etc. to make development easier and our UI more consistent. That way, our developers can write code like this:

<Button color="red" size="lg">Save Form</Button>

instead of having to repeat classes all the time:

<Button className="bg-red text-white px-4 py-2"/>

Here's how we do that:

const DEFAULT = "border border-solid border-transparent";

const COLORS = {
  green: "text-white bg-green-400 hover:bg-green-500",
  red: "text-white bg-red-400 hover:bg-red-500"
};

const Button = ({ color, children, className, ...props }) => {
  className = [className, DEFAULT, COLORS[color]].join(" ");

  return (
    <button {...props} className={className}>
      {children}
    </button>
  );
};

This is a simplified example of our actual component that's only handling the different colors. We have a default set of classes that all buttons have (DEFAULT), then, we have an object representing the different colors (COLORS). When someone passes red as the color prop, we use the classes that match that key: COLORS["red"]. We merge all this together with the className prop that that you can also pass to our component to add additional classes if necessary.

// A red button with margin at the bottom
<Button color="red" className="mb-2"/>

We follow the same pattern for sizes, variants, and different states of our components.

How are you using Tailwind in React components?

P.S. We're hiring a few full stack engineers at ConvertKit. Learn more here convertk.it/engineer