Skip to content


Thoughts and info worth sharing

Reusable Components with Tailwind - Examples

I'm a recent convert to Tailwind CSS after using styled-components for years. Tailwind has a different approach to reusing styles, but acknowledges that creating reusable components makes sense for certain use cases. Here I will demonstrate 3 examples of a reusable component, created with React and TypeScript, and styled with Tailwind utility classes using props, clsx, and cva, respectively.

Opacity with CSS Variable Colors in Tailwind

There's a more flexible way to customize your color palette in Tailwind CSS beyond the advice given in their documentation. You can already define custom colors using CSS variables in Tailwind while preserving the opacity modifier syntax, however this method also allows you to easily use the built-in Tailwind colors.