By @akash_dathan
Setup Astro with React, Tailwind and MaterialUI π
Following is a guild to set up an astro project with React integrated, Tailwind for css and MaterialUI for pre-built components and Icons.
π§βπ Set up Astro
Use the following command to setup astro
npm create [email protected]
- The command should trigger the setup wizard, just follow the wizard to set up the project as per your preference

Setup TailwindCSS
Astro has a utility to install Tailwind and configure it. Use the following command to set up TailwindCSS in Astro.
npx astro add tailwind
- The command should trigger the following setup wizard

- The wizard will install the dependencies and prompt to integrate Tailwind in Astro config

π οΈ Configuring Tailwind
Astro wizard will automatically create the tailwind configuration file. Update the following auto generated file for adding custom configs.
tailwind.config.cjs
Setup React
Astro has a utility to install React and configure it. Use the following command to set up React in Astro
npx astro add react
- The command should trigger the following setup wizard

- The wizard will install the dependencies and prompt to integrate React in Astro config

Setup MUI
Since MUI will be used by react, we need to install MUI as packages. Use the following command to install MUI
npm install @mui/material @emotion/react @emotion/styled
Material UI is designed to use the Roboto font by default. Use the following command to set up the font.
npm install @fontsource/roboto
Use the following command to set up MUI icons
npm install @mui/icons-material
Thatβs all folks, happy hacking π