{"id":14627196,"url":"https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS","last_synced_at":"2025-09-06T13:31:18.709Z","repository":{"id":182608770,"uuid":"668792750","full_name":"theron-wang/VS2022-Editor-Support-for-Tailwind-CSS","owner":"theron-wang","description":"Unofficial VS2022 Tailwind CSS extension for IntelliSense, linting, sorting, and more to enhance the development experience in Visual Studio 2022.","archived":false,"fork":false,"pushed_at":"2024-12-31T04:40:54.000Z","size":4059,"stargazers_count":97,"open_issues_count":2,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-12-31T05:26:52.522Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=TheronWang.TailwindCSSIntellisense","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/theron-wang.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"theron-wang"}},"created_at":"2023-07-20T15:45:51.000Z","updated_at":"2024-12-31T04:40:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"1e06443a-e38e-4140-b13e-3c1184d2eab1","html_url":"https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS","commit_stats":null,"previous_names":["theron-wang/vs2022-editor-support-for-tailwind-css"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theron-wang%2FVS2022-Editor-Support-for-Tailwind-CSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theron-wang%2FVS2022-Editor-Support-for-Tailwind-CSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theron-wang%2FVS2022-Editor-Support-for-Tailwind-CSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theron-wang%2FVS2022-Editor-Support-for-Tailwind-CSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theron-wang","download_url":"https://codeload.github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":232125348,"owners_count":18476158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-09T09:01:13.812Z","updated_at":"2025-09-06T13:31:18.671Z","avatar_url":"https://github.com/theron-wang.png","language":"C#","funding_links":["https://github.com/sponsors/theron-wang"],"categories":["IDE extensions"],"sub_categories":[],"readme":"# Tailwind CSS VS2022 Editor Support \n\n![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/TheronWang.TailwindCSSIntellisense) ![Visual Studio Marketplace Rating](https://img.shields.io/visual-studio-marketplace/r/TheronWang.TailwindCSSIntellisense) ![Visual Studio Marketplace Version (including pre-releases)](https://img.shields.io/visual-studio-marketplace/v/TheronWang.TailwindCSSIntellisense)\n\nBring IntelliSense, linting, class sorting, build tools, and more to Tailwind CSS development in Visual Studio 2022.\n\n\u003e **Note**: This extension best supports the latest versions of Tailwind CSS (v3, v4, and v4.1).\n\n- [Download from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=TheronWang.TailwindCSSIntellisense)\n\n- [Getting Started Guide](https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/blob/main/Getting-Started.md)\n\n## Changelog\n\nFor information on recent updates, see [the changelog](https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/blob/main/CHANGELOG.md).\n\n## Disclaimer\n\nThis is **not** an official Tailwind CSS extension and has **no affiliation** with Tailwind Labs Inc. \n\n## Prerequisites\n\nThis extension uses `npm` and `node`, so you should have them installed.\n\nTo check if you have `npm` installed, run `npm -v` in the terminal.\n\nIf you do not have `npm` installed, follow the [official install guide](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) from the official npm docs.\n\n## Setup\n\nThe extension activates when:\n- Your solution has a `tailwind.config.{js,cjs,mjs,ts,cts,mts}` file (for v3), or\n- You're using Tailwind v4 and importing it in a `.css` file (`@import \"tailwindcss\"`)\n\nIf your config file isn't detected, right-click it in Solution Explorer → **Set as configuration file**.\n\n## Features\n\n### IntelliSense\n\nGet Tailwind class suggestions in Razor, HTML, and CSS files:\n\n![Intellisense Demo](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/IntelliSense-Demo-1.gif)\n\n### Linting\n\nAutomatically flags:\n- Conflicting classes\n- Invalid `theme()`, `screen()`, or `@tailwind` usage\n\nNote: Visual Studio might still flag some Tailwind features like `@apply` as errors—extensions can't override these tags.\n\n![Linter](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/Linter.png)\n\n### Class Sorting\n\nSort Tailwind classes:\n- Automatically on save or build\n- Manually from the **Tools** menu\n\n![Class Sort Demo 1](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/class-sort-demo.gif)\n\n![Class Sort Demo 2](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/Class-Sort-2.png)\n\n### Build Integration\n\nThe extension can build your Tailwind CSS output when you build your project (or manually from the **Build** menu).\n- Make sure your input/output CSS files are defined\n- Output and errors appear in the Build output window\n\n![Build Demo 1](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/Build-Demo-1.png)\n\n![Build Demo 2](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/Build-Demo-2.png)\n\nTo configure build and configuration files, right-click `.js`, `.ts`, or `.css` files:\n\n![Customizability Build 1](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/Customizability-Build-1.png)\n\n![Customizability Build 2](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/Customizability-Build-2.png)\n\nSettings are saved in a `tailwind.extension.json` file in your project root.\n\n### NPM Integration\n\nStart quickly by right-clicking your project and selecting a startup task:\n\n![NPM Shortcut 1](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/NPM-Shortcuts-1.png)\n\nUsing the Tailwind CLI?\n- Set its path under **Tools \u003e Options \u003e Tailwind CSS IntelliSense \u003e Tailwind CLI path**\n- Click **Set up Tailwind CSS (use CLI)**\n\nWant to use a custom build script?\n- Define it in your `package.json`\n- Set the script name in the extension options (`npm run your-script-name`)\n\n### Extension Options\n\nFind global extension settings in:\n\n\u003e **Tools \u003e Options \u003e Tailwind CSS IntelliSense**\n\nMore details: [Getting Started – Extension Configuration](https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/blob/main/Getting-Started.md#extension-configuration)\n\n## Troubleshooting\n\n### Build Issues\n\nIf your CSS isn't updating:\n- Check the **Build output** window for Tailwind errors.\n\n![Build Error Output](https://raw.githubusercontent.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/main/art/Troubleshooting-Build.png)\u003cbr\u003e\n\n### Extension Issues\n\nIf the extension crashes or behaves unexpectedly:\n- Check the Extensions output window for detailed logs.\n\n## Support\n\nTo report issues or share feature suggestions, feel free to create an issue [on GitHub](https://github.com/theron-wang/VS2022-Editor-Support-for-Tailwind-CSS/issues/new).\n\nIf this extension has helped you, please consider [leaving a small donation](https://github.com/sponsors/theron-wang) to support development!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheron-wang%2FVS2022-Editor-Support-for-Tailwind-CSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftheron-wang%2FVS2022-Editor-Support-for-Tailwind-CSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftheron-wang%2FVS2022-Editor-Support-for-Tailwind-CSS/lists"}