Create a Next.js based PWA With Tailwind — create-next-pwa

So a couple of days back, I started learning about Progressive Web Apps (PWA) and how they make your web app a standalone desktop application and sort of like an android application. I was really intrigued by the whole concept. I knew about PWAs before but I have never experimented with them. And this time, I decided to do just that.

So to indulge in my curiosity, I went ahead and created a Next.js app with create-next-app. And afterward, I started making all the changes in the code that were required for a PWA. In the end, I was successful but it took me some time since I was coming from a background where I had no experience with PWAs.

Later I decided to use Tailwind for my project. I looked up its documentation and followed all the steps I needed to perform to set up Tailwind in my Next.js application. And here again, I spent some time figuring out what to do and what not to do.

After going through all this, figuring stuff out, I realized that some kind of automation tool can come in real handy when doing all these configurations. And that is when I started building create-next-pwa. 🏗

create-next-pwa

create-next-pwa is an extremely lightweight, zero-configuration Node.js-based CLI tool that I have built to automate everything I have talked about above. It can set up your Next.js PWA with a single command:

If you want to set up Tailwind for your PWA, you can easily do this with create-next-pwa with a single --tailwind flag like this:

I have also integrated Prettier as a dev dependency in the PWA. It means you can format your entire project when you are building your PWA by just running:

Everything you needed to do before in order to set up a Next.js-based PWA with or without Tailwind can now be done with a single command. How awesome is that?! 🥂

If you still want to set up Next.js-based PWA by yourself, I would then recommend reading this awesome article by Eshwaren. And on top of this to integrate tailwind, you can follow the official documentation.

Wrap Up

If you folks want me to integrate something else like I have integrated Tailwind then open an issue in the repository and I will get back to you. Also if you like this application, be sure to star it as well. 😉

Cheerios ✌🏻