Introduction

This shaping page format is different from the others; it's meant to document the gaps in today's ecosystem. It aims to answer: Why is MUI investing time into Pigment CSS when it could rely on an existing style library and focus on Design Engineering with the components? Why is there a purpose in doing such?

Comparative analysis

Tailwind CSS

Consolidated strength

• Styles are edited within the markup instead of being separated.

  Heard in:

  • https://newsletter.baptiste.devessier.fr/archive/my-first-impressions-of-panda-css/
  • https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b

• No need to find a good name for the CSS selectors.

  Heard in:

  • https://newsletter.baptiste.devessier.fr/archive/my-first-impressions-of-panda-css/

• The plug-in that auto-sorts the properties makes it so much nicer during code review.

  Heard in:

  • https://www.youtube.com/watch?v=UlY-Ixddjm0

• A theme with strong default design tokens.

  Heard in:

  • https://newsletter.baptiste.devessier.fr/archive/my-first-impressions-of-panda-css/
  • https://sancho.dev/blog/tailwind-and-design-systems/
  • Theo - t3․gg: “Strong color palette, I use it even on projects without Tailwind CSS.”
  • On Twitter: “Compare the box shadow of Tailwind CSS with the ones of tachyon, tachyon’s ones look horrible”.

• Writing style is easy. No hard-to-reach key.

  Heard in:

  • https://www.youtube.com/watch?v=UlY-Ixddjm0
  • https://youtu.be/98v05b-u2OE?si=WyZ44OLbE4CzdwGl&t=779

• Very fast to add styles and generally work with CSS once you get up-to-speed with the classes that don’t map 1:1 with plain CSS declarations (e.g., leading-lose, which is the same for line-height: 2).

• Just CSS. It makes adoption easier and future-proof.

  Heard in:

  • https://sancho.dev/blog/tailwind-and-design-systems/

Unknown

• Performance.

  TODO: Need to benchmark. It's strange that Vercel pushes so much for Tailwind CSS and are not really using it on their own marketing, docs, etc websites (they have a Tailwind CSS asset but when you clock it in the network panel, the website seems to work normally). There are concerning aspects of Tailwind CSS. I get the impression that because of tailwind-merge (6kB) bundle + its runtime + its Atomic CSS that Pigment CSS’s css()/ sx API is faster by a non-negligible margin.

• It doesn’t scale:

  Heard in:

  • “I love Tailwind but it doesn’t scale” https://youtu.be/PHV94q7BivI?si=yiEzzoxVWuCYXCVS&t=0

• There is a plateau of adoption and depth in the market?

  • https://2025.stateofcss.com/en-US/other-tools/#css_frameworks

  • https://2023.stateofcss.com/en-US/css-frameworks/,

    

    See npm downloads stats too: https://docs.google.com/spreadsheets/d/1FHxZ456e1t_MNJZg9wrq7pLRFzknZ6jMBhFuW1j1Q8o/edit#gid=492072497

Misinformation

• Typesafe. It’s not that bad. There are eslint plugins, Prettier sorting extensions, and VS Code extensions that both bring autocomplete and mistake detection. Heard in:

  • https://www.youtube.com/watch?v=UlY-Ixddjm0

  So https://x.com/jamesqquick/status/1796557600273977587 might happen (absolute is not spelled correctly), but only if you don’t have the right tools in place.

Consolidated weaknesses