A minimalistic boilerplate for the Next JS and Tailwind CSS lover!
Recently, I've started learning Next JS and Tailwind CSS for my company's purpose. I assume you already know Next JS is a full-stack and SEO-friendly framework. In React JS, the most important stuff is routing. Sometimes, setting up the React Router or the related routing library is a headache. But, in Next JS, you don't need to install a third-party routing library or make the route manually. Previously, I was used to Bootstrap. Bootstrap is beginner friendly, but there are a lot of limitations. So, I planned to explore Tailwind CSS. After exploring the docs and video tutorials, I was impressed. There's no need to write a single line of vanilla CSS if you use Tailwind CSS. They provide a lot of customization features. Today's trend is - every website builds with light and dark mode features. Using Tailwind CSS, it's too easy to implement the light and dark mode features.
<Layout />Layout
<ContainerLayout />ContainerLayout
<Navbar />Navbar
<Footer />Footer
<ThemeToggler />ThemeToggler
<NextNProgress />NextNProgress
<ScrollToTop />ScrollToTop
<404 />404
“@/components”“@/components”
Git Clone
https://github.com/imRHB/nextjs-tailwind-theme-template.git
Change Directory
cd nextjs-tailwind-theme-template
Install Dependencies
npm install
Run
npm run dev
This template also includes four other packages that you might need. The first one is the Heroicons library which allows you to use icons. The second one is Next Themes. It helps you to implement the light and dark modes using Tailwind's dark class attribute. The third one is the Next JS Progres Bar. And Lastly, React Scroll To Top package. It allows you to scroll to the top with a single click.
Next JS
A Full Stack Framework
Tailwind CSS
An Utility Based UI Framework