Tailwind CSS VS emotion

Personally I like twin.macro the most. It’s similar to the above but based on Tailwind.

UI, CSS : tailwindcss + PostCSS + Radix UI + UI components by shadcn

If you use Tailwind CSS and use the dark mode with the class strategy instead of media query, you can override the variables like this:

Also at the start I used TailWind CSS but to remove the css build step I converted everything back to css, keeping some tailwind css in my main.css file.

Ok you can take the easy way out and just use a framework like Bootstrap or Tailwind. As a matter of fact Tailwind has it's own Refactoring UI Book that you can use to learn. In my opinion, UI designers just wing it for the most part. At least there's no single method to this.

Now, a similar process has been happening with CSS. Thanks to CSS-in-JS and, more recently, utility CSS solutions like Tailwind CSS, the process of styling also moved into JS code. Combined with JSX, your entire component can now be a single file, where all elements of a component intertwine.

There is a new trend gaining traction lately which is called “Locality of Behaviour principle”. It is a great new name for an old concept - cohesion. It’s growing lately around HTMX and TailwindCSS communities, but it’s an useful concept in general.

TailwindCSS

In general I recommend using styled-components or emotion. These directly attach CSS to your components in a scoped way so that your CSS files aren’t stepping on each other’s toes all the time and make sure styling is colocated with the component.

I ran into this problem as well. The root cause as I understand it is emotion: https://github.com/emotion-js/emotion/issues/2928

While integrating component libraries, they may not give you full control over the order in which styles are inserted. (Example issue).

Vanilla Extract (CSS Framework) (Alternative: Emotion)

Emotion Github issue https://github.com/emotion-js/emotion/issues/2928

This week Sam Magura, an active maintainer of Emotion, a widely-popular CSS-in-JS library for React, published an article about breaking up with CSS-in-JS. As a “pure CSS” guy, I had many questions and comments while reading the article, so I had to document them in this blog post.

Last I checked Emotion deprecated style extraction, and Styled Components doesn't support it at all.

Hi, I'm Sam — software engineer at Spot and the 2nd most active maintainer of Emotion, a widely-popular CSS-in-JS library for React. This post will delve into what originally attracted me to CSS-in-JS, and why I (along with the rest of the Spot team) have decided to shift away from it.

Multiple instances of Emotion get loaded at once. This can cause problems even if the multiple instances are all the same version of Emotion. (Example issue)