diff --git a/src/blog/tailwindcss-v3-3/index.mdx b/src/blog/tailwindcss-v3-3/index.mdx
index 6fd87ef46..37f845382 100644
--- a/src/blog/tailwindcss-v3-3/index.mdx
+++ b/src/blog/tailwindcss-v3-3/index.mdx
@@ -670,7 +670,7 @@ export function MyComponent({ company }) {
         "--brand-hover-color": company.brandHoverColor,
       }}
       className="bg-[var(--brand-color)] hover:bg-[var(--brand-hover-color)]" // [!code --]
-      className="bg-(--brand-color) hover:bg-(--brand-hover-color)" // [!code ++]
+      className="bg-[--brand-color] hover:bg-[--brand-hover-color]" // [!code ++]
     />
   );
 }