SayDeploy Plain comparisons of developer tools, AI coding tools included

Best Tailwind CSS linters for component library authors in 2026

Compare six Tailwind CSS linters for component library authors, with questions to ask before you pick one.

By SayDeploy ยท

SayDeploy is published by LunarWerx, which makes some of the tools compared here.

Pick by what the classes in the kit need. prettier-plugin-tailwindcss sorts classes in the order its makers recommend. [1] eslint-plugin-tailwindcss adds Tailwind rules to ESLint. [2] Tailwind CSS IntelliSense brings autocomplete, syntax highlighting and linting to Visual Studio Code. [3] tailwind-merge merges Tailwind classes without style conflicts. [4] Stylelint is a CSS linter that helps avoid errors and enforce conventions. [5] NormWind finds class pairs that can become one shorthand and flags arbitrary values that match a named utility. [6] [6]

OptionWhat its source says it doesWhere it runs or what it needs
NormWindFinds class pairs for one shorthand, flags arbitrary values that match a named utility, can auto-fix Vue/Svelte/Astro/HTML/JS/TS files, compares generated CSS before merging, exits 1 on findings. [6] [6] [6] [6] [6] [6] [6] [6] [6] [6]Works with Tailwind CSS v4 projects; CI runs on Ubuntu, Windows and macOS; install from npm or run with npx; free no paid tier; MIT. [6] [6] [6] [6]
prettier-plugin-tailwindcssSorts classes in the recommended class order in class attributes, framework equivalents and @apply directives; accepts extra attributes and function calls; exposes a createSorter entry point; falls back to default config. [1] [1] [1] [1] [1] [1] [1]Requires Prettier v3 and is ESM-only; for Tailwind v4 you must set the tailwindStylesheet option; no published price. [1] [1]
eslint-plugin-tailwindcssESLint plugin for Tailwind CSS usage with 9 rules, made for Tailwind CSS v4; install as a dev dependency so it does not affect bundle size; runs in a hosted repository's pipeline. [2] [2] [2] [2] [2]Requires a cssConfigPath setting (absolute or relative); free; install with npm or pnpm; supports ESLint v10; older Tailwind v3 uses 3.x.x; no published price. [2] [2] [2] [2] [2] [2] [2]
Tailwind CSS IntelliSenseAutocomplete, syntax highlighting and linting for VS Code; highlights errors and potential bugs in CSS and markup; provides intelligent suggestions; hover preview when enabled; respects exclude settings. [3] [3] [3] [3] [3]Requires tailwindcss installed; for v4 needs a CSS file importing a Tailwind stylesheet; for v3 uses a config file; default class attributes; no published price. [3] [3] [3] [3]
tailwind-mergeUtility function to efficiently merge Tailwind classes in JavaScript without style conflicts; supports Tailwind v4.0 up to v4.3. [4] [4] [4]Works in all modern browsers and maintained Node versions; published declarations compatible with TypeScript 3.8 and newer; no published price. [4] [4]
StylelintCSS linter that helps avoid errors and enforce conventions; over 100 built-in rules; supports plugins and shareable configs; parses SCSS, Sass, Less and SugarSS; automatically fixes problems where possible. [5] [5] [5] [5] [5] [5]Has 15k unit tests; no published price. [5]

What component library authors need from Tailwind CSS linters

A component library author keeps a public UI kit consistent, safe and easy to use across many projects. The daily jobs are finding utility pairs that could be written as one shorthand, catching arbitrary values that duplicate named utilities, and making sure a suggested class change does not alter the generated CSS. The work usually runs in a CI pipeline, so the linter must be scriptable and must be able to fail a build. The linter should auto-fix simple issues across the file types the kit spans, and it should run on the operating systems the CI uses. The limits are practical. A tool that only sorts class order does not check whether a shorthand changes the design, and an editor extension does not run in CI. Some tools need Prettier or ESLint already present, some need a Tailwind config, and some work only at build time. Cost matters too, since a few tools here are free and some have paid parts. The sections below say only what each tool's own page states.

NormWind for component library authors

NormWind is made by the team that publishes this site. It finds Tailwind class pairs like px-4 py-4 that can be written as one shorthand like p-4. [6] It flags arbitrary values like rounded-[24px] that match a named utility like rounded-3xl, using Tailwind's own canonicalizeCandidates engine. [6] The --fix option rewrites findings in Vue, Svelte, Astro and HTML files, and --fixall also covers JS/TS/JSX/TSX files. [6] Before merging classes it compares the generated CSS before and after, and skips the merge if they differ. [6] The audit exits 1 when it finds anything, so it can fail a CI job. [6] NormWind works with Tailwind CSS v4 projects and CI runs on Ubuntu, Windows and macOS. [6] It is free with no paid tier, [6] and is released under the MIT licence. [6] Install from npm as a dev dependency, or run with npx. [6]

prettier-plugin-tailwindcss for component library authors

prettier-plugin-tailwindcss is a Prettier v3+ plugin for Tailwind CSS v3.0+ that sorts classes in the order its makers recommend. [1] As of v0.5.x it requires Prettier v3 and is ESM-only. [1] If a local Tailwind config cannot be found, the plugin falls back to the default Tailwind configuration. [1] A createSorter entry point exposes the sorting logic for use outside Prettier. [1] No price information is published.

