Setup Astro with React, Tailwind and MaterialUI 🚀
Blog / Setup Astro with React, Tailwind and MaterialUI 🚀
3 Minutes Read
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
Astro setup wizard

Tailwind setup wizard 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
Tailwind setup wizard
  • The wizard will install the dependencies and prompt to integrate Tailwind in Astro config
Tailwind config setup

🛠️ Configuring Tailwind

Astro wizard will automatically create the tailwind configuration file. Update the following auto generated file for adding custom configs.

tailwind.config.cjs

Tailwind setup wizard 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
React setup wizard
  • The wizard will install the dependencies and prompt to integrate React in Astro config
Tailwind config setup

Tailwind setup wizard 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 🙌