NextJS and TailwindCSSGetting my head around JS framework and CSS framework of choice

I find the front end frameworks a little over the top for the job they're required to do. We can benefit as developers of not just running to a solution without thinking through why we would use said solution.

It started a few years ago with jQuery and Mootools, back when JavaScript was a little lawless and in a dark place and JS support across browsers was inconsistent. It often came down to which solution was selected by which developer had implemented the project and which framework they preferred . Vanilla JavaScript was available but it wasn't easy to code with and often wasn't supported by the browsers available, these tools gave you a simpler solution to writing your functions. Over time JS became a bit more manageable and supported, so vanilla was a much better option as you're not adding any additional plugins to run native scripts, which improved page speeds.

Remember that React came about as a solution to a problem that didn't exist. PHP has been the choice of back end for a number of projects and probably still runs the majority of sites today. This was just a spat about performance which resulted in the birth of React, which to me made no sense.

So what am I writing here... I could go over the history of JavaScript but that's not the purpose of this story.


So I wanted to try out Next on a personal project, I had used it on a couple of projects but never built from the start, so I always inherited a lot of code (some good, some bad, some terrible | I won't name and shame). But all in it's a very simple framework to get used to. There is obviously some tooling I can use to make life a bit easier on myself, but for now it's a handful of components. Might extend it out and use something like Storyblok as a back end, but for now it's just a test site.


Now this is where I struggled. I am a purist when it comes to CSS and I saw Tailwind as an interesting concept, but the learning versus what I could actually do was a bit of a pain, until I realized I could use my own classes and use @apply so I had custom classes. This did make the learning a lot easier, but I still feel it's CSS with extra steps. But it's more manageable than SCSS projects which are very quick to go out of control, and with the nature of modular components, I pretty much encapsulate my components into easy to manage blocks. One I have the back end up and running it should make a much more robust compossible design system for reusable components.


I have also started work on an accompanying storybook build to manage the atomic nature of these components and it's currently a work in progress.

Built withGatsby&Netlify©2024 Nick Meincken