Add support for visibility: collapse with new collapsed utility

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add future flag to disable color opacity utility plugins ([#9088](https://github.com/tailwindlabs/tailwindcss/pull/9088))
 - Add negative value support for `outline-offset` ([#9136](https://github.com/tailwindlabs/tailwindcss/pull/9136))
 - Allow negating utilities using min/max/clamp ([#9237](https://github.com/tailwindlabs/tailwindcss/pull/9237))
+- Add new `collapse` utility for `visibility: collapse` ([#9181](https://github.com/tailwindlabs/tailwindcss/pull/9181))
 
 ### Fixed
 

src/corePlugins.js

@@ -397,6 +397,7 @@ export let corePlugins = {
     addUtilities({
       '.visible': { visibility: 'visible' },
       '.invisible': { visibility: 'hidden' },
+      '.collapse': { visibility: 'collapse' },
     })
   },
 

tests/basic-usage.test.css

@@ -137,6 +137,9 @@
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .absolute {
   position: absolute;
 }

tests/basic-usage.test.html

@@ -183,6 +183,7 @@
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>
+    <div class="collapse"></div>
     <div class="whitespace-nowrap"></div>
     <div class="w-12"></div>
     <div class="break-words"></div>

tests/raw-content.test.css

@@ -43,6 +43,9 @@
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .absolute {
   position: absolute;
 }

tests/raw-content.test.html

@@ -139,6 +139,7 @@
     <div class="select-none"></div>
     <div class="align-middle"></div>
     <div class="invisible"></div>
+    <div class="collapse"></div>
     <div class="whitespace-nowrap"></div>
     <div class="w-12"></div>
     <div class="break-words"></div>