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 Dashboard Template

Next JS Tailwind Landing Page Theme

Next JS Tailwind Landing Page

Next JS Tailwind Landing Page Template

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.

31