From 3202c37187db7101a8d3ca0bc87913760971ac30 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 16 Dec 2022 10:04:11 -0500
Subject: [PATCH 1/2] Update length units

---
 src/util/dataTypes.js            | 18 ++++++++++++++++++
 tests/arbitrary-values.test.css  |  3 +++
 tests/arbitrary-values.test.html |  1 +
 3 files changed, 22 insertions(+)

diff --git a/src/util/dataTypes.js b/src/util/dataTypes.js
index 9936935a59fe..55cc005799f6 100644
--- a/src/util/dataTypes.js
+++ b/src/util/dataTypes.js
@@ -77,6 +77,9 @@ export function percentage(value) {
   return (value.endsWith('%') && number(value.slice(0, -1))) || isCSSFunction(value)
 }
 
+// Please refer to MDN when updating this list:
+// https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
+// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries#container_query_length_units
 let lengthUnits = [
   'cm',
   'mm',
@@ -90,10 +93,25 @@ let lengthUnits = [
   'ch',
   'rem',
   'lh',
+  'rlh',
   'vw',
   'vh',
   'vmin',
   'vmax',
+  'vb',
+  'vi',
+  'svw',
+  'svh',
+  'lvw',
+  'lvh',
+  'dvw',
+  'dvh',
+  'cqw',
+  'cqh',
+  'cqi',
+  'cqb',
+  'cqmin',
+  'cqmax',
 ]
 let lengthUnitsPattern = `(?:${lengthUnits.join('|')})`
 export function length(value) {
diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css
index dead24b1c190..53039fa3ed09 100644
--- a/tests/arbitrary-values.test.css
+++ b/tests/arbitrary-values.test.css
@@ -843,6 +843,9 @@
 .text-\[2\.23rem\] {
   font-size: 2.23rem;
 }
+.text-\[4cqw\] {
+  font-size: 4cqw;
+}
 .text-\[length\:var\(--font-size\)\] {
   font-size: var(--font-size);
 }
diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html
index 4d8be18cdca2..698cefcbc100 100644
--- a/tests/arbitrary-values.test.html
+++ b/tests/arbitrary-values.test.html
@@ -284,6 +284,7 @@
 
     <div class="text-[0]"></div>
     <div class="text-[2.23rem]"></div>
+    <div class="text-[4cqw]"></div>
     <div class="text-[length:var(--font-size)]"></div>
     <div class="text-[angle:var(--angle)]"></div>
     <div class="text-[min(10vh,100px)]"></div>

From c12a80707465ab59d8771054dc45965f63877986 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 16 Dec 2022 10:13:09 -0500
Subject: [PATCH 2/2] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d3f2793487a6..187985492215 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Prevent invalid arbitrary variant selectors from failing the build ([#10059](https://github.com/tailwindlabs/tailwindcss/pull/10059))
 - Properly handle subtraction followed by a variable ([#10074](https://github.com/tailwindlabs/tailwindcss/pull/10074))
 - Fix missing `string[]` in the `theme.dropShadow` types ([#10072](https://github.com/tailwindlabs/tailwindcss/pull/10072))
+- Update list of length units ([#10100](https://github.com/tailwindlabs/tailwindcss/pull/10100))
 
 ### Changed