[docs-infra] Conditionally load Tailwind CSS

[oliviertassinari]

Steps to reproduce

Link to live example: (required)

Steps:

1. Open https://master--base-ui.netlify.app/components/react-dialog/
2. Check the dev tools. Get a huge pile of Tailwind CSS variables spam in the devtools

Screen.Recording.2024-09-15.at.03.20.33.mov

3. Spend time during critical page loading to load a CSS file that is unused:

Same in https://mui.com/material-ui/react-dialog/.

---

It's the same behavior in https://mui.com/material-ui/react-dialog/. It has been driving me crazy for the last 18+ months 😄

Current behavior

Load Tailwind CSS even when not needed.

Expected behavior

Only load Tailwind CSS file when needed on the page.

Context

It's not that important for Base UI, but since it's docs-infra, I think that it's important for Material UI to get clarify about the style as a developer, and as a maintainer, to feel the DX of what you are building like a developer will.

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: -