การตรวจรูปแบบ Tailwind ด้วย ESLint

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.

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.

In the traditional .eslintrc format, add tailwindcss to the plugins array and extend the recommended configuration. The recommended set enables the three core rules: classnames-order, no-custom-classname, and no-contradicting-classname.

For ESLint 9's new flat config format, import the plugin and spread the recommended configuration into your config array. Point the tailwindConfig setting to your config file so the plugin reads your custom theme values and plugins when validating class names.

The no-contradicting-classname rule catches conflicting utilities applied to the same element — for example, using both block and inline on the same div, or w-full and w-auto together without a responsive prefix. These conflicts produce unpredictable results that are hard to debug without linting support.

The no-custom-classname rule warns when you write a class that is not part of the Tailwind output — neither a built-in utility nor a custom one defined in your config or plugins. This helps catch typos and prevents developers from writing plain CSS class names in a Tailwind project without going through the proper channels.

The classnames-order rule enforces the same canonical class order that the Prettier plugin produces. When you have both tools, configure one as the source of truth for ordering. Most teams use Prettier for auto-formatting and disable the ESLint ordering rule to avoid conflicts between the two tools.

If your project uses custom CSS class names alongside Tailwind utilities — for example, classes from a third-party animation library or legacy CSS — add them to the whitelist setting. This silences false positives while still catching genuine typos in Tailwind class names.

Add a lint script to your package.json that targets all template files. Run it locally and in CI to surface class name errors before they merge. The --fix flag auto-corrects ordering issues but cannot fix typos — those require manual review.

Install the ESLint VS Code extension to see underlined errors directly in the editor as you type. Tailwind class errors appear as yellow warnings or red errors inline, making it impossible to miss a typo. Combine this with the Tailwind CSS IntelliSense extension for autocomplete and the linting closes the feedback loop completely.

Use ESLint for validation — catching typos, contradictions, and unknown class names. Use Prettier for formatting — sorting classes into the canonical order. Disable the classnames-order ESLint rule to let Prettier own sorting exclusively. This separation of concerns gives you the best of both tools without conflict.

Test your understanding of Tailwind CSS Mastery concepts from this lesson.

In this lesson you learned: installing eslint-plugin-tailwindcss to catch typos and contradictions, the three core rules (no-contradicting-classname, no-custom-classname, classnames-order), and combining ESLint with Prettier so each tool owns its responsibility. Next up we define team conventions and a style guide.