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

❤️ Support This Project

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.

Table of Contents

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

Prerequisites

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.

Setup

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 Add Tailwind CSS configuration file.

Features

IntelliSense

Get Tailwind class suggestions in Razor, HTML, and CSS files, including custom theme values. Color previews and CSS descriptions help you choose the right utility:

Linting

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.

Class Sorting

Sort Tailwind classes:

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

With Tailwind CSS v4.2 or later, the Tools menu also offers Canonicalize Tailwind classes commands to replace utilities with their recommended equivalents. You can configure canonicalization to run on save or build in the extension options.

Build Integration

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 files, right-click them in Solution Explorer. Use Add Tailwind CSS configuration file for your configuration, Add Tailwind CSS input file for your input CSS, and Set as Tailwind CSS output file for the output.

Project-specific settings are saved in a tailwind.extension.json file in your project root.

NPM Integration

To set up a project, right-click it in Solution Explorer and choose Set up Tailwind CSS > Set up and install in project. You can also use an existing global NPM installation:

Using the Tailwind CLI?

1. Set its path under Tools > Options > Tailwind CSS IntelliSense > Tailwind CLI path
2. Right-click your project and choose Set up Tailwind CSS > Set up using CLI standalone

Want to use a custom build script?

1. Define it in your package.json
2. Set Build script in the extension options to the script's name (for example, build:css)

Extension Options

Global extension settings live under:

Tools > Options > Tailwind CSS IntelliSense

See Getting Started – Extension Configuration for details.

Troubleshooting

Build Issues

If your CSS isn't updating, check the Build output window for Tailwind errors.

Extension Issues

If the extension crashes or behaves unexpectedly, check the Extensions output window for detailed logs.

Support & Feedback

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. 🙏

Disclaimer

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