adds text-wrap, text-nowrap to align with tailwindlabs/tailwindcss#11320

README.md

@@ -5,6 +5,10 @@
 
 Adds utilty classes for `text-wrap: balance` and `text-wrap: pretty` in Tailwind CSS.
 
+This plugin is intended to act as a stepping stone until tailwindcss supports `text-wrap: balance` natively.
+It aims to act as a drop-in
+for [tailwindcss pull request #11320](https://github.com/tailwindlabs/tailwindcss/pull/11320).
+
 See the [Chrome Developers Blog](https://developer.chrome.com/blog/css-text-wrap-balance/) for more
 information about `text-wrap: balance` in CSS and why it's useful.
 
@@ -25,7 +29,7 @@ module.exports = {
 }
 ```
 
-This plugin generates the following utilities:
+This plugin generates the following utilities when the classes are used:
 
 ```css
 .text-balance {
@@ -35,6 +39,14 @@ This plugin generates the following utilities:
 .text-pretty {
     text-wrap: pretty;
 }
+
+.text-wrap {
+    text-wrap: wrap;
+}
+
+.text-nowrap {
+    text-wrap: nowrap;
+}
 ```
 
 Not all browsers support `text-wrap: balance` yet. You can use the

src/index.ts

@@ -8,6 +8,8 @@ const textBalance = plugin(function({ addUtilities }) {
     '.text-pretty': {
       'text-wrap': 'pretty',
     },
+    '.text-wrap': { 'text-wrap': 'wrap' },
+    '.text-nowrap': { 'text-wrap': 'nowrap' },
   })
 })
 

tests/test.ts

@@ -35,22 +35,34 @@ it('should output the text-wrap:pretty css', async () => {
   `)
 })
 
-// skipping this test because the actual output is doubled, and I don't know why
-it.skip('should output the text-wrap:balance and text-wrap:pretty css', async () => {
+it('should output the text-wrap:wrap css', async () => {
   const { css } = await postcss([
     require('tailwindcss')({
-      content: [{ raw: 'text-balance text-pretty' }],
+      content: [{ raw: 'text-wrap' }],
       plugins: [plugin],
       corePlugins: { preflight: false },
     }),
   ]).process('@tailwind utilities;', { from: undefined })
 
   expect(css).toMatchInlineSnapshot(`
-    ".text-balance {
-        text-wrap: balance
-    }
-    .text-pretty {
-        text-wrap: pretty
+    ".text-wrap {
+        text-wrap: wrap
     }"
   `)
 })
+
+it('should output the text-wrap:nowrap css', async () => {
+  const { css } = await postcss([
+    require('tailwindcss')({
+      content: [{ raw: 'text-nowrap' }],
+      plugins: [plugin],
+      corePlugins: { preflight: false },
+    }),
+  ]).process('@tailwind utilities;', { from: undefined })
+
+  expect(css).toMatchInlineSnapshot(`
+    ".text-nowrap {
+        text-wrap: nowrap
+    }"
+  `)
+})