From a01a2ed0e0844ded77bb386616d608220e9c33db Mon Sep 17 00:00:00 2001
From: Smit Barmase <heysmitbarmase@gmail.com>
Date: Tue, 16 Sep 2025 20:06:14 +0530
Subject: [PATCH] languages: Add Tailwind CSS support for TypeScript (#38254)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Closes #37028

I noticed many projects use Tailwind in plain TypeScript (.ts) files, so
it makes sense to support them out of the box, alongside .js and .tsx
files we already handle. For example, see
[supabase](https://github.com/supabase/supabase/blob/master/packages/ui/src/lib/theme/defaultTheme.ts).

Note: You’ll still need to add `"classFunctions": ["cva", "cx"],`
manually for Tailwind completions to work in `cva` type methods. This is
because you don’t want completions on every string, only in specific
methods or regex matches. This is documented.

Release Notes:

- Added out-of-the-box support for Tailwind completions in `.ts` files.
---
 crates/languages/src/lib.rs                 | 1 +
 crates/languages/src/tailwind.rs            | 2 ++
 crates/languages/src/typescript/config.toml | 4 +++-
 docs/src/languages/tailwindcss.md           | 1 +
 4 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/crates/languages/src/lib.rs b/crates/languages/src/lib.rs
index f71234a7d5..93a072b2ac 100644
--- a/crates/languages/src/lib.rs
+++ b/crates/languages/src/lib.rs
@@ -286,6 +286,7 @@ pub fn init(languages: Arc<LanguageRegistry>, fs: Arc<dyn Fs>, node: NodeRuntime
         "HEEX",
         "HTML",
         "JavaScript",
+        "TypeScript",
         "PHP",
         "Svelte",
         "TSX",
diff --git a/crates/languages/src/tailwind.rs b/crates/languages/src/tailwind.rs
index db539edabb..e1b50a5cca 100644
--- a/crates/languages/src/tailwind.rs
+++ b/crates/languages/src/tailwind.rs
@@ -146,6 +146,7 @@ impl LspAdapter for TailwindLspAdapter {
                 "html": "html",
                 "css": "css",
                 "javascript": "javascript",
+                "typescript": "typescript",
                 "typescriptreact": "typescriptreact",
             },
         })))
@@ -178,6 +179,7 @@ impl LspAdapter for TailwindLspAdapter {
             (LanguageName::new("HTML"), "html".to_string()),
             (LanguageName::new("CSS"), "css".to_string()),
             (LanguageName::new("JavaScript"), "javascript".to_string()),
+            (LanguageName::new("TypeScript"), "typescript".to_string()),
             (LanguageName::new("TSX"), "typescriptreact".to_string()),
             (LanguageName::new("Svelte"), "svelte".to_string()),
             (LanguageName::new("Elixir"), "phoenix-heex".to_string()),
diff --git a/crates/languages/src/typescript/config.toml b/crates/languages/src/typescript/config.toml
index 2344f6209d..fe56e496ec 100644
--- a/crates/languages/src/typescript/config.toml
+++ b/crates/languages/src/typescript/config.toml
@@ -21,9 +21,11 @@ word_characters = ["#", "$"]
 prettier_parser_name = "typescript"
 tab_size = 2
 debuggers = ["JavaScript"]
+scope_opt_in_language_servers = ["tailwindcss-language-server"]
 
 [overrides.string]
-completion_query_characters = ["."]
+completion_query_characters = ["-", "."]
+opt_into_language_servers = ["tailwindcss-language-server"]
 prefer_label_for_snippet = true
 
 [overrides.function_name_before_type_arguments]
diff --git a/docs/src/languages/tailwindcss.md b/docs/src/languages/tailwindcss.md
index 83b0177402..4409a12bf0 100644
--- a/docs/src/languages/tailwindcss.md
+++ b/docs/src/languages/tailwindcss.md
@@ -13,6 +13,7 @@ To configure the Tailwind CSS language server, refer [to the extension settings]
   "lsp": {
     "tailwindcss-language-server": {
       "settings": {
+        "classFunctions": ["cva", "cx"],
         "experimental": {
           "classRegex": ["[cls|className]\\s\\:\\=\\s\"([^\"]*)"],
         },