如何将包含transform属性的CSS样式转换为Tailwind CSS写法？

你提到的属性全部可以通过Tailwind CSS实现，有两种常用实现方式：

方式1：直接在HTML元素上使用内置工具类 #

给toast元素添加如下类即可覆盖全部原生CSS属性：
fixed z-[99] top-[10%] left-1/2 -translate-x-1/2 -translate-y-1/2
各属性对应关系：

• fixed 对应 position: fixed
• z-[99] 对应 z-index: 99，如果项目有预设z-index规则可直接替换为对应的预设类
• top-[10%] 对应 top: 10%，使用Tailwind任意值写法实现自定义百分比
• left-1/2 对应 left: 50%，Tailwind内置了1/2的百分比预设
• -translate-x-1/2 对应 transform: translateX(-50%)
• -translate-y-1/2 对应 transform: translateY(-50%)，两个属性组合实现 translate(-50%, -50%) 效果

方式2：封装为自定义CSS类（@apply写法） #

如果需要复用该类，可直接在CSS文件中用@apply整合所有规则：

.toast-top-center {
  @apply fixed z-[99] top-[10%] left-1/2 -translate-x-1/2 -translate-y-1/2;
}

如果使用的是不支持任意值写法的旧版Tailwind，可在tailwind.config.js中扩展配置后使用：

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      zIndex: {
        '99': '99',
      },
      top: {
        '10%': '10%',
      }
    },
  }
}

扩展完成后即可直接用z-99、top-10%类，无需方括号包裹。

注意：你当前写的z-40对应原生z-index: 40，如果需要99的层级请勿直接使用。

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