diff --git a/packages/tailwindcss-language-service/src/completionProvider.ts b/packages/tailwindcss-language-service/src/completionProvider.ts
index 203a2b999086b91225a15a7b99f1b63a86fd79c9..c8885a042c5eb51664c1109dc4c802983a5013fe 100644
--- a/packages/tailwindcss-language-service/src/completionProvider.ts
+++ b/packages/tailwindcss-language-service/src/completionProvider.ts
@@ -70,7 +70,6 @@       (context.triggerKind === 1 ||
         (context.triggerKind === 2 && context.triggerCharacter === '/')) &&
       partialClassName.includes('/')
     ) {
-      // opacity modifiers
       let beforeSlash = partialClassName.split('/').slice(0, -1).join('/')
       let testClass = beforeSlash + '/[0]'
       let { rules } = jit.generateRules(state, [testClass])
@@ -95,14 +94,21 @@               }
             }
 
             return {
-              label: className,
+              label: opacity,
+              detail: stringifyConfigValue(opacities[opacity]),
               documentation,
               kind,
               sortText: naturalExpand(index),
               data: [className],
               textEdit: {
-                newText: className,
-                range: replacementRange,
+                newText: opacity,
+                range: {
+                  ...replacementRange,
+                  start: {
+                    ...replacementRange.start,
+                    character: replacementRange.start.character + beforeSlash.length + 1,
+                  },
+                },
               },
             }
           }),