6+ Next JS Templates Tailwind CSS for 2022

Starting a new project is hard and one the most important things is to build a landing page. A really important steps before launching any projects.

Currently, one of most trendy framework in JavaScript ecosystem is Next JS. I use Next JS in JAMStack mode and Tailwind CSS to save costs and time.

So, I have built several landing pages for my products and at the end I was reinvent the wheel all the time by building several landing pages from scratch using Next JS 12 and Tailwind CSS 3.

I thought it was great to build beautiful templates with the best developer experience. So, I open sourced my landing page template:

ixartz / Next-JS-Landing-Page-Starter-Template

🚀 Free NextJS Landing Page Template written in Tailwind CSS 3 and TypeScript ⚡️ Made with developer experience first: Next.js 12 + TypeScript + ESLint + Prettier + Husky + Lint-Staged + VSCode + Netlify + PostCSS + Tailwind CSS

Landing Page Template built with Next JS 12+, Tailwind CSS 3 and TypeScript

🚀 Landing Page theme written in Next.js, Tailwind CSS and TypeScript ⚡️ Made with developer experience first: Next.js, TypeScript, ESLint, Prettier, Husky, Lint-Staged, VSCode, Netlify, PostCSS, Tailwind CSS.

Clone this project and use it to create your own Next.js project. You can check a Next js templates demo.

DEMO

Check out our live demo.

Features

Developer experience first:

• 🔥 Next.js for Static Site Generator
• 🎨 Integrate with Tailwind CSS
• 💅 PostCSS for processing Tailwind CSS and integrated to styled-jsx
• 🎉 Type checking TypeScript
• ✅ Strict Mode for TypeScript and React 17
• ✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
• 🛠 Code Formatter with Prettier
• 🦊 Husky for Git Hooks
• 🚫 Lint-staged for running linters on Git staged files
• 🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier…

View on GitHub

You can checkout the YouTube video for a demo:

Or, you can visualize the Next JS Tailwind Landing Page live demo.

If you want to see the code, you browse Next JS Lading Page Template GitHub

🔥 Next.js 12
🎨 styled with Tailwind CSS 3
💅 PostCSS for processing Tailwind CSS and integrated to styled-jsx
🎉 Type checking TypeScript
✅ Strict Mode for TypeScript and React 17
✏️ Linter with ESLint (default NextJS, NextJS Core Web Vitals and Airbnb configuration)
🛠 Code Formatter with Prettier
🦊 Husky for Git Hooks
🚫 Lint-staged for running linters on Git staged files
🗂 VSCode configuration: Debug, Settings, Tasks and extension for PostCSS, ESLint, Prettier, TypeScript
🤖 SEO metadata, JSON-LD and Open Graph tags with Next SEO
⚙️ Bundler Analyzer
🖱️ One click deployment with Vercel or Netlify (or manual deployment to any hosting services)
🌈 Include a FREE theme
💯 Maximize lighthouse score

Built-in feature from Next.js:

☕ Minify HTML & CSS
💨 Live reload
✅ Cache busting

You can also checkout my other Next JS Tailwind Template:

Next JS Tailwind Theme

Next JS Tailwind Theme - More info

Next JS Tailwind Dashboard Template

Next JS Tailwind Dashboard Template - More info

Next JS Tailwind Landing Page Theme

Next JS Tailwind Landing Page Theme - More info

Next JS Tailwind Landing Page

Next JS Tailwind Landing Page - More info

Next JS Tailwind Landing Page Template

Next JS Tailwind Landing Page Template - More info

Disclamer

I'm the maker of all these 7 themes and I have learned so much by making these themes. I'll definitely share my experience with tutorials and articles.