‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌
‌

This website collects cookies to deliver better user experience

6+ Next JS Templates Tailwind CSS for 2022

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…

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.

36

Categories:

React Javascript

Tags:

Tailwindcss React Nextjs Javascript

Related Posts

loading...

loading...

loading...

loading...

loading...

loading...

loading...

loading...