We recently started the transition from styled-components (CSS-in-JS) to Tailwind CSS. I explain in detail why in my blog post: "Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?".
The styled experience
The single feature that I like the most about styled-components is the styled function. It provides us the ability to create designed React components and use them everywhere and even extend them. Let's see an example:
See how easy it is to create a new styled component? You don't need to create a CSS file nor use JSX. We use the styled utility and set the design we want. Inside the template literals, we use the good-old CSS syntax with some enhancements such as nesting, autoprefixer, etc. We can now use Button just like every React component. Place it everywhere you want.
To create a new Tailwind CSS component in our React project, we have several methods:
- Store the className attribute in a variable
- Create a dedicated React component that set the relevant classes
- Create a custom class using the Tailwind utility function @apply. The apply function allows embedding utility classes styling in a new custom class
Every method has its pros and cons, but still, I find the developer experience lacking compared to the great experience of the styled function.
My classed utility function
When working on a design system or a UI components library, we want to quickly build components with the appropriate styling. The less boilerplate, the better. Here's my classed function inspired by the styled function. The best thing is that it comes with TypeScript support, and it also supports Preact.
And that's how we use the new classed function:
The first argument is the element that we want to use, and the rest are tailwind classes or any other classes.
Let's take a look under the hood of this function. The first thing we noticed is that we need to install the classNames dependency from NPM. I could get away from using it, but I already use it in my project, so it's much easier this way. You can read about it on GitHub. Shortly, it makes manipulating the className property much easier.
For complete TypeScript support, we define this function three times. It's a type overloading technique that helps us define more accurate types of our functions. The first definition is for custom React components. For example, if want to extend the previous Button component as follows:
The second definition is HTML default elements such as button, anchor, div, section, etc. And lastly, the third definition is a unified version of the previous two and the implementation. The function returns a new component that is a proxy for the provided component. In the above case, our Classed component creates a Button element. The only difference is that it sets the className attribute according to the rest of the parameters. The new component supports providing additional classes, and it concatenates everything together. It also fully supports PurgeCSS to make sure we have minimal bundle size. And does not require changes to tailwind.config.js or babel.
The classed function is not yet available as a standalone package, but you can copy it to your project and use it as you please.
There we have it! I hope you like my utility function and use it in your next React project, whether it's a create-react-app project, Next.js project, or any other. You can even replicate the same concept into your Vue project.