diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index 6d915765da01..7bb79dbb6fa2 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -4,6 +4,64 @@
   bottom: 11px;
   left: 11px;
 }
+.inset-\[var\(--value\)\] {
+  top: var(--value);
+  right: var(--value);
+  bottom: var(--value);
+  left: var(--value);
+}
+.inset-x-\[11px\] {
+  left: 11px;
+  right: 11px;
+}
+.inset-x-\[var\(--value\)\] {
+  left: var(--value);
+  right: var(--value);
+}
+.inset-y-\[11px\] {
+  top: 11px;
+  bottom: 11px;
+}
+.inset-y-\[var\(--value\)\] {
+  top: var(--value);
+  bottom: var(--value);
+}
+.top-\[11px\] {
+  top: 11px;
+}
+.top-\[var\(--value\)\] {
+  top: var(--value);
+}
+.right-\[11px\] {
+  right: 11px;
+}
+.right-\[var\(--value\)\] {
+  right: var(--value);
+}
+.bottom-\[11px\] {
+  bottom: 11px;
+}
+.bottom-\[var\(--value\)\] {
+  bottom: var(--value);
+}
+.left-\[11px\] {
+  left: 11px;
+}
+.left-\[var\(--value\)\] {
+  left: var(--value);
+}
+.z-\[123\] {
+  z-index: 123;
+}
+.z-\[var\(--value\)\] {
+  z-index: var(--value);
+}
+.order-\[4\] {
+  order: 4;
+}
+.order-\[var\(--value\)\] {
+  order: var(--value);
+}
 .col-\[7\] {
   grid-column: 7;
 }
@@ -157,6 +215,25 @@
 .flex-grow-\[var\(--grow\)\] {
   flex-grow: var(--grow);
 }
+.origin-\[50px_50px\] {
+  transform-origin: 50px 50px;
+}
+.translate-x-\[12\%\] {
+  --tw-translate-x: 12%;
+  transform: var(--tw-transform);
+}
+.translate-x-\[var\(--value\)\] {
+  --tw-translate-x: var(--value);
+  transform: var(--tw-transform);
+}
+.translate-y-\[12\%\] {
+  --tw-translate-y: 12%;
+  transform: var(--tw-transform);
+}
+.translate-y-\[var\(--value\)\] {
+  --tw-translate-y: var(--value);
+  transform: var(--tw-transform);
+}
 .rotate-\[23deg\] {
   --tw-rotate: 23deg;
   transform: var(--tw-transform);
@@ -177,16 +254,77 @@
   --tw-skew-x: 3px;
   transform: var(--tw-transform);
 }
+.skew-x-\[var\(--value\)\] {
+  --tw-skew-x: var(--value);
+  transform: var(--tw-transform);
+}
 .skew-y-\[3px\] {
   --tw-skew-y: 3px;
   transform: var(--tw-transform);
 }
+.skew-y-\[var\(--value\)\] {
+  --tw-skew-y: var(--value);
+  transform: var(--tw-transform);
+}
+.scale-\[0\.7\] {
+  --tw-scale-x: 0.7;
+  --tw-scale-y: 0.7;
+  transform: var(--tw-transform);
+}
+.scale-\[var\(--value\)\] {
+  --tw-scale-x: var(--value);
+  --tw-scale-y: var(--value);
+  transform: var(--tw-transform);
+}
+.scale-x-\[0\.7\] {
+  --tw-scale-x: 0.7;
+  transform: var(--tw-transform);
+}
+.scale-x-\[var\(--value\)\] {
+  --tw-scale-x: var(--value);
+  transform: var(--tw-transform);
+}
+.scale-y-\[0\.7\] {
+  --tw-scale-y: 0.7;
+  transform: var(--tw-transform);
+}
+.scale-y-\[var\(--value\)\] {
+  --tw-scale-y: var(--value);
+  transform: var(--tw-transform);
+}
+.animate-\[pong_1s_cubic-bezier\(0\2c 0\2c 0\.2\2c 1\)_infinite\] {
+  animation: pong 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+.animate-\[var\(--value\)\] {
+  animation: var(--value);
+}
+.cursor-\[pointer\] {
+  cursor: pointer;
+}
+.cursor-\[url\(hand\.cur\)_2_2\2c pointer\] {
+  cursor: url(hand.cur) 2 2, pointer;
+}
+.cursor-\[var\(--value\)\] {
+  cursor: var(--value);
+}
+.list-\[\'\\1f44d\'\] {
+  list-style-type: '\1F44D';
+}
+.list-\[var\(--value\)\] {
+  list-style-type: var(--value);
+}
 .columns-\[20\] {
   columns: 20;
 }
 .columns-\[var\(--columns\)\] {
   columns: var(--columns);
 }
+.auto-cols-\[minmax\(10px\2c auto\)\] {
+  grid-auto-columns: minmax(10px, auto);
+}
+.auto-rows-\[minmax\(10px\2c auto\)\] {
+  grid-auto-rows: minmax(10px, auto);
+}
 .grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
@@ -196,6 +334,24 @@
 .grid-rows-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
   grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
 }
