This repository was archived by the owner on Feb 13, 2024. It is now read-only.
File tree Expand file tree Collapse file tree 3 files changed +35
-9
lines changed Expand file tree Collapse file tree 3 files changed +35
-9
lines changed Original file line number Diff line number Diff line change 5
5
6
6
Adds utilty classes for ` text-wrap: balance ` and ` text-wrap: pretty ` in Tailwind CSS.
7
7
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
+
8
12
See the [ Chrome Developers Blog] ( https://developer.chrome.com/blog/css-text-wrap-balance/ ) for more
9
13
information about ` text-wrap: balance ` in CSS and why it's useful.
10
14
@@ -25,7 +29,7 @@ module.exports = {
25
29
}
26
30
```
27
31
28
- This plugin generates the following utilities:
32
+ This plugin generates the following utilities when the classes are used :
29
33
30
34
``` css
31
35
.text-balance {
@@ -35,6 +39,14 @@ This plugin generates the following utilities:
35
39
.text-pretty {
36
40
text-wrap : pretty;
37
41
}
42
+
43
+ .text-wrap {
44
+ text-wrap : wrap ;
45
+ }
46
+
47
+ .text-nowrap {
48
+ text-wrap : nowrap ;
49
+ }
38
50
```
39
51
40
52
Not all browsers support ` text-wrap: balance ` yet. You can use the
Original file line number Diff line number Diff line change @@ -8,6 +8,8 @@ const textBalance = plugin(function({ addUtilities }) {
8
8
'.text-pretty' : {
9
9
'text-wrap' : 'pretty' ,
10
10
} ,
11
+ '.text-wrap' : { 'text-wrap' : 'wrap' } ,
12
+ '.text-nowrap' : { 'text-wrap' : 'nowrap' } ,
11
13
} )
12
14
} )
13
15
Original file line number Diff line number Diff line change @@ -35,22 +35,34 @@ it('should output the text-wrap:pretty css', async () => {
35
35
` )
36
36
} )
37
37
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 ( ) => {
40
39
const { css } = await postcss ( [
41
40
require ( 'tailwindcss' ) ( {
42
- content : [ { raw : 'text-balance text-pretty ' } ] ,
41
+ content : [ { raw : 'text-wrap ' } ] ,
43
42
plugins : [ plugin ] ,
44
43
corePlugins : { preflight : false } ,
45
44
} ) ,
46
45
] ) . process ( '@tailwind utilities;' , { from : undefined } )
47
46
48
47
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
54
50
}"
55
51
` )
56
52
} )
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
+ } )
You can’t perform that action at this time.
0 commit comments