DEV Community

Cover image for My Experience with NextJs and TailwindCSS
Atharva Sune
Atharva Sune

Posted on

My Experience with NextJs and TailwindCSS

Since their release NextJs and TailwindCSS have garnered a lot of attention. NextJS for the many great features it provides, and tailwind-css for how easy it makes styling your application.

The GOOD

Built on top of React, NextJS is probably one of the most intuitive frameworks I have ever used. For quite a long time, my go to tool to start building React apps was the create-react-app cli. It allowed me, well not just me, it allowed anyone to build a react app pretty easily and get started with the development. But it had its issues and then finally it was deprecated, so move on to the next thing which can help build react apps easily. I took a look at some of the alternatives and decided to try NextJS.

NextJS was a really good experience, much faster development, easy tooling setup, and with NextJS 13 and App router, a structure to the whole application which just felt intuitive. The one specific thing that pulled me to NextJs was the ease of routing. The folder structure based routing, a very different way that what I was used to react-router-dom was the most striking aspect of NextJS to me. That combined with the additional benefits of Server Side Rendering, and I was sold on using NextJS.

Well that solved the react problem, then came styling. I was used to doing that with inline styles, or directly using some library like MaterialUI. Having used MaterialUI in almost all of my projects since I first learned of React, I was pretty comfortable with it but always felt something lacking. Sometimes the component was not exactly as I wished it, and I had to tweak it, which took its own time and learning, on other days, some components felt overly bulky and complicated for my use case. While both of these are minor issues, I wanted try something new, and well TailwindCSS looked pretty promising.
A utility CSS framework, that provides classnames for the most trivial of things, which combine together to make a great framework. It made styling that much more easy. All the components were exactly as I wanted, optimisation for different screen sizes became super easy, and the app started to look much more consistent with almost no hacks for any major or minor components around.

Overall my experience developing a website using both TailwindCSS and NextJS was pretty good. The development time was much much faster than before and the experience was really really good. The deployment of the app, also very easy, thanks to Vercel. Connect the repository with the Vercel project and every time I merge my changes to the release branch the site is built and launched.

The BAD

That's not to say the experience is all good, and these are the best frameworks / libraries.
They have their own challenges and shortcomings. With tailwindCSS the classNames of your components can get super long (not kidding even on a 24inch display with editor in full screen I had to scroll horizonatally for some components), with NextJS you have to be very careful about how you are structuring the application. It is very flexible, but some constraints do come up, and with support for both ServerSide rendering and Client Side rendering, you really have to think through which components will be Server Rendered and which Client Rendered.
Deploying a next app is not that easy, you need a server if you have any server side rendering in your app, unless you have your own cluster, hosting is not that straight forward. Many features are available only on Vercel based deployments.. so as you can understand there are certain challenges to both.

Final Thoughts

Both NextJS and Tailwind CSS are really great for developing front end applications. For personal projects, I would definitely recommend them, and then use free tiers of services like Vercel to deploy your app.

But when it comes to established websites, I am talking of all the organisations that build their websites, there the developer(s) will have to think. Depending on the use case, the requirements, and the complexity of the application, one could say NextJS is not really a good option, let's take a look at something else.

With all the features, these two frameworks do make your work easy and the development experience a breeze. You get to spend more time developing your application than dealing with many of the rough nitty gritty challenges of styling and building your app, and with the continuous development happening on them, they are sure to develop into strong contenders for all sorts of jobs be it professional or personal.

On that note, I would say, give it a try, build a small app, if you think its for you go ahead, you won't regret it, if not that's fine, look elsewhere.

Top comments (0)