Why We're Breaking Up with CSS-in-JS

• compiled

  16 1,961 9.1 TypeScript

  A familiar and performant compile time CSS-in-JS library for React.

  

So to be extremely clear, the issue isn't CSS-in-JS per se, it's just that the author only looked at implementations that don't generate create CSS files. He notably mentioned the (apparent) zero-runtime solutions Vanilla Extract and Linaria, only to skip them and complain that Compiled inserts nodes at runtime.

• twind

  30 3,686 8.3 JavaScript

  The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

  

I think TW syntax is great as a CSS shorthand. I think it can be a great tool for making highly descriptive styles in a far more succinct fashion. I think if you you use Twind compiler and you store TW syntax outside of your templates/JSX and you just compile it down to descriptive class names, that's a great use of Tailwind. Then you get the advantage of meaningful names applied to elements in the template, and if you need to refactor/fix a style, then you can find it much easier. It also makes it a lot more dynamic, which standard Tailwind which can be a PITA to make dynamic (e.g. for dynamic behavior in Twind, you can have functions that generate TW style strings and use interpolated strings without having to worry about if the build-time TW compiler understands all the possibilities).

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• emotion

  52 17,175 5.9 JavaScript

  👩‍🎤 CSS-in-JS library designed for high performance style composition

  

• vanilla-extract

  90 9,262 8.9 TypeScript

  Zero-runtime Stylesheets-in-TypeScript

  

So to be extremely clear, the issue isn't CSS-in-JS per se, it's just that the author only looked at implementations that don't generate create CSS files. He notably mentioned the (apparent) zero-runtime solutions Vanilla Extract and Linaria, only to skip them and complain that Compiled inserts nodes at runtime.

• linaria

  46 11,182 8.4 TypeScript

  Zero-runtime CSS in JS library

  

So to be extremely clear, the issue isn't CSS-in-JS per se, it's just that the author only looked at implementations that don't generate create CSS files. He notably mentioned the (apparent) zero-runtime solutions Vanilla Extract and Linaria, only to skip them and complain that Compiled inserts nodes at runtime.

• WorkOS

  workos.com sponsored

  The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

  

Suggest a related project