+.gap-\[20px\] {
+  gap: 20px;
+}
+.gap-\[var\(--value\)\] {
+  gap: var(--value);
+}
+.gap-x-\[20px\] {
+  column-gap: 20px;
+}
+.gap-x-\[var\(--value\)\] {
+  column-gap: var(--value);
+}
+.gap-y-\[20px\] {
+  row-gap: 20px;
+}
+.gap-y-\[var\(--value\)\] {
+  row-gap: var(--value);
+}
 .space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(20cm * var(--tw-space-x-reverse));
@@ -206,6 +362,46 @@
   margin-right: calc(calc(20% - 1cm) * var(--tw-space-x-reverse));
   margin-left: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(20cm * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(20cm * var(--tw-space-y-reverse));
+}
+.space-y-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(calc(20% - 1cm) * var(--tw-space-y-reverse));
+}
+.divide-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(20cm * var(--tw-divide-x-reverse));
+  border-left-width: calc(20cm * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-x-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-x-reverse: 0;
+  border-right-width: calc(calc(20% - 1cm) * var(--tw-divide-x-reverse));
+  border-left-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-x-reverse)));
+}
+.divide-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(20cm * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(20cm * var(--tw-divide-y-reverse));
+}
+.divide-y-\[calc\(20\%-1cm\)\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(calc(20% - 1cm) * var(--tw-divide-y-reverse));
+}
+.divide-\[black\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(0 0 0 / var(--tw-divide-opacity));
+}
+.divide-opacity-\[0\.8\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 0.8;
+}
+.divide-opacity-\[var\(--value\)\] > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: var(--value);
+}
 .rounded-\[11px\] {
   border-radius: 11px;
 }
@@ -240,10 +436,77 @@
 .border-\[2\.5px\] {
   border-width: 2.5px;
 }
+.border-\[length\:var\(--value\)\] {
+  border-width: var(--value);
+}
+.border-t-\[2\.5px\] {
+  border-top-width: 2.5px;
+}
+.border-t-\[length\:var\(--value\)\] {
+  border-top-width: var(--value);
+}
+.border-r-\[2\.5px\] {
+  border-right-width: 2.5px;
+}
+.border-r-\[length\:var\(--value\)\] {
+  border-right-width: var(--value);
+}
+.border-b-\[2\.5px\] {
+  border-bottom-width: 2.5px;
+}
+.border-b-\[length\:var\(--value\)\] {
+  border-bottom-width: var(--value);
+}
+.border-l-\[2\.5px\] {
+  border-left-width: 2.5px;
+}
+.border-l-\[length\:var\(--value\)\] {
+  border-left-width: var(--value);
+}
 .border-\[\#f00\] {
   --tw-border-opacity: 1;
   border-color: rgb(255 0 0 / var(--tw-border-opacity));
 }
+.border-\[red_black\] {
+  border-color: red black;
+}
+.border-\[color\:var\(--value\)\] {
+  border-color: var(--value);
+}
+.border-t-\[\#f00\] {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(255 0 0 / var(--tw-border-opacity));
+}
+.border-t-\[color\:var\(--value\)\] {
+  border-top-color: var(--value);
+}
+.border-r-\[\#f00\] {
+  --tw-border-opacity: 1;
+  border-right-color: rgb(255 0 0 / var(--tw-border-opacity));
+}
+.border-r-\[color\:var\(--value\)\] {
+  border-right-color: var(--value);
+}
+.border-b-\[\#f00\] {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(255 0 0 / var(--tw-border-opacity));
+}
+.border-b-\[color\:var\(--value\)\] {
+  border-bottom-color: var(--value);
+}
+.border-l-\[\#f00\] {
+  --tw-border-opacity: 1;
+  border-left-color: rgb(255 0 0 / var(--tw-border-opacity));
+}
+.border-l-\[color\:var\(--value\)\] {
+  border-left-color: var(--value);
+}
+.border-opacity-\[0\.8\] {
+  --tw-border-opacity: 0.8;
+}
+.border-opacity-\[var\(--value\)\] {
+  --tw-border-opacity: var(--value);
+}
 .bg-\[\#0f0\] {
   --tw-bg-opacity: 1;
   background-color: rgb(0 255 0 / var(--tw-bg-opacity));
@@ -262,6 +525,13 @@
 .bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] {
   background-color: rgba(123, 123, 123, 0.5);
 }
+.bg-\[rgb\(123\2c _456\2c _123\)_black\] {
+  background-color: rgb(123, 456, 123) black;
+}
+.bg-\[rgb\(123_456_789\)\] {
+  --tw-bg-opacity: 1;
+  background-color: rgb(123 456 789 / var(--tw-bg-opacity));
+}
 .bg-\[hsl\(0\2c 100\%\2c 50\%\)\] {
   --tw-bg-opacity: 1;
   background-color: hsl(0 100% 50% / var(--tw-bg-opacity));
@@ -269,6 +539,12 @@
 .bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
   background-color: hsla(0, 100%, 50%, 0.3);
 }
