diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -37,7 +37,7 @@ function* buildRegExps(context) {
         regex.any([
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s:]+\]/,
+            /-(?:\w+-)*\[[^\s:]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,
@@ -48,7 +48,7 @@ function* buildRegExps(context) {
 
           regex.pattern([
             // Arbitrary values
-            /-\[[^\s]+\]/,
+            /-(?:\w+-)*\[[^\s]+\]/,
 
             // Not immediately followed by an `{[(`
             /(?![{([]])/,

diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -468,3 +468,11 @@ test('classes in slim templates', async () => {
   expect(extractions).toContain('italic')
   expect(extractions).toContain('text-gray-500')
 })
+
+test('multi-word + arbitrary values + quotes', async () => {
+  const extractions = defaultExtractor(`
+    grid-cols-['repeat(2)']
+  `)
+
+  expect(extractions).toContain(`grid-cols-['repeat(2)']`)
+})

Arbitrary `content-['hello']` utilities not recognized when using a prefix like `tw-`
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v3.1.2

**What browser are you using?**

Chrome

**Reproduction URL**

https://play.tailwindcss.com/cjDwL0ojUE


Thanks for reporting! Looks like this only happens when using a prefix, will get it figured out 👍
tests/default-extractor.test.js