Best ESLint Config for Next.js (TypeScript + Tailwind Setup Guide)

If you're using Next.js with TypeScript and Tailwind CSS, setting up ESLint correctly is harder than it should be.

Most guides either:

• cover only basics

• ignore Tailwind

• or don’t scale for real projects

This guide gives you a complete, scalable ESLint setup for Next.js.

---

What we want from ESLint in Next.js

A good setup should:

• support TypeScript

• enforce React hooks rules

• align with Next.js best practices

• handle Tailwind CSS properly

• scale across projects

---

Installation

npm install -D eslint@^9 @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks @next/eslint-plugin-next eslint-plugin-tailwindcss prettier prettier-plugin-tailwindcss

---

Minimal setup

import createNextConfig from "@iamankeshsharma/eslint-config/next";

export default createNextConfig();

---

Why this works better

Instead of manually combining multiple configs, this approach:

• standardizes rules

• reduces setup complexity

• avoids config conflicts

• works with ESLint v9 flat config

---

Tailwind support

"tailwindcss/classnames-order": "warn",
"tailwindcss/no-contradicting-classname": "error"

This improves:

• readability

• consistency

• maintainability

---

Common mistakes

• mixing old .eslintrc with flat config

• ignoring Tailwind linting

• disabling rules instead of fixing structure

---

Final setup

import createNextConfig from "@iamankeshsharma/eslint-config/next";

export default createNextConfig();

---

Try it

If you want a production-ready setup:

@iamankeshsharma/eslint-config