diff --git a/packages/tailwindcss-language-service/src/util/color.ts b/packages/tailwindcss-language-service/src/util/color.ts
index 5eb8ec53..514fc286 100644
--- a/packages/tailwindcss-language-service/src/util/color.ts
+++ b/packages/tailwindcss-language-service/src/util/color.ts
@@ -79,11 +79,16 @@ function getColorFromDecls(
 ): culori.Color | KeywordColor | null {
   let props = Object.keys(decls).filter((prop) => {
     // ignore content: "";
-    if (
-      prop === 'content' &&
-      (decls[prop] === '""' || decls[prop] === "''" || decls[prop] === 'var(--tw-content)')
-    ) {
-      return false
+    if (prop === 'content') {
+      let value = decls[prop]
+
+      if (Array.isArray(value) && value.length === 1) {
+        value = value[0]
+      }
+
+      if (value === '""' || value === "''" || value === 'var(--tw-content)') {
+        return false
+      }
     }
 
     // ignore mask-image & mask-composite
diff --git a/packages/vscode-tailwindcss/CHANGELOG.md b/packages/vscode-tailwindcss/CHANGELOG.md
index d11b9911..878b52f3 100644
--- a/packages/vscode-tailwindcss/CHANGELOG.md
+++ b/packages/vscode-tailwindcss/CHANGELOG.md
@@ -2,7 +2,7 @@
 
 ## Prerelease
 
-- Nothing yet!
+- Display color swatches when using `before`/`after` variants ([#1374](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1374))
 
 # 0.14.17