What version of Tailwind CSS are you using?
v4.1.11
What build tool (or framework if it abstracts the build tool) are you using?
Vite 7.0.6
What browser are you using?
Chrome 139
What operating system are you using?
Windows
Reproduction URL
Reproduction snippet:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="flex flex-col items-center justify-center">
<button class="p-3 ring-1 mt-3 transition duration-300" onclick="handleClick(this)">Click me</button>
<script>
function handleClick(element) {
element.classList.add('opacity-0');
setTimeout(() => {
element.classList.replace('opacity-0', 'invisible');
}, 300);
}
</script>
</body>
</html>Describe your issue
After PR #17812 the visibility property was added as one of default values for transition-property.
@philipp-spiess said "this change does nothing", but actually without transition-behavior: allow-discrete; animation on visibility
doesn't appear however transition-duration still applies.
The Reproduction snippet shows simple example of the issue. After clicking a button, opacity-0 class applies to it and after setTimeout with transition-duration delay this class changed to invsible.
You can observe a sudden flash before invisible takes effect (opacity-0 removed, animation reverts and only after 300ms visibility becomes hidden).
The problem comes from Filament issue #17090
What version of Tailwind CSS are you using?
v4.1.11
What build tool (or framework if it abstracts the build tool) are you using?
Vite 7.0.6
What browser are you using?
Chrome 139
What operating system are you using?
Windows
Reproduction URL
Reproduction snippet:
Describe your issue
After PR #17812 the
visibilityproperty was added as one of default values fortransition-property.@philipp-spiess said "this change does nothing", but actually without
transition-behavior: allow-discrete;animation onvisibilitydoesn't appear however
transition-durationstill applies.The Reproduction snippet shows simple example of the issue. After clicking a button,
opacity-0class applies to it and aftersetTimeoutwithtransition-durationdelay this class changed toinvsible.You can observe a sudden flash before
invisibletakes effect (opacity-0removed, animation reverts and only after 300msvisibilitybecomeshidden).The problem comes from Filament issue #17090