diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css index e1a3b99ab975..7218b6f27b1e 100644 --- a/__tests__/fixtures/tailwind-output-flagged.css +++ b/__tests__/fixtures/tailwind-output-flagged.css @@ -38562,6 +38562,14 @@ video { --text-opacity: 1; } +.overflow-ellipsis { + text-overflow: ellipsis; +} + +.overflow-clip { + text-overflow: clip; +} + .italic { font-style: italic; } @@ -82549,6 +82557,14 @@ video { --text-opacity: 1; } + .sm\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .sm\:overflow-clip { + text-overflow: clip; + } + .sm\:italic { font-style: italic; } @@ -126506,6 +126522,14 @@ video { --text-opacity: 1; } + .md\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .md\:overflow-clip { + text-overflow: clip; + } + .md\:italic { font-style: italic; } @@ -170463,6 +170487,14 @@ video { --text-opacity: 1; } + .lg\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .lg\:overflow-clip { + text-overflow: clip; + } + .lg\:italic { font-style: italic; } @@ -214420,6 +214452,14 @@ video { --text-opacity: 1; } + .xl\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .xl\:overflow-clip { + text-overflow: clip; + } + .xl\:italic { font-style: italic; } @@ -258377,6 +258417,14 @@ video { --text-opacity: 1; } + .\32xl\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .\32xl\:overflow-clip { + text-overflow: clip; + } + .\32xl\:italic { font-style: italic; } diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index a4c410a07e04..ec99b8c87853 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -8991,6 +8991,14 @@ video { color: #702459; } +.overflow-ellipsis { + text-overflow: ellipsis; +} + +.overflow-clip { + text-overflow: clip; +} + .italic { font-style: italic; } @@ -19821,6 +19829,14 @@ video { color: #702459; } + .sm\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .sm\:overflow-clip { + text-overflow: clip; + } + .sm\:italic { font-style: italic; } @@ -30621,6 +30637,14 @@ video { color: #702459; } + .md\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .md\:overflow-clip { + text-overflow: clip; + } + .md\:italic { font-style: italic; } @@ -41421,6 +41445,14 @@ video { color: #702459; } + .lg\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .lg\:overflow-clip { + text-overflow: clip; + } + .lg\:italic { font-style: italic; } @@ -52221,6 +52253,14 @@ video { color: #702459; } + .xl\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .xl\:overflow-clip { + text-overflow: clip; + } + .xl\:italic { font-style: italic; } diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index e3196460825d..cf30499eef31 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -15827,6 +15827,14 @@ video { --text-opacity: 1 !important; } +.overflow-ellipsis { + text-overflow: ellipsis !important; +} + +.overflow-clip { + text-overflow: clip !important; +} + .italic { font-style: italic !important; } @@ -34450,6 +34458,14 @@ video { --text-opacity: 1 !important; } + .sm\:overflow-ellipsis { + text-overflow: ellipsis !important; + } + + .sm\:overflow-clip { + text-overflow: clip !important; + } + .sm\:italic { font-style: italic !important; } @@ -53043,6 +53059,14 @@ video { --text-opacity: 1 !important; } + .md\:overflow-ellipsis { + text-overflow: ellipsis !important; + } + + .md\:overflow-clip { + text-overflow: clip !important; + } + .md\:italic { font-style: italic !important; } @@ -71636,6 +71660,14 @@ video { --text-opacity: 1 !important; } + .lg\:overflow-ellipsis { + text-overflow: ellipsis !important; + } + + .lg\:overflow-clip { + text-overflow: clip !important; + } + .lg\:italic { font-style: italic !important; } @@ -90229,6 +90261,14 @@ video { --text-opacity: 1 !important; } + .xl\:overflow-ellipsis { + text-overflow: ellipsis !important; + } + + .xl\:overflow-clip { + text-overflow: clip !important; + } + .xl\:italic { font-style: italic !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index 6b245c3e6abb..51df7fb47515 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -13379,6 +13379,14 @@ video { color: #702459; } +.overflow-ellipsis { + text-overflow: ellipsis; +} + +.overflow-clip { + text-overflow: clip; +} + .italic { font-style: italic; } @@ -29554,6 +29562,14 @@ video { color: #702459; } + .sm\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .sm\:overflow-clip { + text-overflow: clip; + } + .sm\:italic { font-style: italic; } @@ -45699,6 +45715,14 @@ video { color: #702459; } + .md\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .md\:overflow-clip { + text-overflow: clip; + } + .md\:italic { font-style: italic; } @@ -61844,6 +61868,14 @@ video { color: #702459; } + .lg\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .lg\:overflow-clip { + text-overflow: clip; + } + .lg\:italic { font-style: italic; } @@ -77989,6 +78021,14 @@ video { color: #702459; } + .xl\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .xl\:overflow-clip { + text-overflow: clip; + } + .xl\:italic { font-style: italic; } diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 94686d3bab6d..ccc597be9d43 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -15827,6 +15827,14 @@ video { --text-opacity: 1; } +.overflow-ellipsis { + text-overflow: ellipsis; +} + +.overflow-clip { + text-overflow: clip; +} + .italic { font-style: italic; } @@ -34450,6 +34458,14 @@ video { --text-opacity: 1; } + .sm\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .sm\:overflow-clip { + text-overflow: clip; + } + .sm\:italic { font-style: italic; } @@ -53043,6 +53059,14 @@ video { --text-opacity: 1; } + .md\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .md\:overflow-clip { + text-overflow: clip; + } + .md\:italic { font-style: italic; } @@ -71636,6 +71660,14 @@ video { --text-opacity: 1; } + .lg\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .lg\:overflow-clip { + text-overflow: clip; + } + .lg\:italic { font-style: italic; } @@ -90229,6 +90261,14 @@ video { --text-opacity: 1; } + .xl\:overflow-ellipsis { + text-overflow: ellipsis; + } + + .xl\:overflow-clip { + text-overflow: clip; + } + .xl\:italic { font-style: italic; } diff --git a/src/corePluginList.js b/src/corePluginList.js index a060d8be513d..0cd65309977b 100644 --- a/src/corePluginList.js +++ b/src/corePluginList.js @@ -76,6 +76,7 @@ export const corePluginList = [ 'textAlign', 'textColor', 'textOpacity', + 'textOverflow', 'fontStyle', 'textTransform', 'textDecoration', diff --git a/src/plugins/index.js b/src/plugins/index.js index 63e78c66752a..0bfe5c44d989 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -96,6 +96,7 @@ export { default as textAlign } from './textAlign' export { default as textColor } from './textColor' export { default as textDecoration } from './textDecoration' export { default as textOpacity } from './textOpacity' +export { default as textOverflow } from './textOverflow' export { default as textTransform } from './textTransform' export { default as transform } from './transform' export { default as transformOrigin } from './transformOrigin' diff --git a/src/plugins/textOverflow.js b/src/plugins/textOverflow.js new file mode 100644 index 000000000000..e28391a0fd4f --- /dev/null +++ b/src/plugins/textOverflow.js @@ -0,0 +1,11 @@ +export default function() { + return function({ addUtilities, variants }) { + addUtilities( + { + '.overflow-ellipsis': { 'text-overflow': 'ellipsis' }, + '.overflow-clip': { 'text-overflow': 'clip' }, + }, + variants('textOverflow') + ) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 853d6212d661..bd4627946908 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -783,6 +783,7 @@ module.exports = { textOpacity: ['responsive', 'hover', 'focus'], textDecoration: ['responsive', 'hover', 'focus'], textTransform: ['responsive'], + textOverflow: ['responsive'], userSelect: ['responsive'], verticalAlign: ['responsive'], visibility: ['responsive'],