diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index e621809c6903..7590dd66ba83 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -8117,6 +8117,14 @@ video { text-decoration: none !important; } +.ellipsis { + text-overflow: ellipsis !important; +} + +.no-ellipsis { + text-overflow: clip !important; +} + .antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; @@ -17810,6 +17818,14 @@ video { text-decoration: none !important; } + .sm\:ellipsis { + text-overflow: ellipsis !important; + } + + .sm\:no-ellipsis { + text-overflow: clip !important; + } + .sm\:antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; @@ -27504,6 +27520,14 @@ video { text-decoration: none !important; } + .md\:ellipsis { + text-overflow: ellipsis !important; + } + + .md\:no-ellipsis { + text-overflow: clip !important; + } + .md\:antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; @@ -37198,6 +37222,14 @@ video { text-decoration: none !important; } + .lg\:ellipsis { + text-overflow: ellipsis !important; + } + + .lg\:no-ellipsis { + text-overflow: clip !important; + } + .lg\:antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; @@ -46892,6 +46924,14 @@ video { text-decoration: none !important; } + .xl\:ellipsis { + text-overflow: ellipsis !important; + } + + .xl\:no-ellipsis { + text-overflow: clip !important; + } + .xl\:antialiased { -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 780cf88b078b..2e7e54113ad2 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -8117,6 +8117,14 @@ video { text-decoration: none; } +.ellipsis { + text-overflow: ellipsis; +} + +.no-ellipsis { + text-overflow: clip; +} + .antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -17810,6 +17818,14 @@ video { text-decoration: none; } + .sm\:ellipsis { + text-overflow: ellipsis; + } + + .sm\:no-ellipsis { + text-overflow: clip; + } + .sm\:antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -27504,6 +27520,14 @@ video { text-decoration: none; } + .md\:ellipsis { + text-overflow: ellipsis; + } + + .md\:no-ellipsis { + text-overflow: clip; + } + .md\:antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -37198,6 +37222,14 @@ video { text-decoration: none; } + .lg\:ellipsis { + text-overflow: ellipsis; + } + + .lg\:no-ellipsis { + text-overflow: clip; + } + .lg\:antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -46892,6 +46924,14 @@ video { text-decoration: none; } + .xl\:ellipsis { + text-overflow: ellipsis; + } + + .xl\:no-ellipsis { + text-overflow: clip; + } + .xl\:antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; diff --git a/src/corePlugins.js b/src/corePlugins.js index 1fe3d82c739b..95ea33011d3c 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -60,6 +60,7 @@ import fontSize from './plugins/fontSize' import fontStyle from './plugins/fontStyle' import textTransform from './plugins/textTransform' import textDecoration from './plugins/textDecoration' +import textOverflow from './plugins/textOverflow' import fontSmoothing from './plugins/fontSmoothing' import letterSpacing from './plugins/letterSpacing' import userSelect from './plugins/userSelect' @@ -153,6 +154,7 @@ export default function({ corePlugins: corePluginConfig }) { fontStyle, textTransform, textDecoration, + textOverflow, fontSmoothing, letterSpacing, userSelect, diff --git a/src/plugins/textOverflow.js b/src/plugins/textOverflow.js new file mode 100644 index 000000000000..d5a8274388ba --- /dev/null +++ b/src/plugins/textOverflow.js @@ -0,0 +1,11 @@ +export default function() { + return function({ addUtilities, variants }) { + addUtilities( + { + '.ellipsis': { 'text-overflow': 'ellipsis' }, + '.no-ellipsis': { 'text-overflow': 'clip' }, + }, + variants('textOverflow') + ) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 50e55cc4d264..051c489413f3 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -588,6 +588,7 @@ module.exports = { textColor: ['responsive', 'hover', 'focus'], textDecoration: ['responsive', 'hover', 'focus'], textTransform: ['responsive'], + textOverflow: ['responsive'], userSelect: ['responsive'], verticalAlign: ['responsive'], visibility: ['responsive'],