Add support for visibility: collapse with new collapsed utility

[brandonmcconnell]

Purpose & motivation

This PR adds a new collapsed utility to support visibility: collapse which has become extremely valuable for visually hiding elements and allowing subsequent elements to take up their space without layout shift (when used in tables, flexbox, grids, etc.).

More thought needed on naming(?)

As we discussed on the Tailwind discord general channel, it may be a while before merging this so you can give more thought to the best naming for this new utility. I wanted to get the ball rolling by opening this PR so we could begin thinking on it once the Tailwind Labs team has more time for this.

Workarounds

In the meantime, for anyone else seeking to use visibility: collapse within their codebases, here are two workarounds you can use that work perfectly fine for the time being—

1️⃣ Workaround 1: adding a custom utility to your Tailwind config

addUtilities({
  '.collapsed': {
    visibility: 'collapse',
  },
});

<div class="collapsed"></div>

2️⃣ Workaround 2: using Tailwind's arbitrary property syntax

<div class="[visibility:collapse]"></div>

[adamwathan]

Hey! Thought about this, think I'd like to go with collapse as the name instead of collapsed. It matches the CSS, which isn't something we worried about so much in the early days but has proven to be the better way to do things over time.

Do you mind updating and seeing if you can get the tests passing?

[thecrypticace]

I went ahead and updated it so you won't need to. :)

It seems though that there's a maybe non-deterministic problem with parallel variant sorting that this is surfacing. Adding a utility in any plugin before fontWeight causes the parallel variants test to fail when it should not. I'm looking into what'll be required to fix this.

[brandonmcconnell]

Thanks, @adamwathan and @thecrypticace! I was out of town all weekend, so just seeing this now.

I appreciate your coordination and effort on this. Please let me know if there's anything else I can do to help push this forward.

Thanks,
Brandon

[thecrypticace]

Thanks @brandonmcconnell for your patience — we merged in the ordering fix and have merged this is as well! :)

[brandonmcconnell]

Woot woot LGTT 🌮

Thanks or all your work on this @thecrypticace!

[ryanb]

I had issues with this conflicting with legacy code which uses Bootstrap's collapse feature since it uses the collapse class. I couldn't find a good way to disable just this utility so I disabled visibility plugin and recreated the utility classes elsewhere.

corePlugins: {
  // Remove visibility plugin because `collapse` class added in
  // Tailwind CSS 3.2 conflicts with Bootstrap collapsing.
  // The other visibility utilities are recreated manually.
  visibility: false,
},

If someone knows of a better way to disable just collapse utility please let me know.

[brandonmcconnell]

@ryanb Good to know! I guess it is a pretty generic class name. Was there no conflict for hidden, or not anymore now that Bootstrap has switched to d-none (last I heard)?

I believe you should be able to rename/alias Bootstrap's classes more easily, so you may be able to rename the Bootstrap collapse to something else more specific, like closed/collapsed/collapsable/state-collapse depending on your use case.

[ryanb]

Was there no conflict for hidden, or not anymore now that Bootstrap has switched to d-none (last I heard)?

This isn't an issue for us since the behavior is the same (AFAIK).

I believe you should be able to rename/alias Bootstrap's classes more easily, so you may be able to rename the Bootstrap collapse to something else more specific, like closed/collapsed/collapsable/state-collapse depending on your use case.

Good point. I haven't looked into customizing this. It's used by Bootstrap's Collapse JS component so isn't as simple as configuring the CSS.

[brandonmcconnell]

@ryanb I think you can swap out your false override with this to disable only the collapse utility:

visibility: ({ addUtilities }) => {
  addUtilities({
    '.visible': { visibility: 'visible' },
    '.invisible': { visibility: 'hidden' },
    //'.collapse': { visibility: 'collapse' },
  })
},

I commented it out, but you could, of course, keep it and name it whatever suits your use-case best.

Hope this helps. Let me know!

[ryanb]

@brandonmcconnell the collapse utility class is still generated when I added that under corePlugins config, is there a different place to add it?

[brandonmcconnell]

Could you try the same but with false for the collapse value?

Sorry, but in front of my computer at the moment.

[ryanb]

@brandonmcconnell that's still generating the .collapse class. My current work around is working for me, but thanks for your suggestions. 😃

[brandonmcconnell]

@ryanb Awesome! Glad you found a workaround that worked for you. What was it?

[ryanb]

@brandonmcconnell I added visibility: false, to corePlugins config to disable it all together and added .visible and .invisibe classes manually in my CSS.

[brandonmcconnell]

@ryanb Nice! If you also wanted to expose visible and invisible to your Tailwind config for use with variants, etc., you could add those classes as utilities inside the plugins section of your config using addUtilities.

More on that here: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities

Glad you got that resolved. Cheers 🎉

[ryanb]

Good point about variants! Using addUtilities is a better way to handle it.

[prankurpandeyy]

Hey All ,

this property has completely ruined the website and its ability to copy the code snippets , people are disappointed to see it . please apply a fix as soon as possible.

[brandonmcconnell]

@prankurnov15 Tailwind CSS is intended to be a utility framework that uses naming similar to that of native CSS. collapse follows that same model.

Could you please elaborate on…

• which way(s) this new utility hinders your development process?
• how this hinders your ability to copy code snippets? You should be able to copy snippets using this utility just the same as any without it.
• who is disliking it? Could you share some examples sharing this sentiment?

Perhaps it would be helpful to introduce a renameUtility helper function/plugin for users who use classnames like collapse that conflict with usual CSS. This plugin could rename any Tailwind CSS-native utilities you wish to rename to other names of your choosing to avoid conflicts like these.

Is that something you'd be interested in?

[ryanb]

@brandonmcconnell perhaps the prefix config could be enhanced to specify which classes should be prefixed? Then one could prefix only the ones that conflict with their setup.

[prankurpandeyy]

@brandonmcconnell could you please look into this website which offers tailwind elements and it's snippets , when you will copy any snippet it will collapse.

Website https://tailwind-elements.com

[brandonmcconnell]

@prankurnov15 Yes, I see that. That's not an issue with Tailwind CSS but rather the tailwind-elements.com website itself, using a conflicting class name for collapsed. I would suggest that you reach out to the maintainer of Tailwind Elements via a GitHub support issue (here) and ask them to implement a fix similar to the one @ryanb implemented above. 🙂

[ryanb]

@prankurnov15 I believe there's an issue for this already here: mdbootstrap/TW-Elements#1086

[ryanb]

Looks like there's a new blocklist config option in Tailwind 3.2.4 which allows us to disable a specific utility class.

blocklist: ['collapse'],

See the full PR here: #9812

[rohanGP]

.collapse{
visibility:visible;
}