[JIT] apply: duplicate transform properties

[trurl-master]

What version of Tailwind CSS are you using?

2.2.15 (also tested with 3.0.0-alpha.1 and 2.2.17)

Reproduction URL

https://play.tailwindcss.com/KkuBVniu30?file=css

Describe your issue

Using multiple transform-based properties (like translate-x and translate-y) results in duplicated transform property, eg

.absolute-center {
  @apply absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2;
}

Generates:

.absolute-center {
    position: absolute;
    top: 50%;
    left: 50%;
    --tw-translate-x: -50%;
    transform: var(--tw-transform);
    --tw-translate-y: -50%;
    transform: var(--tw-transform);
    transform: var(--tw-transform);
}

[RobinMalfait]

This should be fixed, and will be available in Tailwind v3.

If you are using JIT mode, then you can already try it by using the v3 alpha version using npm install tailwindcss@insiders or yarn add tailwindcss@insiders.

If you are using AOT mode, then I would recommend you to try and switch to JIT mode first. If you can't do that for technical reasons / bugs, please open an issue with a minimal reproduction repo so that we can help.