Tailwind CSS VS emotion

TailwindCSS

shadcn/ui contains a set of beautifully designed and accessible components, and it works seamlessly with major React frameworks. It’s open-source and has amassed 85.5k (and counting) GitHub stars. It’s built on the shoulders of giants — Radix UI and Tailwind CSS, making it one of the best to work with. Unlike many other UI libraries, the components are not just installed as npm modules, they’re downloaded into your project. That gives you access to the source code and you can modify it if you want. I like this approach better because I can tweak aspects of a component if I want to.

We're going to investigate the difference in performance between Tailwind and Linaria. Tailwind, you already know. And Linaria has been getting quite a lot of traction since styled components went into maintenance mode recently. We'll cover why Linaria is a good choice for this comparison a bit further.

Styling: Tailwind CSS

Requesting RISC-V support upstream (see: Tailwind GitHub issue)

It is a well-known fact that Tailwind CSS is a utility-first CSS framework. It lets you style elements directly within your HTML, thanks to pre-defined classes. Unlike other CSS frameworks that offer pre-built components, Tailwind offers these low-level utility classes that let you create your own design system. Thus, this makes crafting unique responsive designs effortless as there is not much to do with custom CSS.

live/tailwind starts tailwind on watch mode. Notice the watch=always flag, there seems to be an issue with tailwind closing when stdin closes and this flag fixes it. (related pr)

By 2018, Emotion and others expanded the ecosystem, addressing performance and flexibility. In server-side rendering (SSR) scenarios, CSS-in-JS libraries like styled-components and Emotion enable styles to be collected during rendering and embedded in the initial HTML response, ensuring faster page loads and preventing flash of unstyled content (FOUC).

Let’s add styles to our Button component. We’ll be using emotion for styling. First, let’s install the necessary dependencies:

The most popular CSS-in-JS libraries are styled-components and Emotion. MUI, a React component library, recently released a promising, zero-runtime CSS-in-JS library called Pigment CSS. This article will explore the features and benefits of Pigment CSS, offering a comparison to styled-components and Emotion based on performance, features, developer experience, and community support.

emotion [ https://emotion.sh ]

dang, I never thought about this implication, and I googled the emotionjs repo there's a currently-active open issue regarding this https://github.com/emotion-js/emotion/issues/2928

Over my years of working with React, I’ve loved using CSS-in-JS libraries like Emotion and Styled-components. However, their inherent performance overhead from injecting CSS at runtime and their incompatibility with the latest Next.js features such as App Router and React Server Components (RSC) have always been a nagging issue for me.

An early difficulty I encountered was using UI component libraries like Mantine and Material UI in the new architecture. After looking through some GitHub issues, the culprit is Emotion, a package many component libraries rely on that does not support server rendering.

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.