--- {"title": "eslint-plugin-tailwindcss vs Tailwind CSS IntelliSense in 2026", "description": "eslint-plugin-tailwindcss and Tailwind CSS IntelliSense compared on what each does, cost, setup and what to check, with NormWind as a third option.", "url": "https://saydeploy.com/eslint-plugin-tailwindcss-vs-tailwind-css-intellisense/", "date": "2026-10-29"} --- eslint-plugin-tailwindcss and Tailwind CSS IntelliSense compared on what each does, cost, setup and what to check, with NormWind as a third option. eslint-plugin-tailwindcss has 9 rules available, with more on the way [^1]. Tailwind CSS IntelliSense adds autocomplete, syntax highlighting and linting for Visual Studio Code users [^2]. NormWind is a third option that audits Tailwind class pairs from the command line [^3]. | Option | Price | Install | Tailwind version | |---|---|---|---| | eslint-plugin-tailwindcss | Free [^1] | npm i -D eslint-plugin-tailwindcss [^1] | Made for Tailwind CSS v4 [^1] | | Tailwind CSS IntelliSense | not published | Needs tailwindcss installed to activate [^2] | v4 and later use a CSS file importing Tailwind [^2] | | NormWind | Free with no paid tier [^3] | npm dev dependency, or npx [^3] | Tailwind CSS v4 projects [^3] | ## The short answer eslint-plugin-tailwindcss is an ESLint plugin for Tailwind CSS usage [^1]. Tailwind CSS IntelliSense gives Visual Studio Code users autocomplete, syntax highlighting and linting [^2]. On needs, the plugin's page says it can run linting inside a hosted repository's pipeline [^1]. IntelliSense's page describes suggestions for class names, CSS functions and directives [^2], and a hover that shows the complete CSS for a class name [^2]. NormWind's claims cover finding class pairs that can be written as one shorthand [^3] and failing a CI job when it finds anything [^3]. ## What eslint-plugin-tailwindcss, Tailwind CSS IntelliSense is built for eslint-plugin-tailwindcss calls itself an ESLint plugin for Tailwind CSS usage [^1]. Its page says 9 rules are available and more are on the way [^1]. It supports ESLint v10 [^1]. For Tailwind CSS v3 or older ESLint versions, the project provides eslint-plugin-tailwindcss@3.x.x [^1]. It needs a cssConfigPath setting [^1]. Tailwind CSS IntelliSense enhances the Tailwind development experience for Visual Studio Code users with autocomplete, syntax highlighting and linting [^2]. Its linting highlights errors and potential bugs in CSS and markup [^2]. It also offers a Tailwind CSS language mode that keeps CSS IntelliSense support for Tailwind-specific at-rules [^2]. ## What NormWind is built for 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 [^3]. It flags arbitrary values like rounded-[24px] that match a named Tailwind utility like rounded-3xl [^3]. The fix option rewrites findings in Vue, Svelte, Astro and HTML files, and the fixall option also covers JS/TS/JSX/TSX files [^3]. A dry run shows which files a fix would change without writing to disk [^3]. Before merging classes it compares the generated CSS before and after, and skips the merge if they differ [^3]. Output can be text, JSON or SARIF for GitHub code scanning [^3]. It ships as a GitHub Action that annotates pull requests inline [^3]. A diff base option reports only findings on lines changed since a git ref [^3], and a baseline option lets only new findings fail CI [^3]. ## Pricing and fees eslint-plugin-tailwindcss says it is available to everyone for free [^1]. Its sources give no other price. The Tailwind CSS IntelliSense facts here state no price, so its price is not published here. NormWind is free with no paid tier [^3]. It uses the MIT licence [^3]. ## Setting it up and daily use The plugin installs as a development dependency with npm i -D eslint-plugin-tailwindcss [^1], or with other package managers such as pnpm [^1]. As a dev dependency it does not affect your final bundle size [^1]. The path to the CSS configuration can be absolute or relative [^1]. For IntelliSense, the extension needs tailwindcss installed to activate [^2]. For v3 and earlier it can use a tailwind.config file in your workspace [^2]. Check the extension's own pages for what activates it on later Tailwind versions. By default, completion, hover and linting work on the HTML attributes that hold class names: class, className, ngClass and class:list [^2]. NormWind installs from npm as a dev dependency, or runs with npx [^3]. It works with Tailwind CSS v4 projects, and its CI runs on Ubuntu, Windows and macOS [^3]. ## Things to check before you choose Check where you want results: in the editor, in a lint run or in pull requests. IntelliSense is described for Visual Studio Code [^2], and NormWind annotates pull requests [^3]. Check your Tailwind version against each tool's own pages. NormWind works with v4 projects [^3]. Check your setup. The plugin needs a path to the CSS configuration file [^1]. Check whether you want automatic rewrites. Ask each tool's own pages, since the facts here cover this only for NormWind [^3]. ## How to choose If you want ESLint rules for Tailwind CSS usage, the plugin's page describes that [^1]. If you work in Visual Studio Code and want autocomplete and hover previews, IntelliSense's page describes them [^2]. If you want to find shorthand pairs and named utilities for arbitrary values, NormWind's claims describe that [^3]. If you want only new findings to fail CI, NormWind's claims describe a baseline option [^3]. If you want a free tool, the plugin says it is free [^1], and so does NormWind [^3]. ## Frequently asked questions ### Is eslint-plugin-tailwindcss free? Its page says it is available to everyone for free [^1]. The facts here give no other price for it. Check the project's own pages if you need detail beyond that. ### How do you install eslint-plugin-tailwindcss? It installs as a development dependency with npm i -D eslint-plugin-tailwindcss [^1]. Other package managers such as pnpm also work [^1]. A path to the CSS configuration file is mandatory [^1]. ### What does Tailwind CSS IntelliSense do in VS Code? It gives Visual Studio Code users autocomplete, syntax highlighting and linting [^2]. Hovering over a class name shows the complete CSS for it [^2]. Its page does not give a price, so check it before relying on it. ### What does Tailwind CSS IntelliSense need to activate? It needs tailwindcss installed [^2]. For v3 and earlier a tailwind.config file in the workspace can be used [^2]. Check the extension's own pages for what activates it on later Tailwind versions. ### Is NormWind free, and how is it installed? NormWind is free with no paid tier [^3]. It uses the MIT licence [^3]. You install it from npm as a dev dependency, or run it with npx [^3]. It works with Tailwind CSS v4 projects [^3]. NormWind is free with no paid tier. [^3] - [Visit NormWind](/go/eslint-plugin-tailwindcss-vs-tailwind-css-intellisense) ## Sources [^1]: eslint-plugin-tailwindcss, github.com/francoismassart/eslint-plugin-tailwindcss, read 2026-10-07 (https://github.com/francoismassart/eslint-plugin-tailwindcss) [^2]: Tailwind CSS IntelliSense, github.com/tailwindlabs/tailwindcss-intellisense, read 2026-10-07 (https://github.com/tailwindlabs/tailwindcss-intellisense) [^3]: NormWind's own description of itself (the product of this site's publisher) (/go/eslint-plugin-tailwindcss-vs-tailwind-css-intellisense)