[docs] Add support for Tailwind CSS and plain CSS demos

[mnajdova]

This PR adds support for Tailwind CSS and plan CSS demos (in Base UI - the new infrastructure), but we can move this everywhere. For each demo that supports multiple styling solutions we should have a directory in the structure:

DemoName/
  tailwind/
    index.tsx
  system/
    index.tsx
  css/
    index.tsx

If this structure exists, a select component with the styling options will appear above the demo preview.

I am using the default Tailwind CSS setup - it is added globally on the docs. For the CodeSandbox and StackBlitz demos, I am simply loading the tailwind CDN - https://tailwindcss.com/docs/installation/play-cdn - this seemed like the easiest solution.

Preview: https://deploy-preview-37319--material-ui.netlify.app/base/react-button/#basics

To-dos:

• clean up the code
• add tests
• Improve the select focus styles
• Fix the toolbar navigation
• validate the design for the Tailwind CSS and plain CSS demos

[mui-bot]

Netlify deploy preview

• docs/data/base/components/button/button.md

Bundle size report

No bundle size changes

Generated by 🚫 dangerJS against 6e32a19

[mnajdova]

The new demos structure uses the folder name as a prop, so we need to adjust this check.

[mnajdova]

Once we support plain CSS, we should update this check.

[zanivan]

This is looking good, I really liked the new toolbar!
I've just added the Cyan color palette on the plain CSS button, and also removed the active and hover states from the disabled buttons.

[siriwatknp]

👍 This looks good to me! the CodeSandbox works great.

[oliviertassinari]

I love the new design of the demo, very clean, close to https://vercel.com/design/button

I think that it would be great to update Joy UI, the background feels a bit annoying, it moves the demo a bit further away to how it will feel once rendered in your app.

---

@mnajdova There is one issue with the warnings, it floods now on HEAD in dev mode 😁, we really need to fix it.

[danilo-leal]

@oliviertassinari thanks, glad you enjoyed it! I was already keen on rolling back with the tiled patterns on Joy ⎯ on it 🤙

[oliviertassinari]

Beyond, the warnings ⬆️,

I think that we should remove the Tailwind CSS dev tool pollution to properly understand the styles in the dev tools, for example:

maybe by scoping them to a specific div or only importing Tailwind CSS entry points in pages that demo it.

It is also important because Tailwind CSS styles slow the page when loading unused CSS: https://youtu.be/nWcexTnvIKI?si=dOaSJEMNi5aQJesf&t=1313.