You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/vscode-tailwindcss/README.md
+8-7Lines changed: 8 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,10 @@ Tailwind CSS IntelliSense enhances the Tailwind development experience by provid
6
6
7
7
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
8
8
9
-
In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation).
9
+
In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and one of these:
10
+
- For v4 and later, a `.css` file that imports a Tailwind CSS stylesheet (e.g. `@import "tailwindcss"`)
11
+
- For v3 and earlier, a stylesheet that points to a config file via `@config`
12
+
- For v3 and earlier, a [Tailwind CSS config file](https://v3.tailwindcss.com/docs/configuration#creating-your-configuration-file) named `tailwind.config.{js,cjs,mjs,ts,cts,mts}` in your workspace.
10
13
11
14
## Features
12
15
@@ -240,11 +243,9 @@ For projects with multiple config files, use an object where each key is a confi
240
243
241
244
If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:
242
245
243
-
In order for the extension to activate, you must have `tailwindcss` installed in your workspace. The extension will then attempt to detect your Tailwind CSS configuration, which can be located in one of the following:
246
+
- You must have `tailwindcss` installed in your workspace via `npm`, `pnpm`, or `yarn`. The extension will then attempt to detect your Tailwind CSS configuration, which can be located in one of the following:
247
+
- For Tailwind CSS **v4** projects, configuration defined directly within your main CSS file using directives like `@import "tailwindcss";` and `@theme { ... }`. Preprocessor files like Less, Sass, or Stylus are not supported. A `.css` file is **required** for IntelliSense to function.
248
+
- For Tailwind CSS **v3 and earlier**, a Tailwind CSS config file in your workspace whose name matches (`tailwind.config.{js,cjs,mjs,ts,cts,mts}`). Check out the Tailwind documentation for details on [creating a config file](https://v3.tailwindcss.com/docs/configuration#creating-your-configuration-file).
244
249
245
-
* A JavaScript config file (`tailwind.config.{js,cjs,mjs,ts,cts,mts}`), typically used in **v3 and earlier**.
246
-
* Or, for Tailwind CSS **v4** projects, configuration defined directly within your main CSS file using directives like `@import "tailwindcss";` and `@theme { ... }`.
247
-
248
-
- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`.
249
-
- Make sure your VS Code settings aren’t causing your Tailwind config file to be hidden/ignored, for example via the `files.exclude` or `files.watcherExclude` settings.
250
+
- Make sure your VS Code settings aren’t causing your stylesheet or your Tailwind CSS config file to be hidden/ignored, for example via the `files.exclude`, `files.watcherExclude`, or `tailwindCSS.files.exclude` settings.
250
251
- Take a look at the language server output by running the `Tailwind CSS: Show Output` command from the command palette. This may show errors that are preventing the extension from activating.
0 commit comments