Skip to content

Commit c039c5a

Browse files
committed
Update readme
1 parent b95ca85 commit c039c5a

File tree

1 file changed

+8
-7
lines changed

1 file changed

+8
-7
lines changed

packages/vscode-tailwindcss/README.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,10 @@ Tailwind CSS IntelliSense enhances the Tailwind development experience by provid
66

77
**[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)**
88

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

1114
## Features
1215

@@ -240,11 +243,9 @@ For projects with multiple config files, use an object where each key is a confi
240243

241244
If you’re having issues getting the IntelliSense features to activate, there are a few things you can check:
242245

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

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

Comments
 (0)