Unexpected duplicate "transition-timing-function"

[sharathdaniel]

What version of Tailwind CSS are you using?

v4.0.12

What build tool (or framework if it abstracts the build tool) are you using?

tailwind-cli with plain html and css

What version of Node.js are you using?

v20.0.0

What browser are you using?

Chrome

What operating system are you using?

Windows

Describe your issue

I have a class for a button with some tailwind classes applied.

@layer components {
  .app-c-btn {
    @apply rounded px-4 py-2 font-bold text-white transition-colors duration-200 ease-in not-disabled:cursor-pointer disabled:cursor-not-allowed;
  }

In the output its generating the transition timing 2 times.

[RobinMalfait]

Hey!

This is because one of them is coming from transition-colors and the other is coming from ease-in. While it's true that this does not produce the most optimal output, it is still 100% valid.

We rely on Lightning CSS for optimizing the output and right now they don't handle this case.

Going to convert this to an idea discussion because while unexpected, it's not a bug either.