Skip to content


All of my published content

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.

Dynamic Class Names in Tailwind

Tailwind will only find classes that exist as complete unbroken strings in your source files. If you use string interpolation or concatenate partial class names together, Tailwind will not find them and therefore will not generate the corresponding CSS