Skip to content
This repository was archived by the owner on Feb 13, 2024. It is now read-only.

Commit 7e5d147

Browse files
committed
adds text-wrap, text-nowrap to align with tailwindlabs/tailwindcss#11320
1 parent 8054785 commit 7e5d147

File tree

3 files changed

+35
-9
lines changed

3 files changed

+35
-9
lines changed

README.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55

66
Adds utilty classes for `text-wrap: balance` and `text-wrap: pretty` in Tailwind CSS.
77

8+
This plugin is intended to act as a stepping stone until tailwindcss supports `text-wrap: balance` natively.
9+
It aims to act as a drop-in
10+
for [tailwindcss pull request #11320](https://github.com/tailwindlabs/tailwindcss/pull/11320).
11+
812
See the [Chrome Developers Blog](https://developer.chrome.com/blog/css-text-wrap-balance/) for more
913
information about `text-wrap: balance` in CSS and why it's useful.
1014

@@ -25,7 +29,7 @@ module.exports = {
2529
}
2630
```
2731

28-
This plugin generates the following utilities:
32+
This plugin generates the following utilities when the classes are used:
2933

3034
```css
3135
.text-balance {
@@ -35,6 +39,14 @@ This plugin generates the following utilities:
3539
.text-pretty {
3640
text-wrap: pretty;
3741
}
42+
43+
.text-wrap {
44+
text-wrap: wrap;
45+
}
46+
47+
.text-nowrap {
48+
text-wrap: nowrap;
49+
}
3850
```
3951

4052
Not all browsers support `text-wrap: balance` yet. You can use the

src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ const textBalance = plugin(function({ addUtilities }) {
88
'.text-pretty': {
99
'text-wrap': 'pretty',
1010
},
11+
'.text-wrap': { 'text-wrap': 'wrap' },
12+
'.text-nowrap': { 'text-wrap': 'nowrap' },
1113
})
1214
})
1315

tests/test.ts

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,34 @@ it('should output the text-wrap:pretty css', async () => {
3535
`)
3636
})
3737

38-
// skipping this test because the actual output is doubled, and I don't know why
39-
it.skip('should output the text-wrap:balance and text-wrap:pretty css', async () => {
38+
it('should output the text-wrap:wrap css', async () => {
4039
const { css } = await postcss([
4140
require('tailwindcss')({
42-
content: [{ raw: 'text-balance text-pretty' }],
41+
content: [{ raw: 'text-wrap' }],
4342
plugins: [plugin],
4443
corePlugins: { preflight: false },
4544
}),
4645
]).process('@tailwind utilities;', { from: undefined })
4746

4847
expect(css).toMatchInlineSnapshot(`
49-
".text-balance {
50-
text-wrap: balance
51-
}
52-
.text-pretty {
53-
text-wrap: pretty
48+
".text-wrap {
49+
text-wrap: wrap
5450
}"
5551
`)
5652
})
53+
54+
it('should output the text-wrap:nowrap css', async () => {
55+
const { css } = await postcss([
56+
require('tailwindcss')({
57+
content: [{ raw: 'text-nowrap' }],
58+
plugins: [plugin],
59+
corePlugins: { preflight: false },
60+
}),
61+
]).process('@tailwind utilities;', { from: undefined })
62+
63+
expect(css).toMatchInlineSnapshot(`
64+
".text-nowrap {
65+
text-wrap: nowrap
66+
}"
67+
`)
68+
})

0 commit comments

Comments
 (0)