[docs][base] Add Tailwind CSS & plain CSS demo on the Switch page

[mnajdova]

Part of #37222

TODO:

• Update the CreateReactApp with the new extended theme after [docs][base] Add Tailwind CSS & plain CSS demos on the Input page #37685 is merged

[mnajdova]

I am not sure about the focus visible styles, they look too much like Material UI. Maybe we should use the shadow for the other components:

cc @danilo-leal

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against ec7121b

[zanivan]

I am not sure about the focus visible styles, they look too much like Material UI. Maybe we should use the shadow for the other components:

We could do like Joy UI—and some other libs too—and make the focus visible on the track instead of the thumb.

However, I don't think it's much of a problem to look like Material UI, though. IMO, I like the focus on the thumb, what do you think?

[danilo-leal]

I agree that the focus on the thumbs is not inherently a bad thing ⎯ it's slightly more intuitive that outlining the entire switch component. Would customize/polish it a bit though so it doesn't look as rough 😬

[mnajdova]

Would customize/polish it a bit though so it doesn't look as rough 😬

@danilo-leal should I wait for this, or can we do it as a follow up?

[zanivan]

I've tweaked a bit of the focusVisible to make the shadows the same color we're using in the demos. I don't know if it's just here, but the Tailwind thumb is not working as the other styles—it keeps the slate bg even when checked.

Tailwind:

MUI System:

[mnajdova]

I don't know if it's just here, but the Tailwind thumb is not working as the other styles—it keeps the slate bg even when checked.

Fixed

[zanivan]

Since the Tailwind and plain CSS demo is working, I think we could merge this. Other visual tweaks on the demos could be done on #37740