diff --git a/__fixtures__/typography.js b/__fixtures__/typography.js index 78ca1dda..9f5ec0b9 100644 --- a/__fixtures__/typography.js +++ b/__fixtures__/typography.js @@ -312,8 +312,10 @@ tw`lowercase` tw`capitalize` tw`normal-case` -// https://tailwindcss.com/docs/word-break +// https://tailwindcss.com/docs/text-overflow tw`truncate` +tw`overflow-ellipsis` +tw`overflow-clip` // https://tailwindcss.com/docs/vertical-align tw`align-baseline` diff --git a/__snapshots__/plugin.test.js.snap b/__snapshots__/plugin.test.js.snap index 37323955..7d3c1644 100644 --- a/__snapshots__/plugin.test.js.snap +++ b/__snapshots__/plugin.test.js.snap @@ -428,26 +428,26 @@ const _GlobalStyles = () => ( <_globalImport styles={_css\` @keyframes spin { - to { + to { transform: rotate(360deg); } } @keyframes ping { - 75%, 100% { + 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { - 50% { + 50% { opacity: .5; } } @keyframes bounce { - 0%, 100% { + 0%, 100% { transform: translateY(-25%); animationTimingFunction: cubic-bezier(0.8,0,1,1); } - - 50% { + + 50% { transform: none; animationTimingFunction: cubic-bezier(0,0,0.2,1); } }\`} @@ -17515,8 +17515,10 @@ tw\`lowercase\` tw\`capitalize\` tw\`normal-case\` -// https://tailwindcss.com/docs/word-break +// https://tailwindcss.com/docs/text-overflow tw\`truncate\` +tw\`overflow-ellipsis\` +tw\`overflow-clip\` // https://tailwindcss.com/docs/vertical-align tw\`align-baseline\` @@ -18815,12 +18817,18 @@ tw\`break-all\` }) ;({ textTransform: 'none', -}) // https://tailwindcss.com/docs/word-break +}) // https://tailwindcss.com/docs/text-overflow ;({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', +}) +;({ + textOverflow: 'ellipsis', +}) +;({ + textOverflow: 'clip', }) // https://tailwindcss.com/docs/vertical-align ;({ diff --git a/src/config/staticStyles.js b/src/config/staticStyles.js index ac3b3bcb..7247201b 100644 --- a/src/config/staticStyles.js +++ b/src/config/staticStyles.js @@ -433,6 +433,8 @@ export default { config: 'wordbreak', }, 'break-all': { output: { wordBreak: 'break-all' }, config: 'wordbreak' }, + + // https://tailwindcss.com/docs/text-overflow truncate: { output: { overflow: 'hidden', @@ -441,6 +443,8 @@ export default { }, config: false, }, + 'overflow-ellipsis': { output: { textOverflow: 'ellipsis' } }, + 'overflow-clip': { output: { textOverflow: 'clip' } }, /** * ===========================================