6+ Next JS Templates Tailwind CSS for 2022
Tags: tailwindcss, react, nextjs, javascript
Published: 2022-01-04 17:10:40

---
title: 6+ Next JS Templates Tailwind CSS for 2022
published: true
description: Download Next JS Tailwind templates built with TypeScript. A list of responsive Next JS landing pages and dashboards with React components.
tags: tailwind, react, nextjs, javascript
cover_image: https://creativedesignsguru.com/assets/images/themes/premium-tailwindcss-themes-reactjs.png
---

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:

{% github https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template %}

You can checkout the YouTube video for a demo:

{% youtube gWN0BF59MXs %}

Or, you can visualize the [Next JS Tailwind Landing Page](https://creativedesignsguru.com/demo/nextjs-landing-page/) live demo.

If you want to see the code, you browse [Next JS Lading Page Template GitHub](https://github.com/ixartz/Next-JS-Landing-Page-Starter-Template/)

🔥 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](https://creativedesignsguru.com/assets/images/themes/landing-indigo-modern-nextjs-theme-badge.png)](https://creativedesignsguru.com/landing-indigo-modern-react-theme/)

[Next JS Tailwind Theme](https://creativedesignsguru.com/landing-indigo-modern-react-theme/) - More info

## Next JS Tailwind Dashboard Template

[![Next JS Tailwind Dashboard Template](https://creativedesignsguru.com/assets/images/themes/dashboard-indigo-modern-nextjs-theme-badge.png)](https://creativedesignsguru.com/dashboard-indigo-modern-nextjs-theme/)

[Next JS Tailwind Dashboard Template](https://creativedesignsguru.com/dashboard-indigo-modern-nextjs-theme/) - More info

## Next JS Tailwind Landing Page Theme

[![Next JS Tailwind Landing Page Theme](https://creativedesignsguru.com/assets/images/themes/landing-green-modern-nextjs-theme-badge.png)](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/)

[Next JS Tailwind Landing Page Theme](https://creativedesignsguru.com/landing-green-modern-nextjs-theme/) - More info

## Next JS Tailwind Landing Page

[![Next JS Tailwind Landing Page](https://creativedesignsguru.com/assets/images/themes/landing-blue-modern-nextjs-theme-badge.png)](https://creativedesignsguru.com/landing-blue-modern-react-theme/)

[Next JS Tailwind Landing Page](https://creativedesignsguru.com/landing-blue-modern-react-theme/) - More info

## Next JS Tailwind Landing Page Template

[![Next JS Tailwind Landing Page Template](https://creativedesignsguru.com/assets/images/themes/landing-purple-modern-nextjs-theme-badge.png)](https://creativedesignsguru.com/landing-purple-modern-react-theme/)

[Next JS Tailwind Landing Page Template](https://creativedesignsguru.com/landing-purple-modern-react-theme/) - 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.