New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add support for visibility: collapse
with new collapsed
utility
#9181
Add support for visibility: collapse
with new collapsed
utility
#9181
Conversation
Hey! Thought about this, think I'd like to go with Do you mind updating and seeing if you can get the tests passing? |
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. |
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, |
Thanks @brandonmcconnell for your patience — we merged in the ordering fix and have merged this is as well! :) |
Woot woot LGTT Thanks or all your work on this @thecrypticace! |
I had issues with this conflicting with legacy code which uses Bootstrap's collapse feature since it uses the 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 |
@ryanb Good to know! I guess it is a pretty generic class name. Was there no conflict for I believe you should be able to rename/alias Bootstrap's classes more easily, so you may be able to rename the Bootstrap |
This isn't an issue for us since the behavior is the same (AFAIK).
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. |
@ryanb I think you can swap out your 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! |
@brandonmcconnell the |
Could you try the same but with Sorry, but in front of my computer at the moment. |
@brandonmcconnell that's still generating the |
@ryanb Awesome! Glad you found a workaround that worked for you. What was it? |
@brandonmcconnell I added |
@ryanb Nice! If you also wanted to expose More on that here: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities Glad you got that resolved. Cheers |
Good point about variants! Using |
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. |
@prankurnov15 Tailwind CSS is intended to be a utility framework that uses naming similar to that of native CSS. Could you please elaborate on…
Perhaps it would be helpful to introduce a Is that something you'd be interested in? |
@brandonmcconnell perhaps the |
@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 |
@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 |
@prankurnov15 I believe there's an issue for this already here: mdbootstrap/Tailwind-Elements#1086 |
Looks like there's a new blocklist: ['collapse'], See the full PR here: #9812 |
.collapse{ |
Purpose & motivation
This PR adds a new
collapsed
utility to supportvisibility: 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—