From 9caa9547b2e9bf4c766bbb8c44eeda7dd7ef8b7b Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Tue, 30 May 2023 15:26:27 -0400
Subject: [PATCH] Add support for `text-wrap` property (#11320)

Update changelog

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
---
 CHANGELOG.md                     | 1 +
 src/corePlugins.js               | 8 ++++++++
 tests/basic-usage.oxide.test.css | 9 +++++++++
 tests/basic-usage.test.css       | 9 +++++++++
 tests/basic-usage.test.js        | 1 +
 5 files changed, 28 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 89e2344c9..5330caa92 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))
 - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318))
+- Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320))
 
 ## [3.3.7] - 2023-12-18
 
diff --git a/src/corePlugins.js b/src/corePlugins.js
index b8bf04279..c8ee027b0 100644
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -1529,6 +1529,14 @@ export let corePlugins = {
     })
   },
 
+  textWrap: ({ addUtilities }) => {
+    addUtilities({
+      '.text-wrap': { 'text-wrap': 'wrap' },
+      '.text-nowrap': { 'text-wrap': 'nowrap' },
+      '.text-balance': { 'text-wrap': 'balance' },
+    })
+  },
+
   wordBreak: ({ addUtilities }) => {
     addUtilities({
       '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },
diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css
index 455e672ee..6e2d6652d 100644
--- a/tests/basic-usage.oxide.test.css
+++ b/tests/basic-usage.oxide.test.css
@@ -593,6 +593,15 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
+.text-nowrap {
+  text-wrap: nowrap;
+}
+.text-balance {
+  text-wrap: balance;
+}
 .break-words {
   overflow-wrap: break-word;
 }
diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
index 8d1ba2da8..80c406bf6 100644
--- a/tests/basic-usage.test.css
+++ b/tests/basic-usage.test.css
@@ -597,6 +597,15 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
+.text-nowrap {
+  text-wrap: nowrap;
+}
+.text-balance {
+  text-wrap: balance;
+}
 .break-words {
   overflow-wrap: break-word;
 }
diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js
index c8a560c3b..facc87ee2 100644
--- a/tests/basic-usage.test.js
+++ b/tests/basic-usage.test.js
@@ -193,6 +193,7 @@ crosscheck(({ stable, oxide, engine }) => {
             <div class="invisible"></div>
             <div class="collapse"></div>
             <div class="whitespace-nowrap"></div>
+            <div class="text-wrap text-balance text-nowrap"></div>
             <div class="w-12"></div>
             <div class="break-words"></div>
             <div class="z-30"></div>