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

Enter fullscreen mode

Exit fullscreen mode

Minimal setup

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

export default createNextConfig ();

Enter fullscreen mode

Exit fullscreen mode

Why this works better

Instead of manually combining multiple configs, this approach:

standardizes rules

reduces setup…