Material Tailwind with Genezio

Learn how to install genezio and setup a project with @material-tailwind/react.

In this guide, we will walk through the steps to get up and running a basic template offered by genezio with @material-tailwind/react.

Install genezio

First, you need to install and login to genezio.

npm install genezio -g
genezio login

Clone your project

Clone the following template that uses @material-tailwind/react.

git clone https://github.com/Genez-io/weather-typescript-template

For more details check the Genezio Official Documentation

Tailwind CSS Configuration

After you setup the project you can find your Tailwind Config with @material-tailwind/react already installed in ./genezio-project/client/tailwind.config.js. For now, everything is set up in this file, but keep it in mind for the future when you want to customize your tailwind template.

Deploy your project

With genezio, you can deploy your newly created project to the genezio cloud.

cd weather-typescript-template
genezio deploy

Once the deployment is successful, a URL will be provided for you to access the web application.

If you need to add integrations like SQL Databases, Redis, Queues, Email Services, Application Monitoring, or simply take a look at your application logs, go to the Genezio Dashboard.

Test your project

You can test locally both your frontend and your backend.

Terminal 1:

cd genezio-project
genezio local

Terminal 2:

cd genezio-project/client
npm install
npm run dev


Next Steps

1. Build your app with more backend code genezio examples.
2. Continue building your frontend with Material Tailwind Blocks.


I hope you enjoyed this integration guide and I encourage you to check out our other tutorials for more insights about genezio and Material Tailwind. 🥷 💻