* Add ellipsis and no-ellipsis utilities

Co-authored-by: Benoît Rouleau <benoit.rouleau@icloud.com>

__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;
   }

__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;
   }

__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;
   }

__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;
   }

__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;
   }

src/corePluginList.js

@@ -76,6 +76,7 @@ export const corePluginList = [
   'textAlign',
   'textColor',
   'textOpacity',
+  'textOverflow',
   'fontStyle',
   'textTransform',
   'textDecoration',

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'

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')
+    )
+  }
+}

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'],