Bring IntelliSense, linting, class sorting, build tools, and more to Tailwind CSS development in Visual Studio 2022.
Note: This extension best supports the latest versions of Tailwind CSS (v3, v4, and v4.1).
For information on recent updates, see the changelog.
This is not an official Tailwind CSS extension and has no affiliation with Tailwind Labs Inc.
This extension uses npm and node, so you should have them installed.
To check if you have npm installed, run npm -v in the terminal.
If you do not have npm installed, follow the official install guide from the official npm docs.
The extension activates when:
- Your solution has a
tailwind.config.{js,cjs,mjs,ts,cts,mts}file (for v3), or - You're using Tailwind v4 and importing it in a
.cssfile (@import "tailwindcss")
If your config file isn't detected, right-click it in Solution Explorer → Set as configuration file.
Get Tailwind class suggestions in Razor, HTML, and CSS files:
Automatically flags:
- Conflicting classes
- Invalid
theme(),screen(), or@tailwindusage
Note: Visual Studio might still flag some Tailwind features like @apply as errors—extensions can't override these tags.
Sort Tailwind classes:
- Automatically on save or build
- Manually from the Tools menu
The extension can build your Tailwind CSS output when you build your project (or manually from the Build menu).
- Make sure your input/output CSS files are defined
- Output and errors appear in the Build output window
To configure build and configuration files, right-click .js, .ts, or .css files:
Settings are saved in a tailwind.extension.json file in your project root.
Start quickly by right-clicking your project and selecting a startup task:
Using the Tailwind CLI?
- Set its path under Tools > Options > Tailwind CSS IntelliSense > Tailwind CLI path
- Click Set up Tailwind CSS (use CLI)
Want to use a custom build script?
- Define it in your
package.json - Set the script name in the extension options (
npm run your-script-name)
Find global extension settings in:
Tools > Options > Tailwind CSS IntelliSense
More details: Getting Started – Extension Configuration
If your CSS isn't updating:
- Check the Build output window for Tailwind errors.
If the extension crashes or behaves unexpectedly:
- Check the Extensions output window for detailed logs.
To report issues or share feature suggestions, feel free to create an issue on GitHub.
If this extension has helped you, please consider leaving a small donation to support development!