Tailwind CSS for Visual Studio

Bring IntelliSense, linting, class sorting, build tools, and more to Tailwind CSS in Visual Studio 2026 and 2022.

Note: This extension best supports Tailwind CSS v3+.

Download from the Visual Studio Marketplace · Getting Started Guide · Changelog

This extension is built and maintained solo, in my free time, for the whole VS community.

If it's saved you time or made your workflow better, please consider sponsoring development on GitHub — even a small donation helps keep it going and directly funds new features and bug fixes.

• Prerequisites
• Setup
• Features
  • IntelliSense
  • Linting
  • Class Sorting
  • Build Integration
  • NPM Integration
  • Extension Options
• Troubleshooting
• Support & Feedback
• Disclaimer

This extension uses npm and node, so you should have them installed.

To check whether npm is installed, run npm -v in the terminal.

If you don't have npm installed, follow the official install guide from the npm docs.

The extension activates automatically when:

• Your solution contains a tailwind.config.{js,cjs,mjs,ts,cts,mts} file (Tailwind v3), or
• You're using Tailwind v4 and importing it in a .css file with @import "tailwindcss"

If the config file isn't detected automatically, right-click it in Solution Explorer and select Set as configuration file.

Get Tailwind class suggestions in Razor, HTML, and CSS files:

Automatically flags:

• Conflicting classes
• Invalid theme(), screen(), or @tailwind usage

Note: Visual Studio may still flag some Tailwind features like @apply as errors — extensions can't override these built-in warnings.

Sort Tailwind classes:

• Automatically on save or build
• Manually from the Tools menu

The extension can build your Tailwind CSS output automatically on project build, or manually from the Build menu.

• Make sure your input and 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:

Project-specific 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?

1. Set its path under Tools > Options > Tailwind CSS IntelliSense > Tailwind CLI path
2. Click Set up Tailwind CSS (use CLI)

Want to use a custom build script?

1. Define it in your package.json
2. Set the script name in the extension options (npm run your-script-name)

Global extension settings live under:

Tools > Options > Tailwind CSS IntelliSense

See Getting Started – Extension Configuration for details.

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.

Found a bug or have a feature request? Open an issue on GitHub.

Enjoying the extension? A rating on the Marketplace listing or a donation goes a long way toward keeping it maintained. 🙏

This is not an official Tailwind CSS extension and has no affiliation with Tailwind Labs Inc.