diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js
index 06d0f489b..01719b7ec 100644
--- a/src/util/formatVariantSelector.js
+++ b/src/util/formatVariantSelector.js
@@ -30,7 +30,17 @@ export function formatVariantSelector(current, ...others) {
 }
 
 export function finalizeSelector(format, { selector, candidate, context }) {
-  let base = candidate.split(context?.tailwindConfig?.separator ?? ':').pop()
+  let separator = context?.tailwindConfig?.separator ?? ':'
+
+  // Split by the separator, but ignore the separator inside square brackets:
+  //
+  // E.g.: dark:lg:hover:[paint-order:markers]
+  //           ┬  ┬     ┬            ┬
+  //           │  │     │            ╰── We will not split here
+  //           ╰──┴─────┴─────────────── We will split here
+  //
+  let splitter = new RegExp(`\\${separator}(?![^[]*\\])`)
+  let base = candidate.split(splitter).pop()
 
   if (context?.tailwindConfig?.prefix) {
     format = prefixSelector(context.tailwindConfig.prefix, format)
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index 4cbb66828..7856a3b24 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -16,6 +16,24 @@ test('arbitrary values', () => {
   })
 })
 
+it('should support modifiers for arbitrary values that contain the separator', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="hover:bg-[url('https://github.com/tailwindlabs.png')]"></div> `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .hover\:bg-\[url\(\'https\:\/\/github\.com\/tailwindlabs\.png\'\)\]:hover {
+        background-image: url('https://github.com/tailwindlabs.png');
+      }
+    `)
+  })
+})
+
 it('should support arbitrary values for various background utilities', () => {
   let config = {
     content: [