Skip to content

Help make the extensions Marketplace better for everyone. Take this survey!

| Marketplace
Sign in
Visual Studio>Tools>Tailwind CSS VS2022 Editor Support
Tailwind CSS VS2022 Editor Support

Tailwind CSS VS2022 Editor Support

Theron Wang

|
870 installs
| (4) | Free
Unofficial VS2022 extension for Tailwind CSS, offering editor features such as IntelliSense, build integration, and more.
Download

Tailwind CSS VS2022 Editor Support

Visual Studio Marketplace Downloads Visual Studio Marketplace Version (including pre-releases)

Editor features such as IntelliSense, build integration, among others for Tailwind CSS to enhance the development experience in Visual Studio 2022.

NOTE: this extension is designed to be used with Tailwind v3.0.0+; there may be unintended effects when using earlier versions.

Download from the Visual Studio Marketplace.

To get started, view this guide.

Changelog

For information on recent updates, see the changelog.

Disclaimer

This is NOT an official Tailwind CSS extension and is NOT affiliated with Tailwind Labs Inc.

Prerequisites

This extension uses npm for multiple features, so you should have npm installed to avoid errors.

To check if you have npm installed, run npm -v in the terminal.

If you do not have npm installed, follow this tutorial from the official npm docs.

Usage

IntelliSense

Tailwind CSS classes show up in the IntelliSense completion menus in Razor, HTML, and CSS files:

Intellisense Demo

Customization support for theme and theme.extension values:

Custom Configuration File

Intellisense Demo 2

Please note that referencing theme values using functions (({ theme }) => ({ ... })) is not yet supported.

Build Integration

When in a project, you can run the project to build Tailwind CSS or access it via the Build menu:

Build Demo 1

In an open folder context, however, you must right click the folder instead to toggle the build process.

After the process has started, the process will continue to build and output data to the Build window pane:

Build Demo 2

Custom package.json scripts are supported on build:

NPM Package.json

You can customize the behavior in Tools > Options > TailwindCSS IntelliSense > Custom Build.

NPM Integration

When getting started in a new project, you can import the necessary modules by right-clicking on the project node:

NPM Shortcut 1

Customizability

Build

When using the default Tailwind build process, you can set the following:

If you want to explicitly state the configuration file, you can right click any JavaScript file as follows:

Customizability Build 1

Likewise, for the build file and the output file, you can also explicitly state which CSS files you want:

Customizability Build 2

If you right click on each file again, you will find a remove option to set it back to the default.

Please note that the extension creates a tailwind.extension.json file in your project root.

Extension Options

Extension settings are located in Tools > Options > TailwindCSS Intellisense.

Troubleshooting

Build

If you notice that your build file is not being updated, check the Build output window to see if you have any syntax errors:

Build Error Output
Build output modified for brevity

Extension

If something doesn't work as expected or you see an exception message, you can check the detailed log in the Extensions output window.

Please report any errors that you encounter!

Limitations

Visual Studio does not provide an API to override error tagging, so you will see the CSS directives (@apply, @tailwind, etc.) marked as errors.

Bugs / Suggestions

If you run into any issues or come up with any feature suggestions while using this extension, please create an issue on GitHub.

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft