[zero][docs] Add a Why section on the README (mui#41284)

packages/pigment-react/README.md

@@ -3,6 +3,7 @@
 A zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build-time.
 
 - [Getting started](#getting-started)
+  - [Why this project exists?](#why-choose-pigment-css)
   - [Next.js](#nextjs)
   - [Vite](#vite)
 - [Basic usage](#basic-usage)
@@ -23,6 +24,15 @@ A zero-runtime CSS-in-JS library that extracts the colocated styles to their own
 
 Pigment CSS supports Next.js and Vite with support for more bundlers in future. You must install the corresponding plugin, as shown below.
 
+### Why choose Pigment CSS
+
+Thanks to recent advancements in CSS (like CSS variables and `color-mix()`), "traditional" CSS-in-JS solutions that process styles at runtime are no longer required for unlocking features like color transformations and theme variables which are necessary for maintaining a sophisticated design system.
+
+Pigment CSS addresses the needs of the modern React developer by providing a zero-runtime CSS-in-JS styling solution as a successor to tools like Emotion and styled-components.
+
+Compared to its predecessors, Pigment CSS offers improved DX and runtime performance (though at the cost of increased build time) while also being compatible with React Server Components.
+Pigment CSS is built on top of [WyW-in-JS](https://wyw-in-js.dev/), enabling us to provide the smoothest possible experience for Material UI users when migrating from Emotion in v5 to Pigment in v6.
+
 ### Next.js
 
 ```bash