[v4] How to use fade in/out transition from the hidden attribute?

[hiroya-uga]

Hello, thank you for your work on TailwindCSS!

I’ve been enjoying using the hidden attribute in combination with CSS transitions for fade in/out effects.
Here's an example of what I used to do:

https://codepen.io/hiroya_uga/pen/XJbORXP

.toast {
  transition:
    opacity 0.3s ease-out,
    visibility 0.3s ease-out;
}

.toast[hidden] {
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

However, in TailwindCSS v4, I noticed the following rule in the base layer:

[hidden]:where(:not([hidden="until-found"])) {
  display: none !important;
}

Because this !important rule is defined in the lowest layer, it prevents me from calculating the box model of an element with the hidden attribute using standard methods.

As a workaround, I’m currently overriding the style like this:

@layer base {
  .no-hidden {
    display: block !important;
  }
}

<div className="no-hidden" hidden />

or

// React
ref.current.style.setProperty('display', 'block', 'important');

Is there a way to achieve this fade in/out transition using only TailwindCSS, without needing to manually override the display property?

Thanks in advance!

[wongjn]

For fade in, you can use @starting-style via the starting variant. For fade out, you can use transition-behavior: allow-discrete. However, this fade out does not work in Firefox due to allow-discrete not working for display: none.

https://codepen.io/Wongjn/pen/JodxJyR

[hiroya-uga]

Yes, I also considered @starting-style, but it seems impossible to fix it without breaking the original display logic (tsx).
Thank you!

[Santhosh-Kumar-2004]

To apply a fade-in/out effect when toggling the hidden attribute, you'll need to use CSS transitions combined with opacity and visibility instead of directly relying on the hidden attribute, since hidden instantly removes the element from rendering and doesn’t allow transitions.
Here's approach:
Use a class to control visibility and opacity:

.fade {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fade.hidden {
  opacity: 0;
  visibility: hidden;
}

This is one way you can maintain the fade-in/out transition while still hiding the element visually and semantically.

[hiroya-uga]

Thank you!

My toast ui based on the following premises:

• The HTML specification states that the hidden attribute is intended to hide content.
• All visual responsibilities should be handled by CSS.

With these in mind, I was styling the appearance and disappearance of content using the hidden attribute with CSS to control the fade-in and fade-out effects. Additionally, I used a MutationObserver to monitor the addition or removal of the hidden attribute, integrating it intuitively with React's lifecycle to naturally achieve fade-in and fade-out transitions.

I designed it so that the content is initialized at the end of the fade-out duration after the hidden attribute is removed. However, it might be simpler to just use a className-based approach instead.

[hiroya-uga]

Thank you everyone, I'll follow progressive enhancement to use transition-discrete