diff --git a/src/plugin.js b/src/plugin.js
index f7a92f676..537693ec1 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -66,6 +66,7 @@ module.exports = function tailwindcss(configOrPath) {
             minify: false,
             sourceMap: !!intermediateMap,
             targets: lightningcss.browserslistToTargets(browserslist(browsersListConfig)),
+            errorRecovery: true,
             drafts: {
               customMedia: true,
             },
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index 668931f0b..76d2d0eca 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -18,26 +18,25 @@ test('arbitrary values', () => {
 // before it generated invalid CSS without throwing an error.
 //
 // In  perfect world, we would not generate anything, and potentially show a warning.
-test.skip('arbitrary values that result in invalid CSS should not be generated', () => {
+test('arbitrary values that result in invalid CSS should not be generated', () => {
   let config = {
     content: [
       {
-        raw: html`<div class="w-[{}] w-[{{}}]"></div>`,
+        raw: html`<div class="w-full w-[{}] w-[{{}}] [--custom:{}]"></div>`,
       },
     ],
   }
 
+  // NOTE: The version with braces are invalid and therefore produce nothing
   return run('@tailwind utilities', config).then((result) => {
+    // Required because it tries to reformat the {}
+    // prettier-ignore
     return expect(result.css).toMatchFormattedCss(css`
-      .w-\[\{\{\}\}\] {
-        width: {
-           {
-          }
-        }
+      .w-full {
+        width: 100%;
       }
-      .w-\[\{\}\] {
-        width: {
-        }
+      .\[--custom\:\{\}\] {
+        --custom: {}
       }
     `)
   })