Repository: tailwindlabs/tailwindcss
Pull request #6693 (2021-12-22 23:08:37)

Add standalone-cli node16-linux-arm64 build (make docker on Apple Silicon M1 workflow possible)
This pull request is pretty simple and just adds another standalone-cli platform: Linux arm64

Why is this needed:

I am using a workflow were I run a Rails 7 application during development in Docker on an M1 Apple Silicon device.

Docker on M1 macOS starts a Linux arm64 virtual machine for which currently no binary is available. As tailwindcss-rails depends on a binary download from this repository, I would like to add the Linux arm64 build.


Patch:
diff --git a/.github/workflows/build-cli.yml b/.github/workflows/build-cli.yml
index 7442209b..1fc0f016 100644
--- a/.github/workflows/build-cli.yml
+++ b/.github/workflows/build-cli.yml
@@ -47,11 +47,13 @@ jobs:
           draft: true
           tag_name: ${{ steps.vars.outputs.tag_name }}
           body: |
+            * [Linux (arm64)](https://github.com/tailwindlabs/tailwindcss/releases/download/${{ steps.vars.outputs.tag_name }}/tailwindcss-linux-arm64)
             * [Linux (x64)](https://github.com/tailwindlabs/tailwindcss/releases/download/${{ steps.vars.outputs.tag_name }}/tailwindcss-linux-x64)
             * [macOS (arm64)](https://github.com/tailwindlabs/tailwindcss/releases/download/${{ steps.vars.outputs.tag_name }}/tailwindcss-macos-arm64)
             * [macOS (x64)](https://github.com/tailwindlabs/tailwindcss/releases/download/${{ steps.vars.outputs.tag_name }}/tailwindcss-macos-x64)
             * [Windows (x64)](https://github.com/tailwindlabs/tailwindcss/releases/download/${{ steps.vars.outputs.tag_name }}/tailwindcss-windows-x64.exe)
           files: |
+            standalone-cli/dist/tailwindcss-linux-arm64
             standalone-cli/dist/tailwindcss-linux-x64
             standalone-cli/dist/tailwindcss-macos-arm64
             standalone-cli/dist/tailwindcss-macos-x64
diff --git a/CHANGELOG.md b/CHANGELOG.md
index aa82a139..d35d3e4d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Reduce specificity of `abbr` rule in preflight ([#6671](https://github.com/tailwindlabs/tailwindcss/pull/6671))
+- Support HSL with hue units in arbitrary values ([#6726](https://github.com/tailwindlabs/tailwindcss/pull/6726))
 
 ## [3.0.7] - 2021-12-17
 
diff --git a/package-lock.json b/package-lock.json
index c84210a3..04486fbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,20 +38,20 @@
       "devDependencies": {
         "@swc/cli": "^0.1.55",
         "@swc/core": "^1.2.118",
-        "@swc/jest": "^0.2.11",
+        "@swc/jest": "^0.2.15",
         "@swc/register": "^0.1.7",
         "autoprefixer": "^10.4.0",
         "cross-env": "^7.0.3",
-        "cssnano": "^5.0.12",
+        "cssnano": "^5.0.14",
         "esbuild": "^0.14.2",
         "eslint": "^8.4.1",
         "eslint-config-prettier": "^8.3.0",
         "eslint-plugin-prettier": "^4.0.0",
         "jest": "^27.4.3",
         "jest-diff": "^27.4.2",
-        "postcss": "^8.4.4",
+        "postcss": "^8.4.5",
         "postcss-cli": "^8.3.1",
-        "prettier": "^2.5.0",
+        "prettier": "^2.5.1",
         "rimraf": "^3.0.0"
       },
       "engines": {
@@ -1313,9 +1313,9 @@
       }
     },
     "node_modules/@swc/jest": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.11.tgz",
-      "integrity": "sha512-2iYyhP3W6Kffs9bKHmrcALT2/SPIqfLlG8jPXvtNFvjIbapC+ChnqaqEl1rSm/iA8xk3xkhYLubohtGtNBWAmw==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.15.tgz",
+      "integrity": "sha512-Ja+YCVPOGPX/nFnPvPKaWpx2HUwrtuvHP1onHOey1gNGhq8CktQ7xQhCFSuyYBQJiW3WOZ+qMsv3aZk1XUBSOg==",
       "dev": true,
       "dependencies": {
         "@jest/create-cache-key-function": "^27.3.1"
@@ -2078,9 +2078,9 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "node_modules/colord": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.1.tgz",
-      "integrity": "sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
       "dev": true
     },
     "node_modules/colorette": {
@@ -2187,16 +2187,16 @@
       }
     },
     "node_modules/css-select": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
       "dev": true,
       "dependencies": {
         "boolbase": "^1.0.0",
-        "css-what": "^5.0.0",
-        "domhandler": "^4.2.0",
-        "domutils": "^2.6.0",
-        "nth-check": "^2.0.0"
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
       },
       "funding": {
         "url": "https://github.com/sponsors/fb55"
@@ -2239,13 +2239,12 @@
       }
     },
     "node_modules/cssnano": {
-      "version": "5.0.12",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.12.tgz",
-      "integrity": "sha512-U38V4x2iJ3ijPdeWqUrEr4eKBB5PbEKsNP5T8xcik2Au3LeMtiMHX0i2Hu9k51FcKofNZumbrcdC6+a521IUHg==",
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.14.tgz",
+      "integrity": "sha512-qzhRkFvBhv08tbyKCIfWbxBXmkIpLl1uNblt8SpTHkgLfON5OCPX/CCnkdNmEosvo8bANQYmTTMEgcVBlisHaw==",
       "dev": true,
       "dependencies": {
-        "cssnano-preset-default": "^5.1.8",
-        "is-resolvable": "^1.1.0",
+        "cssnano-preset-default": "^5.1.9",
         "lilconfig": "^2.0.3",
         "yaml": "^1.10.2"
       },
@@ -2261,15 +2260,15 @@
       }
     },
     "node_modules/cssnano-preset-default": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.8.tgz",
-      "integrity": "sha512-zWMlP0+AMPBVE852SqTrP0DnhTcTA2C1wAF92TKZ3Va+aUVqLIhkqKlnJIXXdqXD7RN+S1ujuWmNpvrJBiM/vg==",
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.9.tgz",
+      "integrity": "sha512-RhkEucqlQ+OxEi14K1p8gdXcMQy1mSpo7P1oC44oRls7BYIj8p+cht4IFBFV3W4iOjTP8EUB33XV1fX9KhDzyA==",
       "dev": true,
       "dependencies": {
         "css-declaration-sorter": "^6.0.3",
         "cssnano-utils": "^2.0.1",
         "postcss-calc": "^8.0.0",
-        "postcss-colormin": "^5.2.1",
+        "postcss-colormin": "^5.2.2",
         "postcss-convert-values": "^5.0.2",
         "postcss-discard-comments": "^5.0.1",
         "postcss-discard-duplicates": "^5.0.1",
@@ -2288,7 +2287,7 @@
         "postcss-normalize-string": "^5.0.1",
         "postcss-normalize-timing-functions": "^5.0.1",
         "postcss-normalize-unicode": "^5.0.1",
-        "postcss-normalize-url": "^5.0.3",
+        "postcss-normalize-url": "^5.0.4",
         "postcss-normalize-whitespace": "^5.0.1",
         "postcss-ordered-values": "^5.0.2",
         "postcss-reduce-initial": "^5.0.2",
@@ -3764,15 +3763,6 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
-    "node_modules/is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -3843,12 +3833,6 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
-    "node_modules/is-resolvable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-      "dev": true
-    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -5324,9 +5308,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
-      "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
       "dependencies": {
         "nanoid": "^3.1.30",
         "picocolors": "^1.0.0",
@@ -5383,15 +5367,15 @@
       }
     },
     "node_modules/postcss-colormin": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.1.tgz",
-      "integrity": "sha512-VVwMrEYLcHYePUYV99Ymuoi7WhKrMGy/V9/kTS0DkCoJYmmjdOMneyhzYUxcNgteKDVbrewOkSM7Wje/MFwxzA==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.2.tgz",
+      "integrity": "sha512-tSEe3NpqWARUTidDlF0LntPkdlhXqfDFuA1yslqpvvGAfpZ7oBaw+/QXd935NKm2U9p4PED0HDZlzmMk7fVC6g==",
       "dev": true,
       "dependencies": {
         "browserslist": "^4.16.6",
         "caniuse-api": "^3.0.0",
         "colord": "^2.9.1",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -5729,14 +5713,13 @@
       }
     },
     "node_modules/postcss-normalize-url": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.3.tgz",
-      "integrity": "sha512-qWiUMbvkRx3kc1Dp5opzUwc7MBWZcSDK2yofCmdvFBCpx+zFPkxBC1FASQ59Pt+flYfj/nTZSkmF56+XG5elSg==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.4.tgz",
+      "integrity": "sha512-cNj3RzK2pgQQyNp7dzq0dqpUpQ/wYtdDZM3DepPmFjCmYIfceuD9VIAcOdvrNetjIU65g1B4uwdP/Krf6AFdXg==",
       "dev": true,
       "dependencies": {
-        "is-absolute-url": "^3.0.3",
         "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-value-parser": "^4.2.0"
       },
       "engines": {
         "node": "^10 || ^12 || >=14.0"
@@ -5891,9 +5874,9 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.0.tgz",
-      "integrity": "sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
@@ -7747,9 +7730,9 @@
       "optional": true
     },
     "@swc/jest": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.11.tgz",
-      "integrity": "sha512-2iYyhP3W6Kffs9bKHmrcALT2/SPIqfLlG8jPXvtNFvjIbapC+ChnqaqEl1rSm/iA8xk3xkhYLubohtGtNBWAmw==",
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/@swc/jest/-/jest-0.2.15.tgz",
+      "integrity": "sha512-Ja+YCVPOGPX/nFnPvPKaWpx2HUwrtuvHP1onHOey1gNGhq8CktQ7xQhCFSuyYBQJiW3WOZ+qMsv3aZk1XUBSOg==",
       "dev": true,
       "requires": {
         "@jest/create-cache-key-function": "^27.3.1"
@@ -8350,9 +8333,9 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
     "colord": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.1.tgz",
-      "integrity": "sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
       "dev": true
     },
     "colorette": {
@@ -8432,16 +8415,16 @@
       }
     },
     "css-select": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
       "dev": true,
       "requires": {
         "boolbase": "^1.0.0",
-        "css-what": "^5.0.0",
-        "domhandler": "^4.2.0",
-        "domutils": "^2.6.0",
-        "nth-check": "^2.0.0"
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
       }
     },
     "css-tree": {
@@ -8466,27 +8449,26 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
     "cssnano": {
-      "version": "5.0.12",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.12.tgz",
-      "integrity": "sha512-U38V4x2iJ3ijPdeWqUrEr4eKBB5PbEKsNP5T8xcik2Au3LeMtiMHX0i2Hu9k51FcKofNZumbrcdC6+a521IUHg==",
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.14.tgz",
+      "integrity": "sha512-qzhRkFvBhv08tbyKCIfWbxBXmkIpLl1uNblt8SpTHkgLfON5OCPX/CCnkdNmEosvo8bANQYmTTMEgcVBlisHaw==",
       "dev": true,
       "requires": {
-        "cssnano-preset-default": "^5.1.8",
-        "is-resolvable": "^1.1.0",
+        "cssnano-preset-default": "^5.1.9",
         "lilconfig": "^2.0.3",
         "yaml": "^1.10.2"
       }
     },
     "cssnano-preset-default": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.8.tgz",
-      "integrity": "sha512-zWMlP0+AMPBVE852SqTrP0DnhTcTA2C1wAF92TKZ3Va+aUVqLIhkqKlnJIXXdqXD7RN+S1ujuWmNpvrJBiM/vg==",
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.9.tgz",
+      "integrity": "sha512-RhkEucqlQ+OxEi14K1p8gdXcMQy1mSpo7P1oC44oRls7BYIj8p+cht4IFBFV3W4iOjTP8EUB33XV1fX9KhDzyA==",
       "dev": true,
       "requires": {
         "css-declaration-sorter": "^6.0.3",
         "cssnano-utils": "^2.0.1",
         "postcss-calc": "^8.0.0",
-        "postcss-colormin": "^5.2.1",
+        "postcss-colormin": "^5.2.2",
         "postcss-convert-values": "^5.0.2",
         "postcss-discard-comments": "^5.0.1",
         "postcss-discard-duplicates": "^5.0.1",
@@ -8505,7 +8487,7 @@
         "postcss-normalize-string": "^5.0.1",
         "postcss-normalize-timing-functions": "^5.0.1",
         "postcss-normalize-unicode": "^5.0.1",
-        "postcss-normalize-url": "^5.0.3",
+        "postcss-normalize-url": "^5.0.4",
         "postcss-normalize-whitespace": "^5.0.1",
         "postcss-ordered-values": "^5.0.2",
         "postcss-reduce-initial": "^5.0.2",
@@ -9550,12 +9532,6 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
-    "is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-      "dev": true
-    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -9608,12 +9584,6 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
-    "is-resolvable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-      "dev": true
-    },
     "is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -10754,9 +10724,9 @@
       }
     },
     "postcss": {
-      "version": "8.4.4",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.4.tgz",
-      "integrity": "sha512-joU6fBsN6EIer28Lj6GDFoC/5yOZzLCfn0zHAn/MYXI7aPt4m4hK5KC5ovEZXy+lnCjmYIbQWngvju2ddyEr8Q==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
       "requires": {
         "nanoid": "^3.1.30",
         "picocolors": "^1.0.0",
@@ -10794,15 +10764,15 @@
       }
     },
     "postcss-colormin": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.1.tgz",
-      "integrity": "sha512-VVwMrEYLcHYePUYV99Ymuoi7WhKrMGy/V9/kTS0DkCoJYmmjdOMneyhzYUxcNgteKDVbrewOkSM7Wje/MFwxzA==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.2.tgz",
+      "integrity": "sha512-tSEe3NpqWARUTidDlF0LntPkdlhXqfDFuA1yslqpvvGAfpZ7oBaw+/QXd935NKm2U9p4PED0HDZlzmMk7fVC6g==",
       "dev": true,
       "requires": {
         "browserslist": "^4.16.6",
         "caniuse-api": "^3.0.0",
         "colord": "^2.9.1",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-value-parser": "^4.2.0"
       }
     },
     "postcss-convert-values": {
@@ -10999,14 +10969,13 @@
       }
     },
     "postcss-normalize-url": {
-      "version": "5.0.3",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.3.tgz",
-      "integrity": "sha512-qWiUMbvkRx3kc1Dp5opzUwc7MBWZcSDK2yofCmdvFBCpx+zFPkxBC1FASQ59Pt+flYfj/nTZSkmF56+XG5elSg==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.4.tgz",
+      "integrity": "sha512-cNj3RzK2pgQQyNp7dzq0dqpUpQ/wYtdDZM3DepPmFjCmYIfceuD9VIAcOdvrNetjIU65g1B4uwdP/Krf6AFdXg==",
       "dev": true,
       "requires": {
-        "is-absolute-url": "^3.0.3",
         "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-value-parser": "^4.2.0"
       }
     },
     "postcss-normalize-whitespace": {
@@ -11103,9 +11072,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.0.tgz",
-      "integrity": "sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
+      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
       "dev": true
     },
     "prettier-linter-helpers": {
diff --git a/package.json b/package.json
index 5d588322..9cb827f0 100644
--- a/package.json
+++ b/package.json
@@ -45,20 +45,20 @@
   "devDependencies": {
     "@swc/cli": "^0.1.55",
     "@swc/core": "^1.2.118",
-    "@swc/jest": "^0.2.11",
+    "@swc/jest": "^0.2.15",
     "@swc/register": "^0.1.7",
     "autoprefixer": "^10.4.0",
     "cross-env": "^7.0.3",
-    "cssnano": "^5.0.12",
+    "cssnano": "^5.0.14",
     "esbuild": "^0.14.2",
     "eslint": "^8.4.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "^27.4.3",
     "jest-diff": "^27.4.2",
-    "postcss": "^8.4.4",
+    "postcss": "^8.4.5",
     "postcss-cli": "^8.3.1",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "rimraf": "^3.0.0"
   },
   "peerDependencies": {
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
index eccf8efc..49004e18 100644
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -14,6 +14,11 @@ const PATTERNS = [
   /([^<>"'`\s]*\[[^<>"'`\s]*:"[^"'`\s]*"\])/.source, // `[content:"hello"]` but not `[content:'hello']`
   /([^<>"'`\s]*\[[^"'`\s]+\][^<>"'`\s]*)/.source, // `fill-[#bada55]`, `fill-[#bada55]/50`
   /([^<>"'`\s]*[^"'`\s:\\])/.source, //  `px-1.5`, `uppercase` but not `uppercase:`
+
+  // Arbitrary properties
+  // /([^"\s]*\[[^\s]+?\][^"\s]*)/.source,
+  // /([^'\s]*\[[^\s]+?\][^'\s]*)/.source,
+  // /([^`\s]*\[[^\s]+?\][^`\s]*)/.source,
 ].join('|')
 
 const BROAD_MATCH_GLOBAL_REGEXP = new RegExp(PATTERNS, 'g')
@@ -29,3 +34,13 @@ export function defaultExtractor(content) {
 
   return results
 }
+
+// Regular utilities
+// {{modifier}:}*{namespace}{-{suffix}}*{/{opacityModifier}}?
+
+// Arbitrary values
+// {{modifier}:}*{namespace}-[{arbitraryValue}]{/{opacityModifier}}?
+// arbitraryValue: no whitespace, balanced quotes unless within quotes, balanced brackets unless within quotes
+
+// Arbitrary properties
+// {{modifier}:}*[{validCssPropertyName}:{arbitraryValue}]
diff --git a/src/util/color.js b/src/util/color.js
index b1d1a556..aa21d668 100644
--- a/src/util/color.js
+++ b/src/util/color.js
@@ -5,8 +5,11 @@ let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i
 let VALUE = `(?:\\d+|\\d*\\.\\d+)%?`
 let SEP = `(?:\\s*,\\s*|\\s+)`
 let ALPHA_SEP = `\\s*[,/]\\s*`
-let RGB_HSL = new RegExp(
-  `^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+let RGB = new RegExp(
+  `^rgba?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
+)
+let HSL = new RegExp(
+  `^hsla?\\(\\s*((?:${VALUE})(?:deg|rad|grad|turn)?)${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$`
 )
 
 export function parseColor(value) {
@@ -37,13 +40,23 @@ export function parseColor(value) {
     }
   }
 
-  let match = value.match(RGB_HSL)
+  let rgbMatch = value.match(RGB)
+
+  if (rgbMatch !== null) {
+    return {
+      mode: 'rgb',
+      color: [rgbMatch[1], rgbMatch[2], rgbMatch[3]].map((v) => v.toString()),
+      alpha: rgbMatch[4]?.toString?.(),
+    }
+  }
+
+  let hslMatch = value.match(HSL)
 
-  if (match !== null) {
+  if (hslMatch !== null) {
     return {
-      mode: match[1],
-      color: [match[2], match[3], match[4]].map((v) => v.toString()),
-      alpha: match[5]?.toString?.(),
+      mode: 'hsl',
+      color: [hslMatch[1], hslMatch[2], hslMatch[3]].map((v) => v.toString()),
+      alpha: hslMatch[4]?.toString?.(),
     }
   }
 
diff --git a/standalone-cli/package.json b/standalone-cli/package.json
index 4a019a52..539c1137 100644
--- a/standalone-cli/package.json
+++ b/standalone-cli/package.json
@@ -2,9 +2,9 @@
   "name": "tailwindcss-standalone",
   "version": "0.0.0",
   "scripts": {
-    "build": "pkg standalone.js --out-path dist --targets node16-macos-x64,node16-macos-arm64,node16-win-x64,node16-linux-x64 --compress Brotli --no-bytecode --public-packages \"*\" --public",
+    "build": "pkg standalone.js --out-path dist --targets node16-macos-x64,node16-macos-arm64,node16-win-x64,node16-linux-x64,node16-linux-arm64 --compress Brotli --no-bytecode --public-packages \"*\" --public",
     "prebuild": "rimraf dist",
-    "postbuild": "move-file dist/standalone-macos-x64 dist/tailwindcss-macos-x64 && move-file dist/standalone-macos-arm64 dist/tailwindcss-macos-arm64 && move-file dist/standalone-win-x64.exe dist/tailwindcss-windows-x64.exe && move-file dist/standalone-linux-x64 dist/tailwindcss-linux-x64",
+    "postbuild": "move-file dist/standalone-macos-x64 dist/tailwindcss-macos-x64 && move-file dist/standalone-macos-arm64 dist/tailwindcss-macos-arm64 && move-file dist/standalone-win-x64.exe dist/tailwindcss-windows-x64.exe && move-file dist/standalone-linux-x64 dist/tailwindcss-linux-x64 && move-file dist/standalone-linux-arm64 dist/tailwindcss-linux-arm64",
     "test": "jest"
   },
   "devDependencies": {


Test patch:
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index ffa4d3cf..47a311ef 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -603,6 +603,13 @@
 .bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] {
   background-color: hsla(0, 100%, 50%, 0.3);
 }
+.bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] {
+  --tw-bg-opacity: 1;
+  background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity));
+}
+.bg-\[hsla\(0turn\2c 100\%\2c 50\%\2c 0\.3\)\] {
+  background-color: hsla(0turn, 100%, 50%, 0.3);
+}
 .bg-\[\#0f0_var\(--value\)\] {
   background-color: #0f0 var(--value);
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index af75a325..142240b1 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -216,6 +216,7 @@
     <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-[hsl(0rad,100%,50%)] bg-[hsla(0turn,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>
diff --git a/tests/color.test.js b/tests/color.test.js
index be9edbac..a01b9d7e 100644
--- a/tests/color.test.js
+++ b/tests/color.test.js
@@ -2,21 +2,37 @@ import { parseColor, formatColor } from '../src/util/color'
 
 describe('parseColor', () => {
   it.each`
-    color                       | output
-    ${'black'}                  | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
-    ${'#0088cc'}                | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
-    ${'#08c'}                   | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
-    ${'#0088cc99'}              | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
-    ${'#08c9'}                  | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
-    ${'rgb(0, 30, 60)'}         | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
-    ${'rgba(0, 30, 60, 0.5)'}   | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
-    ${'rgb(0 30 60)'}           | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
-    ${'rgb(0 30 60 / 0.5)'}     | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
-    ${'hsl(0, 30%, 60%)'}       | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
-    ${'hsla(0, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
-    ${'hsl(0 30% 60%)'}         | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
-    ${'hsl(0 30% 60% / 0.5)'}   | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
-    ${'transparent'}            | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
+    color                           | output
+    ${'black'}                      | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }}
+    ${'#0088cc'}                    | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+    ${'#08c'}                       | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }}
+    ${'#0088cc99'}                  | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+    ${'#08c9'}                      | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }}
+    ${'rgb(0, 30, 60)'}             | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+    ${'rgba(0, 30, 60, 0.5)'}       | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+    ${'rgb(0 30 60)'}               | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }}
+    ${'rgb(0 30 60 / 0.5)'}         | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }}
+    ${'hsl(0, 30%, 60%)'}           | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0deg, 30%, 60%)'}        | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0rad, 30%, 60%)'}        | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0grad, 30%, 60%)'}       | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0turn, 30%, 60%)'}       | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+    ${'hsla(0, 30%, 60%, 0.5)'}     | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0deg, 30%, 60%, 0.5)'}  | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0rad, 30%, 60%, 0.5)'}  | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0grad, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsla(0turn, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0 30% 60%)'}             | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0deg 30% 60%)'}          | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0rad 30% 60%)'}          | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0grad 30% 60%)'}         | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0turn 30% 60%)'}         | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: undefined }}
+    ${'hsl(0 30% 60% / 0.5)'}       | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0deg 30% 60% / 0.5)'}    | ${{ mode: 'hsl', color: ['0deg', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0rad 30% 60% / 0.5)'}    | ${{ mode: 'hsl', color: ['0rad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0grad 30% 60% / 0.5)'}   | ${{ mode: 'hsl', color: ['0grad', '30%', '60%'], alpha: '0.5' }}
+    ${'hsl(0turn 30% 60% / 0.5)'}   | ${{ mode: 'hsl', color: ['0turn', '30%', '60%'], alpha: '0.5' }}
+    ${'transparent'}                | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }}
   `('should parse "$color" to the correct value', ({ color, output }) => {
     expect(parseColor(color)).toEqual(output)
   })
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
index 5c128f64..e507f8de 100644
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -25,6 +25,7 @@ const input =
   <div class="uppercase:"></div>
   <div class="hover:font-bold"></div>
   <div class="content-['>']"></div>
+  <div class="[--y:theme(colors.blue.500)]">
 
   <script>
     let classes01 = ["text-[10px]"]
@@ -43,7 +44,7 @@ const input =
     let classes14 = ["<div class='hover:test'>"]
 
     let obj = {
-      uppercase:true
+      lowercase: true
     }
   </script>
 ` + jsxExample
@@ -65,6 +66,7 @@ const includes = [
   `fill-[#bada55]/50`,
   `px-1.5`,
   `uppercase`,
+  `lowercase`,
   `hover:font-bold`,
   `text-sm`,
   `text-[10px]`,
@@ -87,6 +89,7 @@ const includes = [
   `content-['>']`,
   `hover:test`,
   `overflow-scroll`,
+  `[--y:theme(colors.blue.500)]`,
 ]
 
 const excludes = [
@@ -109,3 +112,214 @@ test('The default extractor works as expected', async () => {
     expect(extractions).not.toContain(str)
   }
 })
+
+// Scenarios:
+// - In double quoted class attribute
+// - In single quoted class attribute
+// - Single-quoted as a variable
+// - Double-quoted as a variable
+// - Single-quoted as first array item
+// - Double-quoted as first array item
+// - Single-quoted as middle array item
+// - Double-quoted as middle array item
+// - Single-quoted as last array item
+// - Double-quoted as last array item
+// - Bare as an object key (with trailing `:`)
+// - Quoted as an object key (with trailing `:`)
+// - Within a template literal
+// - Within a template literal directly before interpolation
+// - Within a template literal directly after interpolation
+//   - JS: ${...}
+//   - PHP: {$...}
+//   - Ruby: #{...}
+// - Within a string of HTML wrapped in escaped quotes
+
+test('basic utility classes', async () => {
+  const extractions = defaultExtractor(`
+    <div class="text-center font-bold px-4 pointer-events-none"></div>
+  `)
+
+  expect(extractions).toContain('text-center')
+  expect(extractions).toContain('font-bold')
+  expect(extractions).toContain('px-4')
+  expect(extractions).toContain('pointer-events-none')
+})
+
+test('modifiers with basic utilites', async () => {
+  const extractions = defaultExtractor(`
+    <div class="hover:text-center hover:focus:font-bold"></div>
+  `)
+
+  expect(extractions).toContain('hover:text-center')
+  expect(extractions).toContain('hover:focus:font-bold')
+})
+
+test('utilities with dot characters', async () => {
+  const extractions = defaultExtractor(`
+    <div class="px-1.5 active:px-2.5 hover:focus:px-3.5"></div>
+  `)
+
+  expect(extractions).toContain('px-1.5')
+  expect(extractions).toContain('active:px-2.5')
+  expect(extractions).toContain('hover:focus:px-3.5')
+})
+
+test('basic utilities with color opacity modifier', async () => {
+  const extractions = defaultExtractor(`
+    <div class="text-red-500/25 hover:text-red-500/50 hover:active:text-red-500/75"></div>
+  `)
+
+  expect(extractions).toContain('text-red-500/25')
+  expect(extractions).toContain('hover:text-red-500/50')
+  expect(extractions).toContain('hover:active:text-red-500/75')
+})
+
+test('basic arbitrary values', async () => {
+  const extractions = defaultExtractor(`
+    <div class="px-[25px] hover:px-[40rem] hover:focus:px-[23vh]"></div>
+  `)
+
+  expect(extractions).toContain('px-[25px]')
+  expect(extractions).toContain('hover:px-[40rem]')
+  expect(extractions).toContain('hover:focus:px-[23vh]')
+})
+
+test('arbitrary values with color opacity modifier', async () => {
+  const extractions = defaultExtractor(`
+    <div class="text-[#bada55]/25 hover:text-[#bada55]/50 hover:active:text-[#bada55]/75"></div>
+  `)
+
+  expect(extractions).toContain('text-[#bada55]/25')
+  expect(extractions).toContain('hover:text-[#bada55]/50')
+  expect(extractions).toContain('hover:active:text-[#bada55]/75')
+})
+
+test('arbitrary values with spaces', async () => {
+  const extractions = defaultExtractor(`
+    <div class="grid-cols-[1fr_200px_3fr] md:grid-cols-[2fr_100px_1fr] open:lg:grid-cols-[3fr_300px_1fr]"></div>
+  `)
+
+  expect(extractions).toContain('grid-cols-[1fr_200px_3fr]')
+  expect(extractions).toContain('md:grid-cols-[2fr_100px_1fr]')
+  expect(extractions).toContain('open:lg:grid-cols-[3fr_300px_1fr]')
+})
+
+test('arbitrary values with css variables', async () => {
+  const extractions = defaultExtractor(`
+    <div class="fill-[var(--my-color)] hover:fill-[var(--my-color-2)] hover:focus:fill-[var(--my-color-3)]"></div>
+  `)
+
+  expect(extractions).toContain('fill-[var(--my-color)]')
+  expect(extractions).toContain('hover:fill-[var(--my-color-2)]')
+  expect(extractions).toContain('hover:focus:fill-[var(--my-color-3)]')
+})
+
+test('arbitrary values with type hints', async () => {
+  const extractions = defaultExtractor(`
+    <div class="text-[color:var(--my-color)] hover:text-[color:var(--my-color-2)] hover:focus:text-[color:var(--my-color-3)]"></div>
+  `)
+
+  expect(extractions).toContain('text-[color:var(--my-color)]')
+  expect(extractions).toContain('hover:text-[color:var(--my-color-2)]')
+  expect(extractions).toContain('hover:focus:text-[color:var(--my-color-3)]')
+})
+
+test('arbitrary values with single quotes', async () => {
+  const extractions = defaultExtractor(`
+    <div class="content-['hello_world'] hover:content-['hello_world_2'] hover:focus:content-['hello_world_3']"></div>
+  `)
+
+  expect(extractions).toContain(`content-['hello_world']`)
+  expect(extractions).toContain(`hover:content-['hello_world_2']`)
+  expect(extractions).toContain(`hover:focus:content-['hello_world_3']`)
+})
+
+test('arbitrary values with double quotes', async () => {
+  const extractions = defaultExtractor(`
+    <div class='content-["hello_world"] hover:content-["hello_world_2"] hover:focus:content-["hello_world_3"]'></div>
+  `)
+
+  expect(extractions).toContain(`content-["hello_world"]`)
+  expect(extractions).toContain(`hover:content-["hello_world_2"]`)
+  expect(extractions).toContain(`hover:focus:content-["hello_world_3"]`)
+})
+
+test('arbitrary values with some single quoted values', async () => {
+  const extractions = defaultExtractor(`
+    <div class="font-['Open_Sans',_system-ui,_sans-serif] hover:font-['Proxima_Nova',_system-ui,_sans-serif] hover:focus:font-['Inter_var',_system-ui,_sans-serif]"></div>
+  `)
+
+  expect(extractions).toContain(`font-['Open_Sans',_system-ui,_sans-serif]`)
+  expect(extractions).toContain(`hover:font-['Proxima_Nova',_system-ui,_sans-serif]`)
+  expect(extractions).toContain(`hover:focus:font-['Inter_var',_system-ui,_sans-serif]`)
+})
+
+test('arbitrary values with some double quoted values', async () => {
+  const extractions = defaultExtractor(`
+    <div class='font-["Open_Sans",_system-ui,_sans-serif] hover:font-["Proxima_Nova",_system-ui,_sans-serif] hover:focus:font-["Inter_var",_system-ui,_sans-serif]'></div>
+  `)
+
+  expect(extractions).toContain(`font-["Open_Sans",_system-ui,_sans-serif]`)
+  expect(extractions).toContain(`hover:font-["Proxima_Nova",_system-ui,_sans-serif]`)
+  expect(extractions).toContain(`hover:focus:font-["Inter_var",_system-ui,_sans-serif]`)
+})
+
+test('arbitrary values with escaped underscores', async () => {
+  const extractions = defaultExtractor(`
+    <div class="content-['hello\\_world'] hover:content-['hello\\_world\\_2'] hover:focus:content-['hello\\_world\\_3']"></div>
+  `)
+
+  expect(extractions).toContain(`content-['hello\\_world']`)
+  expect(extractions).toContain(`hover:content-['hello\\_world\\_2']`)
+  expect(extractions).toContain(`hover:focus:content-['hello\\_world\\_3']`)
+})
+
+test('basic utilities with arbitrary color opacity modifier', async () => {
+  const extractions = defaultExtractor(`
+    <div class="text-red-500/[.25] hover:text-red-500/[.5] hover:active:text-red-500/[.75]"></div>
+  `)
+
+  expect(extractions).toContain('text-red-500/[.25]')
+  expect(extractions).toContain('hover:text-red-500/[.5]')
+  expect(extractions).toContain('hover:active:text-red-500/[.75]')
+})
+
+test('arbitrary values with arbitrary color opacity modifier', async () => {
+  const extractions = defaultExtractor(`
+    <div class="text-[#bada55]/[.25] hover:text-[#bada55]/[.5] hover:active:text-[#bada55]/[.75]"></div>
+  `)
+
+  expect(extractions).toContain('text-[#bada55]/[.25]')
+  expect(extractions).toContain('hover:text-[#bada55]/[.5]')
+  expect(extractions).toContain('hover:active:text-[#bada55]/[.75]')
+})
+
+test('arbitrary values with angle brackets', async () => {
+  const extractions = defaultExtractor(`
+    <div class="content-[>] hover:content-[<] hover:focus:content-[>]"></div>
+  `)
+
+  expect(extractions).toContain(`content-[>]`)
+  expect(extractions).toContain(`hover:content-[<]`)
+  expect(extractions).toContain(`hover:focus:content-[>]`)
+})
+
+test('arbitrary values with angle brackets in single quotes', async () => {
+  const extractions = defaultExtractor(`
+    <div class="content-['>'] hover:content-['<'] hover:focus:content-['>']"></div>
+  `)
+
+  expect(extractions).toContain(`content-['>']`)
+  expect(extractions).toContain(`hover:content-['<']`)
+  expect(extractions).toContain(`hover:focus:content-['>']`)
+})
+
+test('arbitrary values with angle brackets in double quotes', async () => {
+  const extractions = defaultExtractor(`
+    <div class="content-[">"] hover:content-["<"] hover:focus:content-[">"]"></div>
+  `)
+
+  expect(extractions).toContain(`content-[">"]`)
+  expect(extractions).toContain(`hover:content-["<"]`)
+  expect(extractions).toContain(`hover:focus:content-[">"]`)
+})