Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
January 4, 2022 05:10 pm GMT

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.


Original Link: https://dev.to/ixartz/6-next-js-template-tailwind-css-for-2022-2069

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To