Don’t Bake Spacing into React Components with Tailwind CSS

2 min read

I don’t recommend baking in margin and padding utilities inside of components.

function Card({children}) {
  return <div className="my-4 p-4">{children}</div>;
}

This makes the component less flexible.

It may work in the first place you add the <Card />, but will it work in the second place you add it?

Instead, consider changing your component’s API to accept className as a prop.

function Card({className, children}) {
  return <div className={className}>{children}</div>;
}

Now you can control the spacing around your component on a case-by-case basis.

<Card className="my-4 p-4">🔥</Card>

And hey, if you think you know what the spacing should be most of the time, give className a default value.

function Card({className = 'my-4 p-4', children}) {
  return <div className={className}>{children}</div>;
}

Of course, this tip only applies to the outer-most element within the component.

There’s nothing wrong with spacing utilities within a component.

function Card({className, children}) {
  return (
    <div className={className}>
      <p className={'p-4'}>{children}</p>
    </div>
  );
}

The className prop gives you flexibility with spacing around the component.

Hopefully that helps you make your React components more flexible when using Tailwind CSS.

If you thought this tip was helpful, consider making a donation.

Every donation helps us bring you free, new content. ❤️