generate css order case translate not work

[zhimng]

What version of Tailwind CSS are you using?

2.2.17

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

postcss: 8.3.6
webpack: 5.49.0
webpack-cli: 4.7.2
npm: 6.14.14

What version of Node.js are you using?

14.17.4

What browser are you using?

Chrome: 94.0.4606.81 (arm64)

What operating system are you using?

macOS

Reproduction URL

https://github.com/minspy/tailwindcss-issue

Describe your issue

If swap the positions of translate and transform, the transform style will not working in browser, because in tailwind.css(use npm run tailwind:dev) the transform is after the translate

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This only seems to happen if you are using AOT mode. I fixed it in 2.2.19, but I would recommend you to try and use JIT mode instead. Tailwind v3 will only have JIT mode, and no AOT mode.

More info on JIT mode: https://tailwindcss.com/docs/just-in-time-mode

[zhimng]

Hey! Thank you for your bug report! Much appreciated! 🙏

This only seems to happen if you are using AOT mode. I fixed it in 2.2.19, but I would recommend you to try and use JIT mode instead. Tailwind v3 will only have JIT mode, and no AOT mode.

More info on JIT mode: https://tailwindcss.com/docs/just-in-time-mode

Thank you very much, I will gradually replace it with JIT mode in subsequent iterations of the project, but for now AOT will continue to be used for a while.