Add support for text-wrap property

CHANGELOG.md

@@ -24,6 +24,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Process and inline `@import` at-rules natively ([#11239](https://github.com/tailwindlabs/tailwindcss/pull/11239))
 - 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))
 
 ### Changed
 

src/corePlugins.js

@@ -1523,6 +1523,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' },

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;
 }

tests/basic-usage.test.js

@@ -192,6 +192,7 @@ test('basic usage', () => {
           <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>