My company uses a CSS-in-JS library called Styled Components, which is a runtime solution for styling web apps. However the industry is moving away from runtime to build time CSS-in-JS solutions, which are far more performant. There are many excellent runtime CSS-in-JS solutions out there - what are people using and why?
Sort by:
In our case, we adopted Tailwind CSS, and on mobile we’re exploring its React Native counterpart, NativeWind.
Interestingly, performance wasn’t the main driver for us. Years ago, I started leaning towards Tailwind mainly because of the steep learning curve of traditional CSS. Styled Components assumes a solid understanding of CSS. Tailwind, on the other hand, is more semantic and approachable, even for engineers without deep CSS expertise—which tends to be the profile we usually hire for.
Runtime CSS-in-JS libraries are still popular due to their flexibility and ease of use, despite the industry's shift towards build-time solutions for better performance. Some of the notable runtime CSS-in-JS libraries include:
Styled Components: Known for its seamless integration with actual CSS code and features like automatic critical CSS and vendor prefixing.
Emotion: Offers both runtime and build-time modes, appreciated for its dynamic styling capabilities.
JSS: Provides high customization and control, suitable for complex applications.
Aphrodite: Lightweight and performance-focused, generating atomic CSS classes to improve rendering.
These libraries are favored for their ability to handle dynamic styling scenarios effectively, making them suitable for projects requiring frequent style updates based on user interactions or application state.

Apologies, the question in my original post should have read:
"There are many excellent build time CSS-in-JS solutions out there - what are people using and why?"
(replace runtime with build time)