Linting Tailwind With ESLint
Configure eslint-plugin-tailwindcss to warn about invalid class names, conflicting utilities, and enforce your team's class conventions.
Why Lint Your Tailwind Classes
Typos in Tailwind class names are silent errors — the browser simply ignores unknown classes with no warning in the console. A missing letter like bg-blue-50O (capital O instead of zero) applies no background, and the bug may go unnoticed for days. ESLint with a Tailwind plugin catches these issues at development time before they reach production.
Installing eslint-plugin-tailwindcss
eslint-plugin-tailwindcss is the most widely used ESLint plugin for Tailwind. It validates class names against your Tailwind config, warns about conflicting utilities, and can enforce your team's class ordering conventions. Install it alongside ESLint in your project's dev dependencies.
npm install -D eslint eslint-plugin-tailwindcss
# If using a flat config (ESLint 9+)
npm install -D @eslint/jsAll lessons in this course
- Auditing Your CSS Output
- Class Sorting and Prettier Plugin
- Linting Tailwind With ESLint
- Team Conventions and Style Guide