Tailwind CSS多个transform函数应用的执行顺序异常问题

CSS类的优先级和生效规则只和样式表中的声明顺序有关，和HTML class 属性里类名的书写顺序无关。Tailwind内置的transform相关工具类，默认在样式表中的声明顺序为translate → scale → skew → rotate，因此无论class属性中rotate类写在什么位置，实际生效时都会最后执行rotate变换，和原生CSS手动按顺序写transform函数的表现不同。

• 方案1：使用任意值语法一次性定义完整变换规则
  直接在class中通过方括号语法写指定顺序的transform规则，不需要修改配置：

  <div class="[transform:rotate(45deg)_translateX(50%)]"></div>
  

• 方案2：自定义全局工具类
  在tailwind.config.js中注册自定义的transform工具类，固定变换顺序，适合多次复用的场景：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    theme: {
      extend: {
        utilities: {
          '.rotate-45-translate-x-1/2': {
            transform: 'rotate(45deg) translateX(50%)'
          }
        }
      }
    }
  }
  

  配置生效后直接在HTML中使用即可：

  <div class="rotate-45-translate-x-1/2"></div>
  

• 方案3：覆盖内置transform类的声明顺序
  如果你需要全局调整所有transform类的执行顺序，可以按照预期的执行顺序重新注册translate、rotate等工具类，替换Tailwind默认的声明顺序即可。

内容的提问来源于stack exchange，提问作者TheMilion