Switching from CSS-in-JS to Tailwind

For years, I was a die-hard Styled Components user. I loved the component-oriented style and the ability to pass props to my styles. However, as my projects grew, I started noticing performance bottlenecks and bundle size bloat.

The Problem with Runtime CSS-in-JS

Libraries like Styled Components inject styles at runtime. This means the browser has to parse and execute JavaScript to generate CSS rules, which are then injected into the DOM. This adds overhead to the main thread.

Enter Tailwind CSS

Tailwind generates your CSS at build time. The final output is just a static CSS file.

Velocity

Once you memorize the class names (which happens surprisingly fast with the VS Code extension), you can style components incredibly fast without context switching between your JSX and your styled component definitions.

Conclusion

While CSS-in-JS has its place, for most marketing sites and dashboards, the performance and developer experience wins of Tailwind make it my default choice for 2024.