Tailwind CSS VS2022 Editor Support
IntelliSense, linting, build shortcuts, and more for Tailwind CSS to enhance the development experience in Visual Studio 2022. NOTE: this extension is designed to be used with the latest version of Tailwind; there may be unintended effects when using earlier versions. Download from the Visual Studio Marketplace. To get started, view the Getting Started guide. ChangelogFor information on recent updates, see the changelog. DisclaimerThis is not an official Tailwind CSS extension and is not affiliated with Tailwind Labs Inc. PrerequisitesThis extension uses To check if you have If you do not have SetupThe extension will start in any solution with a If your configuration file is named differently/not found by the extension, you can set the file by right-clicking on it (must be a FeaturesIntelliSenseTailwind CSS classes show up in the IntelliSense completion menus in Razor, HTML, and CSS files: LintingThe linter will mark all class conflicts as well as invalid Linter options can be found in Tools > Options > Tailwind CSS IntelliSense > Linter. Extensions do not have the ability to override existing error tags, so Class SortingClasses can be sorted on a per-file basis on file save or by the whole solution on build: You can also manually sort by clicking the Tools menu at the top and selecting a sort option: Build IntegrationTo build your Tailwind file, ensure that your input and output css files are defined. By default, a project build will trigger the Tailwind build process, but this can be manually triggered under the Build menu. Build details and errors will be logged to the Build output window:
Set your configuration, build and output files by right-clicking on any
Your preferences will be stored in a NPM IntegrationWhen getting started in a new project, you can import the necessary modules by right-clicking on the project node: Using the standalone Tailwind CSS CLI:
If you need to override the default build command, Extension OptionsExtension settings are located in Tools > Options > Tailwind CSS IntelliSense. TroubleshootingBuildIf you notice that your build file is not being updated, check the Build output window to see if you have any syntax errors: ExtensionIf 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! SupportTo report issues or share feature suggestions, feel free to create an issue on GitHub. |