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 f71234a7d5c5219b679acdd12610da4fe6e857ad..93a072b2ac5a9f4a6d21729eaad9a852fe95b929 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 db539edabb6c10253f2fd0d688eafa46082d427a..e1b50a5ccaabb7770d13abc79fbac1da5fa4cbbe 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 2344f6209da7756049438669ee55d5376fdb47f8..fe56e496ec717895e72f37dda9146fbb30b50e88 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 83b01774020c1332881b359af4014934340f837a..4409a12bf0dde643f60bb46ae2887c3aa48ca002 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\"([^\"]*)"],
         },