1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 127d9ca8cdde9517692bd36642333a7449258d7c..4ed21b6f18858fbfb7eb37c1beef89b537f2203b 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -1031,7 +1031,7 @@     let { root, rules } = jit.generateRules(state, [item.data.join(state.separator)])
     if (rules.length === 0) return item
     if (!item.detail) {
       if (rules.length === 1) {
-        item.detail = jit.stringifyDecls(rules[0])
+        item.detail = await jit.stringifyDecls(state, rules[0])
       } else {
         item.detail = `${rules.length} rules`
       }

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

diff --git a/packages/tailwindcss-language-service/src/util/jit.ts b/packages/tailwindcss-language-service/src/util/jit.ts
index 482dcf8284386389be6c230a14fc8f350250e2d4..7aac917c16fabb375755ffed88d015f50f21d7f2 100644
--- a/packages/tailwindcss-language-service/src/util/jit.ts
+++ b/packages/tailwindcss-language-service/src/util/jit.ts
@@ -58,10 +58,15 @@     .join('\n\n')
     .replace(/^(?:    )+/gm, (indent: string) => ' '.repeat((indent.length / 4) * tabSize))
 }
 
-export function stringifyDecls(rule: Rule): string {
+export async function stringifyDecls(state: State, rule: Rule, uri?: string): Promise<string> {
+  let settings = await state.editor.getConfiguration(uri)
+  let showPixelEquivalents = dlv(settings, 'tailwindCSS.showPixelEquivalents', true)
+  let rootFontSize = dlv(settings, 'tailwindCSS.rootFontSize', 16)
+
   let result = []
   rule.walkDecls(({ prop, value }) => {
-    result.push(`${prop}: ${value};`)
+    let px = showPixelEquivalents ? remToPx(value, rootFontSize) : undefined
+    result.push(`${prop}: ${value}${px ? `/* ${px} */` : ''};`)
   })
   return result.join(' ')
 }