tailwind-css - 有没有办法添加 translate-z-[ ] 实用程序类

Question

我想将 translate-z-[] 实用程序类添加到我的 tailwindcss 类中，这样我就可以将视差滚动效果与透视和 translateZ 一起使用，有没有办法生成这些类(添加类似 --tw-translate- tailwinds 变换类末尾的 z 变量)？

Answer 1

是的，你可以创建plugins用于自定义实用程序

你的配置应该是这样的

const plugin = require('tailwindcss/plugin');

module.exports = {
  theme: {},
  plugins: [
    plugin(function({ matchUtilities, theme }) {
      matchUtilities(
        {
          'translate-z': (value) => ({
            '--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))`,
          }), // this is actual CSS
        },
        { values: theme('translate'), supportsNegativeValues: true }
      )
    })
  ],
}

DEMO