DEV Community

Cover image for 6+ Next JS Templates Tailwind CSS for 2022
Remi W.
Remi W.

Posted on

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:

GitHub logo 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 Twitter

Next js starter banner

πŸš€ 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

Nextjs Landing Page Template Screenshot

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…




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

Next JS Tailwind Theme - More info

Next JS Tailwind Dashboard Template

Next JS Tailwind Dashboard Template

Next JS Tailwind Dashboard Template - More info

Next JS Tailwind Landing Page Theme

Next JS Tailwind Landing Page Theme

Next JS Tailwind Landing Page Theme - More info

Next JS Tailwind Landing Page

Next JS Tailwind Landing Page

Next JS Tailwind Landing Page - More info

Next JS Tailwind Landing Page Template

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.

Discussion (0)