KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #dsh #dsh-plugin #ai-agent #codex #ai-agents #deepseek-harness #claude-code #cli #react #mcp

Tailwind-CSS-for-Visual-Studio

★ 149 Open GitHub ↗

Unofficial Tailwind CSS extension for IntelliSense, linting, sorting, and more to enhance the development experience in Visual Studio 2026 and 2022.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Tailwind CSS for Visual Studio

![version](https://vsmarketplacebadges.dev/version-short/TheronWang.TailwindCSSIntellisense.jpg)
![installs](https://vsmarketplacebadges.dev/installs-short/TheronWang.TailwindCSSIntellisense.jpg)

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](https://marketplace.visualstudio.com/items?itemName=TheronWang.TailwindCSSIntellisense)** · **[Getting Started Guide](https://github.com/theron-wang/Tailwind-CSS-for-Visual-Studio/blob/main/Getting-Started.md)** · **[Changelog](https://github.com/theron-wang/Tailwind-CSS-for-Visual-Studio/blob/main/CHANGELOG.md)**

---

## ❤️ 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](https://github.com/sponsors/theron-wang)** — even a small donation helps keep it going and directly funds new features and bug fixes.

---

## Table of Contents

- [Prerequisites](#prerequisites)
- [Setup](#setup)
- [Features](#features)
  - [IntelliSense](#intellisense)
  - [Linting](#linting)
  - [Class Sorting](#class-sorting)
  - [Build Integration](#build-integration)
  - [NPM Integration](#npm-integration)
  - [Extension Options](#extension-options)
- [Troubleshooting](#troubleshooting)
- [Support & Feedback](#support--feedback)
- [Disclaimer](#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](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) 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 **Set as configuration file**.

## Features

### IntelliSense

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

### 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

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

### NPM Integration

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`)

### Extension Options

Global extension settings live under:

> **Tools > Options > Tailwind CSS IntelliSense**

See [Getting Started – Extension Configuration](https://github.com/theron-wang/Tailwind-CSS-for-Visual-Studio/blob/main/Getting-Started.md#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](https://github.com/theron-wang/Tailwind-CSS-for-Visual-Studio/issues/new).

Enjoying the extension? A rating on the [Marketplace listing](https://marketplace.visualstudio.com/items?itemName=TheronWang.TailwindCSSIntellisense) or a **[donation](https://github.com/sponsors/theron-wang)** 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.

Tailwind-CSS-for-Visual-Studio

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README