Add support for text-wrap property

tailwindlabs · May 30, 2023 · 88de7a4 · 88de7a4
1 parent e1d4955
commit 88de7a4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/src/corePlugins.js b/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': 'wrap' },
+    })
+  },
+
   wordBreak: ({ addUtilities }) => {
     addUtilities({
       '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },

diff --git 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: wrap;
+}
 .break-words {
   overflow-wrap: break-word;
 }

diff --git a/tests/basic-usage.test.js b/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>