Tailwind CSS VS2022 Editor Support

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:

Customization support for theme and theme.extension values:

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:

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:

Custom package.json scripts are supported on build:

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:

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:

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

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