+.bg-\[\#0f0_var\(--value\)\] {
+  background-color: #0f0 var(--value);
+}
+.bg-\[color\:var\(--value1\)_var\(--value2\)\] {
+  background-color: var(--value1) var(--value2);
+}
 .bg-opacity-\[0\.11\] {
   --tw-bg-opacity: 0.11;
 }
@@ -281,6 +557,24 @@
 .bg-\[url\:var\(--url\)\] {
   background-image: var(--url);
 }
+.bg-\[linear-gradient\(\#eee\2c \#fff\)\] {
+  background-image: linear-gradient(#eee, #fff);
+}
+.bg-\[linear-gradient\(\#eee\2c
+  \#fff\)\2c
+  conic-gradient\(red\2c
+  orange\2c
+  yellow\2c
+  green\2c
+  blue\)\] {
+  background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, yellow, green, blue);
+}
+.bg-\[image\(\)\2c var\(--value\)\] {
+  background-image: image(), var(--value);
+}
+.bg-\[image\:var\(--value\)\2c var\(--value\)\] {
+  background-image: var(--value), var(--value);
+}
 .from-\[\#da5b66\] {
   --tw-gradient-from: #da5b66;
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(218 91 102 / 0));
@@ -302,17 +596,41 @@
 .to-\[var\(--color\)\] {
   --tw-gradient-to: var(--color);
 }
+.bg-\[length\:200px_100px\] {
+  background-size: 200px 100px;
+}
+.bg-\[length\:var\(--value\)\] {
+  background-size: var(--value);
+}
+.bg-\[position\:200px_100px\] {
+  background-position: 200px 100px;
+}
+.bg-\[position\:var\(--value\)\] {
+  background-position: var(--value);
+}
 .fill-\[\#da5b66\] {
   fill: #da5b66;
 }
-.fill-\[var\(--color\)\] {
-  fill: var(--color);
+.fill-\[var\(--value\)\] {
+  fill: var(--value);
+}
+.fill-\[url\(\#icon-gradient\)\] {
+  fill: url(#icon-gradient);
 }
 .stroke-\[\#da5b66\] {
   stroke: #da5b66;
 }
+.stroke-\[color\:var\(--value\)\] {
+  stroke: var(--value);
+}
 .stroke-\[url\(\#icon-gradient\)\] {
-  stroke-width: url(#icon-gradient);
+  stroke: url(#icon-gradient);
+}
+.stroke-\[20px\] {
+  stroke-width: 20px;
+}
+.stroke-\[length\:var\(--value\)\] {
+  stroke-width: var(--value);
 }
 .object-\[50\%\2c 50\%\] {
   object-position: 50% 50%;
@@ -323,8 +641,31 @@
 .object-\[var\(--position\)\] {
   object-position: var(--position);
 }
-.p-\[var\(--app-padding\)\] {
-  padding: var(--app-padding);
+.p-\[7px\] {
+  padding: 7px;
+}
+.px-\[7px\] {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+.py-\[7px\] {
+  padding-top: 7px;
+  padding-bottom: 7px;
+}
+.pt-\[7px\] {
+  padding-top: 7px;
+}
+.pr-\[7px\] {
+  padding-right: 7px;
+}
+.pb-\[7px\] {
+  padding-bottom: 7px;
+}
+.pl-\[7px\] {
+  padding-left: 7px;
+}
+.pt-\[clamp\(30px\2c 100px\)\] {
+  padding-top: clamp(30px, 100px);
 }
 .indent-\[50\%\] {
   text-indent: 50%;
@@ -335,40 +676,130 @@
 .align-\[10em\] {
   vertical-align: 10em;
 }
+.font-\[Georgia\2c serif\] {
+  font-family: Georgia, serif;
+}
+.font-\[\'Gill_Sans\'\] {
+  font-family: 'Gill Sans';
+}
+.font-\[sans-serif\2c serif\] {
+  font-family: sans-serif, serif;
+}
+.font-\[family-name\:var\(--value\)\] {
+  font-family: var(--value);
+}
+.font-\[serif\2c var\(--value\)\] {
+  font-family: serif, var(--value);
+}
+.font-\[\'Some_Font\'\2c sans-serif\] {
+  font-family: 'Some Font', sans-serif;
+}
+.font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] {
+  font-family: 'Some Font', 'Some Other Font';
+}
+.font-\[\'Some_Font\'\2c var\(--other-font\)\] {
+  font-family: 'Some Font', var(--other-font);
+}
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
 .text-\[length\:var\(--font-size\)\] {
   font-size: var(--font-size);
 }
+.font-\[300\] {
+  font-weight: 300;
+}
+.font-\[number\:lighter\] {
+  font-weight: lighter;
+}
+.font-\[number\:var\(--value\)\] {
+  font-weight: var(--value);
+}
 .leading-\[var\(--leading\)\] {
   line-height: var(--leading);
 }
 .tracking-\[var\(--tracking\)\] {
   letter-spacing: var(--tracking);
 }
+.text-\[black\] {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+.text-\[rgb\(123\2c 123\2c 123\)\] {
+  --tw-text-opacity: 1;
+  color: rgb(123 123 123 / var(--tw-text-opacity));
+}
+.text-\[rgb\(123\2c _123\2c _123\)\] {
+  --tw-text-opacity: 1;
+  color: rgb(123 123 123 / var(--tw-text-opacity));
+}
+.text-\[rgb\(123_123_123\)\] {
+  --tw-text-opacity: 1;
+  color: rgb(123 123 123 / var(--tw-text-opacity));
+}
 .text-\[color\:var\(--color\)\] {
   color: var(--color);
 }
+.text-opacity-\[0\.8\] {
+  --tw-text-opacity: 0.8;
+}
+.text-opacity-\[var\(--value\)\] {
+  --tw-text-opacity: var(--value);
+}
 .placeholder-\[var\(--placeholder\)\]::placeholder {
   color: var(--placeholder);
 }
 .placeholder-opacity-\[var\(--placeholder-opacity\)\]::placeholder {
   --tw-placeholder-opacity: var(--placeholder-opacity);
 }
+.caret-\[black\] {
+  caret-color: black;
+}
+.caret-\[var\(--value\)\] {
+  caret-color: var(--value);
+}
 .accent-\[\#bada55\] {
   accent-color: #bada55;
 }
 .accent-\[var\(--accent-color\)\] {
   accent-color: var(--accent-color);
 }
+.opacity-\[0\.8\] {
+  opacity: 0.8;
+}
 .opacity-\[var\(--opacity\)\] {
   opacity: var(--opacity);
 }
+.shadow-\[0px_1px_2px_black\] {
+  --tw-shadow: 0px 1px 2px black;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.shadow-\[var\(--value\)\] {
+  --tw-shadow: var(--value);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
+    var(--tw-shadow);
+}
+.outline-\[2px_solid_black\] {
+  outline: 2px solid black;
+  outline-offset: 0;
+}
+.outline-\[2px_solid_black\2c 2px\] {
+  outline: 2px solid black;
+  outline-offset: 2px;
+}
 .outline-\[var\(--outline\)\] {
   outline: var(--outline);
   outline-offset: 0;
 }
+.outline-\[var\(--outline\)\2c 3px\] {
+  outline: var(--outline);
+  outline-offset: 3px;
+}
+.outline-\[2px_solid_black\2c var\(--outline-offset\)\] {
+  outline: 2px solid black;
+  outline-offset: var(--outline-offset);
+}
 .ring-\[10px\] {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
     var(--tw-ring-offset-color);
@@ -376,22 +807,38 @@
     var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ring-\[length\:\(var\(--value\)\)\] {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
+    var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc((var(--value)) + var(--tw-ring-offset-width))
+    var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
 .ring-\[\#76ad65\] {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity));
 }
+.ring-\[color\:var\(--value\)\] {
+  --tw-ring-color: var(--value);
+}
 .ring-opacity-\[var\(--ring-opacity\)\] {
   --tw-ring-opacity: var(--ring-opacity);
 }
 .ring-offset-\[19rem\] {
   --tw-ring-offset-width: 19rem;
 }
+.ring-offset-\[length\:var\(--value\)\] {
+  --tw-ring-offset-width: var(--value);
+}
 .ring-offset-\[\#76ad65\] {
   --tw-ring-offset-color: #76ad65;
 }
 .ring-offset-\[\#ad672f\] {
   --tw-ring-offset-color: #ad672f;
 }
+.ring-offset-\[color\:var\(--value\)\] {
+  --tw-ring-offset-color: var(--value);
+}
 .blur-\[15px\] {
   --tw-blur: blur(15px);
   filter: var(--tw-filter);
@@ -404,6 +851,10 @@
   --tw-contrast: contrast(2.4);
   filter: var(--tw-filter);
 }
+.drop-shadow-\[0px_1px_2px_black\] {
+  --tw-drop-shadow: drop-shadow(0px 1px 2px black);
+  filter: var(--tw-filter);
+}
 .grayscale-\[0\.55\] {
   --tw-grayscale: grayscale(0.55);
   filter: var(--tw-filter);
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index bab407ed8649..651aa68c856c 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -8,70 +8,142 @@
     <link rel="stylesheet" href="./tailwind.css" />
   </head>
   <body>
-    <div class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
-    <div class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
-    <div class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
-    <div class="bg-[url('/path-to-image.png')] bg-[url:var(--url)]"></div>
-    <div class="bg-opacity-[0.11]"></div>
-    <div class="bg-opacity-[var(--value)]"></div>
-    <div class="border-[#f00]"></div>
-    <div class="border-[2.5px]"></div>
+    <div class="inset-[11px]"></div>
+    <div class="inset-[var(--value)]"></div>
+    <div class="inset-x-[11px]"></div>
+    <div class="inset-x-[var(--value)]"></div>
+    <div class="inset-y-[11px]"></div>
+    <div class="inset-y-[var(--value)]"></div>
+    <div class="top-[11px]"></div>
+    <div class="top-[var(--value)]"></div>
+    <div class="right-[11px]"></div>
+    <div class="right-[var(--value)]"></div>
+    <div class="bottom-[11px]"></div>
+    <div class="bottom-[var(--value)]"></div>
+    <div class="left-[11px]"></div>
+    <div class="left-[var(--value)]"></div>
+
+    <div class="z-[123]"></div>
+    <div class="z-[var(--value)]"></div>
+
+    <div class="order-[4]"></div>
+    <div class="order-[var(--value)]"></div>
+
+    <div class="col-[7]"></div>
+    <div class="col-end-[7]"></div>
+    <div class="col-start-[7]"></div>
+
+    <div class="row-[7]"></div>
+    <div class="row-end-[7]"></div>
+    <div class="row-start-[7]"></div>
+
+    <div class="m-[7px]"></div>
+    <div class="mx-[7px]"></div>
+    <div class="my-[7px]"></div>
+    <div class="mt-[7px]"></div>
+    <div class="mr-[7px]"></div>
+    <div class="mb-[7px]"></div>
+    <div class="ml-[7px]"></div>
+    <div class="mt-[clamp(30px,100px)]"></div>
+
     <div class="aspect-[16/9] aspect-[var(--aspect)]"></div>
+
+    <div class="h-[3.23rem]"></div>
+    <div class="h-[calc(100%+1rem)]"></div>
+    <div class="h-[var(--height)]"></div>
+
+    <div class="max-h-[3.23rem]"></div>
+    <div class="max-h-[calc(100%+1rem)]"></div>
+    <div class="max-h-[var(--height)]"></div>
+
+    <div class="min-h-[3.23rem]"></div>
+    <div class="min-h-[calc(100%+1rem)]"></div>
+    <div class="min-h-[var(--height)]"></div>
+
     <div class="w-[3.23rem]"></div>
     <div class="w-[calc(100%+1rem)]"></div>
     <div class="w-[calc(var(--10-10px,calc(-20px-(-30px--40px)))-50px)]"></div>
     <div class="w-[var(--width)]"></div>
     <div class="w-[var(--width,calc(100%+1rem))]"></div>
     <div class="w-[calc(100%/3-1rem*2)]"></div>
+
     <div class="min-w-[3.23rem]"></div>
     <div class="min-w-[calc(100%+1rem)]"></div>
     <div class="min-w-[var(--width)]"></div>
+
     <div class="max-w-[3.23rem]"></div>
     <div class="max-w-[calc(100%+1rem)]"></div>
     <div class="max-w-[var(--width)]"></div>
-    <div class="h-[3.23rem]"></div>
-    <div class="h-[calc(100%+1rem)]"></div>
-    <div class="h-[var(--height)]"></div>
-    <div class="min-h-[3.23rem]"></div>
-    <div class="min-h-[calc(100%+1rem)]"></div>
-    <div class="min-h-[var(--height)]"></div>
-    <div class="max-h-[3.23rem]"></div>
-    <div class="max-h-[calc(100%+1rem)]"></div>
-    <div class="max-h-[var(--height)]"></div>
-    <div class="space-x-[20cm]"></div>
-    <div class="space-x-[calc(20%-1cm)]"></div>
-    <div class="columns-[20] columns-[var(--columns)]"></div>
-    <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
-    <div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
-    <div class="grid-rows-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
-    <div class="col-[7]"></div>
-    <div class="col-end-[7]"></div>
-    <div class="col-start-[7]"></div>
+
     <div class="flex-[var(--flex)]"></div>
-    <div class="flex-grow-[var(--grow)]"></div>
     <div class="flex-shrink-[var(--shrink)]"></div>
-    <div class="row-[7]"></div>
-    <div class="row-end-[7]"></div>
-    <div class="row-start-[7]"></div>
+    <div class="flex-grow-[var(--grow)]"></div>
+
+    <div class="origin-[50px_50px]"></div>
+
+    <div class="translate-x-[12%]"></div>
+    <div class="translate-x-[var(--value)]"></div>
+    <div class="translate-y-[12%]"></div>
+    <div class="translate-y-[var(--value)]"></div>
+
     <div class="rotate-[23deg] rotate-[2.3rad] rotate-[401grad] rotate-[1.5turn]"></div>
+
     <div class="skew-x-[3px]"></div>
+    <div class="skew-x-[var(--value)]"></div>
     <div class="skew-y-[3px]"></div>
-    <div class="indent-[50%] indent-[var(--indent)]"></div>
-    <div class="align-[10em]"></div>
-    <div class="text-[2.23rem]"></div>
-    <div class="text-[length:var(--font-size)]"></div>
-    <div class="text-[color:var(--color)]"></div>
-    <div class="text-[angle:var(--angle)]"></div>
-    <div class="transition-[opacity,width]"></div>
-    <div class="duration-[2s]"></div>
-    <div class="m-[7px]"></div>
-    <div class="mx-[7px]"></div>
-    <div class="my-[7px]"></div>
-    <div class="mt-[7px]"></div>
-    <div class="mr-[7px]"></div>
-    <div class="mb-[7px]"></div>
-    <div class="ml-[7px]"></div>
-    <div class="mt-[clamp(30px,100px)]"></div>
+    <div class="skew-y-[var(--value)]"></div>
+
+    <div class="scale-[0.7]"></div>
+    <div class="scale-[var(--value)]"></div>
+    <div class="scale-x-[0.7]"></div>
+    <div class="scale-x-[var(--value)]"></div>
+    <div class="scale-y-[0.7]"></div>
+    <div class="scale-y-[var(--value)]"></div>
+
+    <div class="animate-[pong_1s_cubic-bezier(0,0,0.2,1)_infinite]"></div>
+    <div class="animate-[var(--value)]"></div>
+
+    <div class="cursor-[pointer]"></div>
+    <div class="cursor-[url(hand.cur)_2_2,pointer]"></div>
+    <div class="cursor-[var(--value)]"></div>
+
+    <div class="list-['\1F44D']"></div>
+    <div class="list-[var(--value)]"></div>
+
+    <div class="columns-[20] columns-[var(--columns)]"></div>
+
+    <div class="auto-cols-[minmax(10px,auto)]"></div>
+
+    <div class="auto-rows-[minmax(10px,auto)]"></div>
+
+    <div class="grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
+    <div class="lg:grid-cols-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
+
+    <div class="grid-rows-[200px,repeat(auto-fill,minmax(15%,100px)),300px]"></div>
+
+    <div class="gap-[20px]"></div>
+    <div class="gap-[var(--value)]"></div>
+    <div class="gap-x-[20px]"></div>
+    <div class="gap-x-[var(--value)]"></div>
+    <div class="gap-y-[20px]"></div>
+    <div class="gap-y-[var(--value)]"></div>
+
+    <div class="space-x-[20cm]"></div>
+    <div class="space-x-[calc(20%-1cm)]"></div>
+    <div class="space-y-[20cm]"></div>
+    <div class="space-y-[calc(20%-1cm)]"></div>
+
+    <div class="divide-x-[20cm]"></div>
+    <div class="divide-x-[calc(20%-1cm)]"></div>
+    <div class="divide-y-[20cm]"></div>
+    <div class="divide-y-[calc(20%-1cm)]"></div>
+
+    <div class="divide-[black]"></div>
+    <div class="divide-[var(--value)]"></div>
+
+    <div class="divide-opacity-[0.8]"></div>
+    <div class="divide-opacity-[var(--value)]"></div>
+
     <div class="rounded-[11px]"></div>
     <div
       class="
@@ -89,54 +161,185 @@
         rounded-tl-[var(--radius)]
       "
     ></div>
-    <div class="duration-[var(--app-duration)]"></div>
-    <div class="p-[var(--app-padding)]"></div>
-    <div class="inset-[11px]"></div>
-    <div class="blur-[15px]"></div>
-    <div class="brightness-[300%]"></div>
-    <div class="contrast-[2.4]"></div>
-    <div class="grayscale-[0.55]"></div>
-    <div class="hue-rotate-[0.8turn]"></div>
-    <div class="invert-[0.75]"></div>
-    <div class="saturate-[180%]"></div>
-    <div class="sepia-[0.2]"></div>
-    <div class="backdrop-blur-[11px]"></div>
-    <div class="backdrop-brightness-[1.23]"></div>
-    <div class="backdrop-contrast-[0.87]"></div>
-    <div class="backdrop-grayscale-[0.42]"></div>
-    <div class="backdrop-hue-rotate-[1.57rad]"></div>
-    <div class="backdrop-invert-[0.66]"></div>
-    <div class="backdrop-opacity-[22%]"></div>
-    <div class="backdrop-saturate-[144%]"></div>
-    <div class="backdrop-sepia-[0.38]"></div>
+
+    <div class="border-[#f00]"></div>
+    <div class="border-[red_black]"></div>
+    <div class="border-[2.5px]"></div>
+    <div class="border-[color:var(--value)]"></div>
+    <div class="border-[length:var(--value)]"></div>
+
+    <div class="border-t-[#f00]"></div>
+    <div class="border-t-[2.5px]"></div>
+    <div class="border-t-[color:var(--value)]"></div>
+    <div class="border-t-[length:var(--value)]"></div>
+    <div class="border-r-[#f00]"></div>
+    <div class="border-r-[2.5px]"></div>
+    <div class="border-r-[color:var(--value)]"></div>
+    <div class="border-r-[length:var(--value)]"></div>
+    <div class="border-b-[#f00]"></div>
+    <div class="border-b-[2.5px]"></div>
+    <div class="border-b-[color:var(--value)]"></div>
+    <div class="border-b-[length:var(--value)]"></div>
+    <div class="border-l-[#f00]"></div>
+    <div class="border-l-[2.5px]"></div>
+    <div class="border-l-[color:var(--value)]"></div>
+    <div class="border-l-[length:var(--value)]"></div>
+
+    <div class="border-opacity-[0.8]"></div>
+    <div class="border-opacity-[var(--value)]"></div>
+
+    <div class="bg-[#0f0] bg-[#ff0000] bg-[#0000ffcc]"></div>
+    <div class="bg-[rgb(123,123,123)] bg-[rgba(123,123,123,0.5)]"></div>
+    <div class="bg-[rgb(123,_456,_123)_black]"></div>
+    <div class="bg-[rgb(123_456_789)]"></div>
+    <div class="bg-[hsl(0,100%,50%)] bg-[hsla(0,100%,50%,0.3)]"></div>
+    <div class="bg-[#0f0_var(--value)]"></div>
+    <div class="bg-[var(--value1)_var(--value2)]"></div>
+    <div class="bg-[color:var(--value1)_var(--value2)]"></div>
+
+    <div class="bg-[url('/path-to-image.png')] bg-[url:var(--url)]"></div>
+    <div class="bg-[linear-gradient(#eee,#fff)]"></div>
+    <div class="bg-[linear-gradient(#eee,#fff),conic-gradient(red,orange,yellow,green,blue)]"></div>
+    <div class="bg-[image(),var(--value)]"></div>
+    <div class="bg-[var(--value),var(--value)]"></div>
+    <div class="bg-[image:var(--value),var(--value)]"></div>
+
+    <div class="bg-opacity-[0.11]"></div>
+    <div class="bg-opacity-[var(--value)]"></div>
+
     <div class="from-[#da5b66] via-[#da5b66] to-[#da5b66]"></div>
     <div class="from-[var(--color)] via-[var(--color)] to-[var(--color)]"></div>
+
+    <div class="bg-[length:200px_100px]"></div>
+    <div class="bg-[length:var(--value)]"></div>
+
+    <div class="bg-[position:200px_100px]"></div>
+    <div class="bg-[position:var(--value)]"></div>
+
     <div class="fill-[#da5b66]"></div>
-    <div class="fill-[var(--color)]"></div>
+    <div class="fill-[var(--value)]"></div>
+    <div class="fill-[url(#icon-gradient)]"></div>
+
+    <div class="stroke-[#da5b66]"></div>
+    <div class="stroke-[color:var(--value)]"></div>
+    <div class="stroke-[url(#icon-gradient)]"></div>
+
+    <div class="stroke-[20px]"></div>
+    <div class="stroke-[length:var(--value)]"></div>
+
     <div class="object-[50%,50%]"></div>
     <div class="object-[top,right]"></div>
     <div class="object-[var(--position)]"></div>
-    <div class="stroke-[#da5b66]"></div>
-    <div class="stroke-[url(#icon-gradient)]"></div>
+
+    <div class="p-[7px]"></div>
+    <div class="px-[7px]"></div>
+    <div class="py-[7px]"></div>
+    <div class="pt-[7px]"></div>
+    <div class="pr-[7px]"></div>
+    <div class="pb-[7px]"></div>
+    <div class="pl-[7px]"></div>
+    <div class="pt-[clamp(30px,100px)]"></div>
+
+    <div class="indent-[50%] indent-[var(--indent)]"></div>
+
+    <div class="align-[10em]"></div>
+
+    <div class="font-[Georgia,serif]"></div>
+    <div class="font-['Gill_Sans']"></div>
+    <div class="font-[sans-serif,serif]"></div>
+    <div class="font-[family-name:var(--value)]"></div>
+    <div class="font-[serif,var(--value)]"></div>
+    <div class="font-['Some_Font',sans-serif]"></div>
+    <div class="font-['Some_Font','Some_Other_Font']"></div>
+    <div class="font-['Some_Font',var(--other-font)]"></div>
+    <div class="font-[var(--font1),var(--font2)]"></div>
+    <div class="font-[invalid_font_because_spaces]"></div>
+
+    <div class="text-[2.23rem]"></div>
+    <div class="text-[length:var(--font-size)]"></div>
+    <div class="text-[angle:var(--angle)]"></div>
+
+    <div class="font-[300]"></div>
+    <div class="font-[number:lighter]"></div>
+    <div class="font-[number:var(--value)]"></div>
+
     <div class="leading-[var(--leading)]"></div>
+
     <div class="tracking-[var(--tracking)]"></div>
+
+    <div class="text-[black]"></div>
+    <div class="text-[rgb(123,123,123)]"></div>
+    <div class="text-[rgb(123,_123,_123)]"></div>
+    <div class="text-[rgb(123_123_123)]"></div>
+    <div class="text-[color:var(--color)]"></div>
+
+    <div class="text-opacity-[0.8]"></div>
+    <div class="text-opacity-[var(--value)]"></div>
+
     <div class="placeholder-[var(--placeholder)]"></div>
+
     <div class="placeholder-opacity-[var(--placeholder-opacity)]"></div>
+
+    <div class="caret-[black]"></div>
+    <div class="caret-[var(--value)]"></div>
+
+    <div class="accent-[#bada55]"></div>
+    <div class="accent-[var(--accent-color)]"></div>
+
+    <div class="opacity-[0.8]"></div>
     <div class="opacity-[var(--opacity)]"></div>
+
+    <div class="shadow-[0px_1px_2px_black]"></div>
+    <div class="shadow-[var(--value)]"></div>
+
+    <div class="outline-[2px_solid_black]"></div>
+    <div class="outline-[2px_solid_black,2px]"></div>
     <div class="outline-[var(--outline)]"></div>
+    <div class="outline-[var(--outline),3px]"></div>
+    <div class="outline-[2px_solid_black,var(--outline-offset)]"></div>
+
     <div class="ring-[#76ad65]"></div>
+    <div class="ring-[color:var(--value)]"></div>
     <div class="ring-offset-[#76ad65]"></div>
     <div class="ring-[10px]"></div>
+    <div class="ring-[length:(var(--value))]"></div>
     <div class="ring-offset-[#ad672f]"></div>
+    <div class="ring-offset-[color:var(--value)]"></div>
     <div class="ring-offset-[19rem]"></div>
+    <div class="ring-offset-[length:var(--value)]"></div>
     <div class="ring-opacity-[var(--ring-opacity)]"></div>
+
+    <div class="blur-[15px]"></div>
+    <div class="brightness-[300%]"></div>
+    <div class="contrast-[2.4]"></div>
+    <div class="drop-shadow-[0px_1px_2px_black]"></div>
+    <div class="grayscale-[0.55]"></div>
+    <div class="hue-rotate-[0.8turn]"></div>
+    <div class="invert-[0.75]"></div>
+    <div class="saturate-[180%]"></div>
+    <div class="sepia-[0.2]"></div>
+    <div class="backdrop-blur-[11px]"></div>
+    <div class="backdrop-brightness-[1.23]"></div>
+    <div class="backdrop-contrast-[0.87]"></div>
+    <div class="backdrop-grayscale-[0.42]"></div>
+    <div class="backdrop-hue-rotate-[1.57rad]"></div>
+    <div class="backdrop-invert-[0.66]"></div>
+    <div class="backdrop-opacity-[22%]"></div>
+    <div class="backdrop-saturate-[144%]"></div>
+    <div class="backdrop-sepia-[0.38]"></div>
+
+    <div class="transition-[opacity,width]"></div>
+
     <div class="delay-[var(--delay)]"></div>
+
+    <div class="duration-[2s]"></div>
+    <div class="duration-[var(--app-duration)]"></div>
+
     <div class="will-change-[top,left] will-change-[var(--will-change)]"></div>
+
     <div class="content-['hello']"></div>
     <div class="content-[attr(content-before)]"></div>
     <div class="content-['>']"></div>
-    <div class="accent-[#bada55]"></div>
-    <div class="accent-[var(--accent-color)]"></div>
 
     <!-- Balancing issues, this is not checking the validity of the actual value, but purely syntax-wise -->
     <div class="w-[do-not-generate-this]w-[it-is-invalid-syntax]"></div>
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
index d16ccb958927..b05a6433bdf2 100644
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -29,6 +29,59 @@ it('should not generate any css if an unknown typehint is used', () => {
     return expect(result.css).toMatchFormattedCss(css``)
   })
 })
+
+it('should support arbitrary values for various background utilities', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <!-- Lookup -->
+          <div class="bg-gradient-to-r"></div>
+          <div class="bg-red-500"></div>
+
+          <!-- By implicit type -->
+          <div class="bg-[url('/image-1-0.png')]"></div>
+          <div class="bg-[#ff0000]"></div>
+
+          <!-- By explicit type -->
+          <div class="bg-[url:var(--image-url)]"></div>
+          <div class="bg-[color:var(--bg-color)]"></div>
+        `,
+      },
+    ],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .bg-red-500 {
+        --tw-bg-opacity: 1;
+        background-color: rgb(239 68 68 / var(--tw-bg-opacity));
+      }
+
+      .bg-\\[\\#ff0000\\] {
+        --tw-bg-opacity: 1;
+        background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+      }
+
+      .bg-\\[color\\:var\\(--bg-color\\)\\] {
+        background-color: var(--bg-color);
+      }
+
+      .bg-gradient-to-r {
+        background-image: linear-gradient(to right, var(--tw-gradient-stops));
+      }
+
+      .bg-\\[url\\(\\'\\/image-1-0\\.png\\'\\)\\] {
+        background-image: url('/image-1-0.png');
+      }
+
+      .bg-\\[url\\:var\\(--image-url\\)\\] {
+        background-image: var(--image-url);
+      }
+    `)
+  })
+})
+
 it('should handle unknown typehints', () => {
   let config = { content: [{ raw: html`<div class="w-[length:12px]"></div>` }] }
 
@@ -58,6 +111,8 @@ it('should convert _ to spaces', () => {
           <div class="auto-cols-[minmax(0,_1fr)]"></div>
           <div class="drop-shadow-[0px_1px_3px_black]"></div>
           <div class="content-[_hello_world_]"></div>
+          <div class="content-[___abc____]"></div>
+          <div class="content-['__hello__world__']"></div>
         `,
       },
     ],
@@ -112,9 +167,18 @@ it('should convert _ to spaces', () => {
         --tw-drop-shadow: drop-shadow(0px 1px 3px black);
         filter: var(--tw-filter);
       }
+
       .content-\\[_hello_world_\\] {
         content: hello world;
       }
+
+      .content-\\[___abc____\\] {
+        content: abc;
+      }
+
+      .content-\\[\\'__hello__world__\\'\\] {
+        content: '  hello  world  ';
+      }
     `)
   })
 })