diff --git a/src/corePlugins.js b/src/corePlugins.js index beeb7d956e1a..1da6b0e19e35 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1396,8 +1396,10 @@ export let corePlugins = { boxDecorationBreak: ({ addUtilities }) => { addUtilities({ - '.decoration-slice': { 'box-decoration-break': 'slice' }, - '.decoration-clone': { 'box-decoration-break': 'clone' }, + '.decoration-slice': { 'box-decoration-break': 'slice' }, // Deprecated + '.decoration-clone': { 'box-decoration-break': 'clone' }, // Deprecated + '.box-decoration-slice': { 'box-decoration-break': 'slice' }, + '.box-decoration-clone': { 'box-decoration-break': 'clone' }, }) }, @@ -1655,6 +1657,7 @@ export let corePlugins = { textDecoration: ({ addUtilities }) => { addUtilities({ '.underline': { 'text-decoration': 'underline' }, + '.overline': { 'text-decoration': 'overline' }, '.line-through': { 'text-decoration': 'line-through' }, '.no-underline': { 'text-decoration': 'none' }, }) @@ -1671,6 +1674,28 @@ export let corePlugins = { ) }, + textDecorationStyle: ({ addUtilities }) => { + addUtilities({ + '.decoration-solid': { 'text-decoration-style': 'solid' }, + '.decoration-double': { 'text-decoration-style': 'double' }, + '.decoration-dotted': { 'text-decoration-style': 'dotted' }, + '.decoration-dashed': { 'text-decoration-style': 'dashed' }, + '.decoration-wavy': { 'text-decoration-style': 'wavy' }, + }) + }, + + textDecorationThickness: createUtilityPlugin( + 'textDecorationThickness', + [['decoration', ['text-decoration-thickness']]], + { type: ['length', 'percentage'] } + ), + + textUnderlineOffset: createUtilityPlugin( + 'textUnderlineOffset', + [['underline-offset', ['text-underline-offset']]], + { type: ['length', 'percentage'] } + ), + fontSmoothing: ({ addUtilities }) => { addUtilities({ '.antialiased': { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index ff6b40c5c1d0..2bcb58f58e15 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -798,6 +798,23 @@ module.exports = { }, textColor: ({ theme }) => theme('colors'), textDecorationColor: ({ theme }) => theme('colors'), + textDecorationThickness: { + auto: 'auto', + 'from-font': 'from-font', + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, + textUnderlineOffset: { + auto: 'auto', + 0: '0px', + 1: '1px', + 2: '2px', + 4: '4px', + 8: '8px', + }, textIndent: ({ theme }) => ({ ...theme('spacing'), }), diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 4619b5b00c9c..8e7bcc05335b 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -825,6 +825,12 @@ .decoration-\[var\(--color\)\] { text-decoration-color: var(--color); } +.decoration-\[length\:10px\] { + text-decoration-thickness: 10px; +} +.underline-offset-\[10px\] { + text-underline-offset: 10px; +} .placeholder-\[var\(--placeholder\)\]::placeholder { color: var(--placeholder); } diff --git a/tests/arbitrary-values.test.html b/tests/arbitrary-values.test.html index 71a012c699e8..32bc60248b1a 100644 --- a/tests/arbitrary-values.test.html +++ b/tests/arbitrary-values.test.html @@ -305,6 +305,10 @@
+ + + + diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 6eb35b5b53f4..08000d8dee8e 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -662,6 +662,12 @@ .decoration-clone { box-decoration-break: clone; } +.box-decoration-slice { + box-decoration-break: slice; +} +.box-decoration-clone { + box-decoration-break: clone; +} .bg-cover { background-size: cover; } @@ -799,6 +805,21 @@ .decoration-red-600 { text-decoration-color: #dc2626; } +.decoration-solid { + text-decoration-style: solid; +} +.decoration-1 { + text-decoration-thickness: 1px; +} +.decoration-2 { + text-decoration-thickness: 2px; +} +.underline-offset-1 { + text-underline-offset: 1px; +} +.underline-offset-2 { + text-underline-offset: 2px; +} .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/tests/basic-usage.test.html b/tests/basic-usage.test.html index 4a64e43c51ae..aabf1b64728e 100644 --- a/tests/basic-usage.test.html +++ b/tests/basic-usage.test.html @@ -34,6 +34,7 @@ + @@ -160,7 +161,14 @@ + + + + + + +