Default transition-property with visibility breaks animations #18793
Description
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