[examples][base-ui] Add Base UI + Vite + Tailwind CSS example in TypeScript

[dvkam]

• I have followed (at least) the PR section of the contributing guide.

With this pull request CRA is replaced with Vite in the base-cra-tailwind-ts example. Adresses #37367
Removed old unnecessary files that were generated by CRA.
Additionally added a components folder and moved Button, Slider and Player components into it.

Preview: https://github.com/dvkam/material-ui/tree/base-vite-tailwind-ts/examples

[mui-bot]

Netlify deploy preview

https://deploy-preview-37595--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 507f28d

[oliviertassinari]

Thanks for looking into this.

I have left a few feedback, the main flow of thought is that I think this example and https://github.com/mui/material-ui/tree/master/examples/base-vite-tailwind should almost be identical (at the JS vs. TS difference)

[samuelsycamore]

I don't see a reason to remove the CRA example when they can both coexist peacefully here. If the examples folder is getting too cluttered, we can consider other ways of organizing it.

[dvkam]

I don't see a reason to remove the CRA example when they can both coexist peacefully here. If the examples folder is getting too cluttered, we can consider other ways of organizing it.

Main reason for the migration and removal of CRA is this issue #37367 plus the fact that CRA is completetly removed from the official React documentation. See the comment of Dan Abramov here reactjs/react.dev#5487 (comment). Examples with outdated tech like CRA should not be used imo. Especially when its easy to replace with Vite.

[dvkam]

If you want to keep the CRA examples and just add same with Vite let me know and I will make the necessary changes.

[samuelsycamore]

Thanks for your patience @dvkam ! Let's go ahead and move forward here by replacing this CRA example with Vite as you've proposed here. I don't think we need the CRA example in this case after all.

[dvkam]

Hey @samuelsycamore thanks for the update, I will make the needed changes asap. Do you want me to adapt this example so its the same like this one: https://github.com/mui/material-ui/blob/master/examples/base-vite-tailwind/README.md but with TS?

Just need to know how you want me to proceed (see the two open threads above).

[samuelsycamore]

Hey @samuelsycamore thanks for the update, I will make the needed changes asap. Do you want me to adapt this example so its the same like this one: https://github.com/mui/material-ui/blob/master/examples/base-vite-tailwind/README.md but with TS?

Just need to know how you want me to proceed (see the two open threads above).

Thanks for checking in @dvkam ! Yes, let's aim for consistency across these examples and follow the lead of the one you linked here.

[samuelsycamore]

Since this PR has gone stale, I've made the requested changes to get the base-ui-vite-tailwind-ts example merged (part of #36193). I've also added a couple small fixes to base-ui-vite-tailwind.

[oliviertassinari]

Looks good 👍