While working on a recent side project, I had the idea to build a simple API like styled components that works with Tailwind. The idea is given a list of class names, create a component that you can easily share without writing all the normal boilerplate.

The goal is something that looks like this:

const Text = styled.p("text-sans text-lg font-light")

What appeals to me about this is in one line I have a reusable component with automatic prop types inferred from the tag I selected, and class names are automatically merged if you add a className prop when using the component.

Let’s see the implementation of this styled function!