Add support for visibility: collapse with new collapsed utility (#…

…9181) * Add support for `visibility: collapse` with new `collapsed` utility * fixup * Update changelog Co-authored-by: Jordan Pittman <jordan@cryptica.me>
tailwindlabs · Sep 9, 2022 · cc1be47 · cc1be47
1 parent d6bec49
commit cc1be47
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 0 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -397,6 +397,7 @@ export let corePlugins = {
     addUtilities({
       '.visible': { visibility: 'visible' },
       '.invisible': { visibility: 'hidden' },
+      '.collapse': { visibility: 'collapse' },
     })
   },
 

diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css
@@ -137,6 +137,9 @@
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .absolute {
   position: absolute;
 }

diff --git a/tests/basic-usage.test.html b/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>

diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css
@@ -43,6 +43,9 @@
 .invisible {
   visibility: hidden;
 }
+.collapse {
+  visibility: collapse;
+}
 .absolute {
   position: absolute;
 }

diff --git a/tests/raw-content.test.html b/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>