如何为Tailwind CSS添加translate-z-[]工具类实现视差滚动？

当然可以实现，以下是具体的自定义方案，能让你快速添加translate-z-[]工具类，结合perspective实现视差滚动效果：

1. 自定义Tailwind工具类配置 #

在你的tailwind.config.js文件中，通过plugins选项添加自定义工具类，同时支持预设值和任意值：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [
    ({ addUtilities, theme }) => {
      // 生成基于spacing主题的预设translate-z工具类（如translate-z-10、translate-z-20）
      const presetTranslateZ = Object.fromEntries(
        Object.entries(theme('spacing')).map(([key, value]) => [
          `.translate-z-${key}`,
          {
            '--tw-translate-z': value,
            transform: 'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
          },
        ])
      );

      // 生成支持任意值的translate-z工具类（如translate-z-[30px]、translate-z-[5rem]）
      const arbitraryTranslateZ = {
        '.translate-z-\\[\\]': {
          '--tw-translate-z': 'var(--tw-translate-z)',
          transform: 'translate3d(var(--tw-translate-x), var(--tw-translate-y), var(--tw-translate-z)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))',
        },
      };

      // 可选：添加perspective工具类（Tailwind默认无此工具类）
      const presetPerspective = Object.fromEntries(
        Object.entries(theme('spacing')).map(([key, value]) => [
          `.perspective-${key}`,
          { perspective: value },
        ])
      );

      const arbitraryPerspective = {
        '.perspective-\\[\\]': {
          perspective: 'var(--tw-perspective)',
        },
      };

      // 注册所有自定义工具类，支持响应式、hover等状态
      addUtilities(
        { ...presetTranslateZ, ...arbitraryTranslateZ, ...presetPerspective, ...arbitraryPerspective },
        ['responsive', 'hover', 'focus']
      );
    },
  ],
};

2. 使用方式 #

配置完成后，你就可以像使用其他Tailwind工具类一样使用这些自定义类：

<!-- 父元素设置透视效果 -->
<div class="perspective-1000 h-screen overflow-y-auto">
  <!-- 预设值的translate-z元素 -->
  <div class="translate-z-20 hover:translate-z-40 transition-transform">
    悬停时Z轴平移变化的元素
  </div>
  <!-- 任意值的translate-z元素 -->
  <div class="translate-z-[35px]">
    自定义Z轴平移距离的元素
  </div>
</div>

关键说明 #

• 必须在父元素上设置perspective类（或原生CSS的perspective属性），否则translateZ不会产生3D视差效果。
• 自定义的transform属性保留了Tailwind默认的所有变换属性（旋转、缩放、斜切等），不会影响原有功能。
• 工具类支持响应式（如md:translate-z-30）和状态类（如hover:translate-z-50），和原生Tailwind类的用法一致。

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