Simplify completion details for border and outline utilities (#1384)

This drops the `var(--tw-border-style)` and `var(--tw-outline-style)`
declarations from these utilities for **completion details** as they
hide the actual value.

before:

<img width="829" alt="Screenshot 2025-05-23 at 19 57 03"
src="https://github.com/user-attachments/assets/c2d04a6b-48e5-46a0-8578-9c3957a5f224"
/>

<img width="841" alt="Screenshot 2025-05-23 at 19 57 11"
src="https://github.com/user-attachments/assets/4661033e-bb4b-4223-95cf-a9e8f09adc8c"
/>

after:

<img width="832" alt="Screenshot 2025-05-23 at 19 57 23"
src="https://github.com/user-attachments/assets/388ae354-7877-42ad-8132-e08d50659301"
/>

<img width="853" alt="Screenshot 2025-05-23 at 19 57 30"
src="https://github.com/user-attachments/assets/41905381-b2f0-4c4a-baa6-4462851c23e4"
/>

- [x] needs tests

Author: thecrypticace

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -981,3 +981,36 @@ defineTest({
     expect(completionD?.items.length).not.toBe(0)
   },
 })
+
+defineTest({
+  name: 'Completions for outline and border utilities have simplified details',
+  fs: {
+    'app.css': css`
+      @import 'tailwindcss';
+    `,
+  },
+  prepare: async ({ root }) => ({ client: await createClient({ root }) }),
+  handle: async ({ client }) => {
+    let document = await client.open({
+      lang: 'html',
+      text: html`<div class="border-0 outline-0"></div>`,
+    })
+
+    // <div class="border-0 outline-0"></div>
+    //                    ^
+    let completionA = await document.completions({ line: 0, character: 20 })
+
+    // <div class="border-0 outline-0"></div>
+    //                              ^
+    let completionB = await document.completions({ line: 0, character: 30 })
+
+    let border = completionA?.items.find((item) => item.label === 'border-0')
+    let outline = completionB?.items.find((item) => item.label === 'outline-0')
+
+    let borderResolved = await client.conn.sendRequest('completionItem/resolve', border)
+    let outlineResolved = await client.conn.sendRequest('completionItem/resolve', outline)
+
+    expect(borderResolved).toMatchObject({ detail: 'border-width: 0px;' })
+    expect(outlineResolved).toMatchObject({ detail: 'outline-width: 0px;' })
+  },
+})

packages/tailwindcss-language-service/src/completionProvider.ts

@@ -2307,6 +2307,9 @@ export async function resolveCompletionItem(
         })
 
         base.walkDecls((node) => {
+          if (node.value === 'var(--tw-border-style)') return
+          if (node.value === 'var(--tw-outline-style)') return
+
           decls.push(node)
         })
 

packages/vscode-tailwindcss/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Simplify completion details for border and outline utilities ([#1384](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1384))
 
 # 0.14.19