From f503f247d69ad356ffdabee60eb69b27ac9705ac Mon Sep 17 00:00:00 2001 From: Junepil Lee Date: Sun, 16 Mar 2025 21:45:29 +0900 Subject: [PATCH 1/7] Edit docs --- packages/vscode-tailwindcss/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 621653085..61e94d968 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -6,7 +6,7 @@ Tailwind CSS IntelliSense enhances the Tailwind development experience by provid **[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** -In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and a [Tailwind config file](https://tailwindcss.com/docs/installation#create-your-configuration-file) named `tailwind.config.{js,cjs,mjs,ts,cts,mts}` in your workspace. +In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation). ## Features @@ -213,7 +213,6 @@ For projects with multiple config files, use an object where each key is a confi If you’re having issues getting the IntelliSense features to activate, there are a few things you can check: -- Ensure that you have a Tailwind config file in your workspace and that this is named `tailwind.config.{js,cjs,mjs,ts,cts,mts}`. Check out the Tailwind documentation for details on [creating a config file](https://tailwindcss.com/docs/configuration#creating-your-configuration-file). - Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`. - 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. - 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. From 80f6a24b86c4d542555789f153195577a0a0be8e Mon Sep 17 00:00:00 2001 From: Junepil Lee Date: Wed, 14 May 2025 01:13:08 +0900 Subject: [PATCH 2/7] docs: :memo: Add more explanation about the troubleshooting --- packages/vscode-tailwindcss/README.md | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 61e94d968..b966a04f3 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -213,6 +213,11 @@ For projects with multiple config files, use an object where each key is a confi If you’re having issues getting the IntelliSense features to activate, there are a few things you can check: +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: + +* A JavaScript config file (`tailwind.config.{js,cjs,mjs,ts,cts,mts}`), typically used in **v3 and earlier**. +* Or, for Tailwind CSS **v4** projects, configuration defined directly within your main CSS file using directives like `@import "tailwindcss";` and `@theme { ... }`. + - Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`. - 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. - 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. From b95ca85d7997b838223345d08fe48b6454c6427d Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 13 May 2025 13:16:05 -0400 Subject: [PATCH 3/7] Clarify that `tailwindCSS.classFunctions` are regex patterns --- packages/vscode-tailwindcss/README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index c35504dc7..9b3d9288e 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -94,11 +94,13 @@ The HTML attributes for which to provide class completions, hover previews, lint Functions in which to provide completions, hover previews, linting etc. Currently, this works for both function calls and tagged template literals in JavaScript / TypeScript. +Each entry is treated as regex pattern that matches on a function name. You *cannot* match on content before or after the function name — matches are anchored to function names only. + Example: ```json { - "tailwindCSS.classFunctions": ["tw", "clsx"] + "tailwindCSS.classFunctions": ["tw", "clsx", "tw\\.[a-z-]+"] } ``` @@ -108,6 +110,7 @@ let classes2 = clsx([ "flex bg-red-500", { "text-red-500": true } ]) +let element = tw.div`flex bg-red-500` ``` ### `tailwindCSS.colorDecorators` From c039c5a2838c65d67460e46bd2ebb73f5cc1b045 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 13 May 2025 13:30:50 -0400 Subject: [PATCH 4/7] Update readme --- packages/vscode-tailwindcss/README.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 9b3d9288e..65552f68a 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -6,7 +6,10 @@ Tailwind CSS IntelliSense enhances the Tailwind development experience by provid **[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** -In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation). +In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and one of these: +- For v4 and later, a `.css` file that imports a Tailwind CSS stylesheet (e.g. `@import "tailwindcss"`) +- For v3 and earlier, a stylesheet that points to a config file via `@config` +- 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. ## Features @@ -240,11 +243,9 @@ For projects with multiple config files, use an object where each key is a confi If you’re having issues getting the IntelliSense features to activate, there are a few things you can check: -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: +- 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: + - 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. + - 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). -* A JavaScript config file (`tailwind.config.{js,cjs,mjs,ts,cts,mts}`), typically used in **v3 and earlier**. -* Or, for Tailwind CSS **v4** projects, configuration defined directly within your main CSS file using directives like `@import "tailwindcss";` and `@theme { ... }`. - -- Ensure that the `tailwindcss` module is installed in your workspace, via `npm`, `yarn`, or `pnpm`. -- 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. +- 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. - 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. From 34a1358170645217f51c92944406ead2d6f5fb64 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Tue, 13 May 2025 13:32:22 -0400 Subject: [PATCH 5/7] Add note about multiple configs --- packages/vscode-tailwindcss/README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 65552f68a..19f5ed64e 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -249,3 +249,5 @@ If you’re having issues getting the IntelliSense features to activate, there a - 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. - 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. + +For projects with multiple installations of Tailwind CSS, multiple config files, or several stylesheets with `@import "tailwindcss"` we recommend using the `tailwindCSS.experimental.configFile` setting to explicitly state your stylesheet or config paths. From bd775d2c9e25929479073b2c4dd8a977e59c0580 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 May 2025 14:02:54 -0400 Subject: [PATCH 6/7] Apply suggestions from code review Co-authored-by: Jonathan Reinink --- packages/vscode-tailwindcss/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index 19f5ed64e..f78ab692c 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -7,6 +7,7 @@ Tailwind CSS IntelliSense enhances the Tailwind development experience by provid **[Install via the Visual Studio Code Marketplace →](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)** In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and one of these: + - For v4 and later, a `.css` file that imports a Tailwind CSS stylesheet (e.g. `@import "tailwindcss"`) - For v3 and earlier, a stylesheet that points to a config file via `@config` - 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. @@ -97,7 +98,7 @@ The HTML attributes for which to provide class completions, hover previews, lint Functions in which to provide completions, hover previews, linting etc. Currently, this works for both function calls and tagged template literals in JavaScript / TypeScript. -Each entry is treated as regex pattern that matches on a function name. You *cannot* match on content before or after the function name — matches are anchored to function names only. +Each entry is treated as regex pattern that matches on a function name. You *cannot* match on content before or after the function name — matches are limited to function names only. Example: @@ -245,9 +246,8 @@ If you’re having issues getting the IntelliSense features to activate, there a - 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: - 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. - - 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). + - 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}`), or a stylesheet that points to a config file via `@config`. - 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. - 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. - -For projects with multiple installations of Tailwind CSS, multiple config files, or several stylesheets with `@import "tailwindcss"` we recommend using the `tailwindCSS.experimental.configFile` setting to explicitly state your stylesheet or config paths. +- For projects with multiple installations of Tailwind CSS, multiple config files, or several stylesheets with `@import "tailwindcss"` we recommend using the `tailwindCSS.experimental.configFile` setting to explicitly state your stylesheet or config paths. From 3f8ae15d49cff135a3c4ecefc7329dc9309ea412 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 15 May 2025 14:03:38 -0400 Subject: [PATCH 7/7] Swap bullet points --- packages/vscode-tailwindcss/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vscode-tailwindcss/README.md b/packages/vscode-tailwindcss/README.md index f78ab692c..e1d7a4131 100644 --- a/packages/vscode-tailwindcss/README.md +++ b/packages/vscode-tailwindcss/README.md @@ -9,8 +9,8 @@ Tailwind CSS IntelliSense enhances the Tailwind development experience by provid In order for the extension to activate you must have [`tailwindcss` installed](https://tailwindcss.com/docs/installation) and one of these: - For v4 and later, a `.css` file that imports a Tailwind CSS stylesheet (e.g. `@import "tailwindcss"`) -- For v3 and earlier, a stylesheet that points to a config file via `@config` - 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. +- For v3 and earlier, a stylesheet that points to a config file via `@config` ## Features