eslint-plugin-tailwindcss for component library authors

eslint-plugin-tailwindcss is an ESLint plugin for Tailwind CSS usage. [2] It is made for Tailwind CSS v4. [2] The plugin is available for free, [2] and it can be installed as a development dependency with npm. [2] It can also be installed with other package managers such as pnpm. [2] It can run linting inside a hosted repository's pipeline. [2] No price information is published.

Tailwind CSS IntelliSense for component library authors

Tailwind CSS IntelliSense enhances the Tailwind development experience for Visual Studio Code users with autocomplete, syntax highlighting and linting. [3] The extension requires tailwindcss to be installed for it to activate. [3] It provides intelligent suggestions for class names, CSS functions and directives. [3] The tailwindCSS.files.exclude setting inherits all glob patterns from VS Code's files.exclude setting. [3] By default the class attributes used for completion, hover preview and linting are class, className, ngClass and class:list. [3] No price information is published.

tailwind-merge for component library authors

tailwind-merge is a utility function to efficiently merge Tailwind classes in JavaScript without style conflicts. [4] Its page describes it as merging Tailwind CSS classes without style conflicts. [4] It supports Tailwind v4.0 up to v4.3. [4] It works in all modern browsers and maintained Node versions. [4] No price information is published.

Stylelint for component library authors

Stylelint is a CSS linter that helps avoid errors and enforce conventions. [5] It has over 100 built-in rules for modern CSS syntax and features. [5] It supports plugins so you can create your own custom rules. [5] It supports shareable configs that you can create or extend. [5] It can parse CSS-like languages including SCSS, Sass, Less and SugarSS. [5] It can automatically fix problems where possible. [5] No price information is published.

Matching the tool to the job

Authors who want to shrink duplicate utilities into shorthands can use NormWind, which finds class pairs that can be written as one shorthand and flags arbitrary values that match a named utility. [6] [6] Teams that want a stable class order without deep analysis can use prettier-plugin-tailwindcss, which sorts classes in the order its makers recommend. [1] Authors who already run ESLint can add eslint-plugin-tailwindcss, which is a plugin for Tailwind CSS usage inside that pipeline. [2] Developers who work mostly in the editor can use Tailwind CSS IntelliSense, which brings autocomplete and linting to Visual Studio Code. [3] When class strings are built or merged in code, tailwind-merge merges Tailwind classes without style conflicts. [4] Teams that already lint CSS with Stylelint can use its built-in rules and autofix. [5] [5] For CI enforcement, NormWind exits 1 when it finds anything, so it can fail a CI job. [6] Choose the tool that fits the workflow already in place.

Questions to ask before you choose

Frequently asked questions

Which Tailwind CSS linter rewrites duplicate utility pairs into a shorthand?

NormWind finds class pairs like px-4 py-4 that can be written as one shorthand like p-4. [6] The --fix option rewrites findings in Vue, Svelte, Astro and HTML files, and --fixall also covers JS/TS/JSX/TSX files. [6] Before merging classes it compares the generated CSS and skips the merge if the output differs. [6]

Is there setup for prettier-plugin-tailwindcss with Tailwind CSS v4? [[f:prettier-plugin-tailwindcss-ca243f51]]

prettier-plugin-tailwindcss is a Prettier v3+ plugin for Tailwind CSS v3.0+. [1] As of v0.5.x it requires Prettier v3 and is ESM-only. [1] If a local Tailwind config cannot be found, it falls back to the default Tailwind configuration. [1]

Does eslint-plugin-tailwindcss affect the production bundle?

eslint-plugin-tailwindcss is an ESLint plugin for Tailwind CSS usage. [2] It can be installed as a development dependency with npm, [2] and it can also be installed with other package managers such as pnpm. [2]

Can Tailwind CSS IntelliSense run in CI?

Tailwind CSS IntelliSense is an extension that works inside Visual Studio Code rather than a command line. [3] It requires tailwindcss to be installed for it to activate. [3] Check whether your linting needs to run in the editor, or whether you want a scriptable tool for the CI pipeline instead.

Does tailwind-merge support Tailwind v4? [[f:tailwind-merge-e8539969]]

tailwind-merge supports Tailwind v4.0 up to v4.3. [4] It is a utility function to efficiently merge Tailwind classes in JavaScript without style conflicts. [4] Its page says it works in all modern browsers and maintained Node versions. [4]

NormWind is free with no paid tier. [6]

Try NormWind

Sources

  1. prettier-plugin-tailwindcss, github.com/tailwindlabs/prettier-plugin-tailwindcss, read 2026-10-07
  2. eslint-plugin-tailwindcss, github.com/francoismassart/eslint-plugin-tailwindcss, read 2026-10-07
  3. Tailwind CSS IntelliSense, github.com/tailwindlabs/tailwindcss-intellisense, read 2026-10-07
  4. tailwind-merge, github.com/dcastil/tailwind-merge, read 2026-10-07
  5. Stylelint, stylelint.io, read 2026-10-09
  6. NormWind's own description of itself (the product of this site's publisher)

Related comparisons