diff --git a/packages/tailwindcss-language-service/package.json b/packages/tailwindcss-language-service/package.json
index 5c143545fec380c626b334e5d67eee924ef5b9f7..60e397c02f28efedb53848e91cab7b0580d36872 100644
--- a/packages/tailwindcss-language-service/package.json
+++ b/packages/tailwindcss-language-service/package.json
@@ -27,6 +27,7 @@     "postcss": "8.2.6",
     "postcss-selector-parser": "6.0.2",
     "semver": "7.3.2",
     "sift-string": "0.0.2",
+    "stringify-object": "3.3.0",
     "vscode-emmet-helper-bundled": "0.0.1",
     "vscode-languageclient": "7.0.0",
     "vscode-languageserver": "7.0.0",

diff --git a/packages/tailwindcss-language-service/src/diagnostics/getInvalidConfigPathDiagnostics.ts b/packages/tailwindcss-language-service/src/diagnostics/getInvalidConfigPathDiagnostics.ts
index 3377233649599920393d2e433ec35b7e6fc6dcff..99f70431ab76cb72b12b94e448db0b03074f2f5b 100644
--- a/packages/tailwindcss-language-service/src/diagnostics/getInvalidConfigPathDiagnostics.ts
+++ b/packages/tailwindcss-language-service/src/diagnostics/getInvalidConfigPathDiagnostics.ts
@@ -20,7 +20,7 @@     return `${acc}.${cur}`
   }, '')
 }
 
-function validateConfigPath(
+export function validateConfigPath(
   state: State,
   path: string | string[],
   base: string[] = []

diff --git a/packages/tailwindcss-language-service/src/hoverProvider.ts b/packages/tailwindcss-language-service/src/hoverProvider.ts
index b6c45d446a6d529fe79f766955594ba7194a09c6..d62c148138fefe5b048d469d62069a971ad73abf 100644
--- a/packages/tailwindcss-language-service/src/hoverProvider.ts
+++ b/packages/tailwindcss-language-service/src/hoverProvider.ts
@@ -7,6 +7,7 @@ import { findClassNameAtPosition } from './util/find'
 import { validateApply } from './util/validateApply'
 import { getClassNameParts } from './util/getClassNameAtPosition'
 import * as jit from './util/jit'
+import { validateConfigPath } from './diagnostics/getInvalidConfigPathDiagnostics'
 
 export async function doHover(
   state: State,
@@ -50,12 +51,14 @@   if (match.groups.helper === 'theme') {
     key = ['theme', ...key]
   }
 
-  const value = stringifyConfigValue(dlv(state.config, key))
+  const value = validateConfigPath(state, key).isValid
+    ? stringifyConfigValue(dlv(state.config, key))
+    : null
 
   if (value === null) return null
 
   return {
-    contents: { kind: 'plaintext', value },
+    contents: { kind: 'markdown', value: ['```plaintext', value, '```'].join('\n') },
     range: {
       start: { line: position.line, character: startChar },
       end: {

diff --git a/packages/tailwindcss-language-service/src/util/stringify.ts b/packages/tailwindcss-language-service/src/util/stringify.ts
index c46bd5bd1bb60e8007f43afa97207d576ee20eeb..0d756674a10d2a2059b6b5eeba2c865f54c3ca7d 100644
--- a/packages/tailwindcss-language-service/src/util/stringify.ts
+++ b/packages/tailwindcss-language-service/src/util/stringify.ts
@@ -3,17 +3,22 @@ const dlv = require('dlv')
 import escapeClassName from 'css.escape'
 import { ensureArray } from './array'
 import { remToPx } from './remToPx'
+import stringifyObject from 'stringify-object'
+import isObject from './isObject'
 
 export function stringifyConfigValue(x: any): string {
-  if (typeof x === 'string') return x
-  if (typeof x === 'number') return x.toString()
-  if (Array.isArray(x)) {
-    return x
-      .filter((y) => typeof y === 'string')
-      .filter(Boolean)
-      .join(', ')
-  }
-  return null
+  if (isObject(x)) return `${Object.keys(x).length} values`
+  if (typeof x === 'function') return 'ƒ'
+  return stringifyObject(x, {
+    inlineCharacterLimit: Infinity,
+    singleQuotes: false,
+    transform: (obj, prop, originalResult) => {
+      if (typeof obj[prop] === 'function') {
+        return 'ƒ'
+      }
+      return originalResult
+    },
+  })
 }
 
 export function stringifyCss(