Is there a way to add translate-z-[ ] utility class

user_14300111 0
Viewed 283

I would like to add translate-z-[] utility class to my tailwindcss classes so I could use parallax scrolling effects with perspective and translateZ, is there a way to generate these classes (add something like --tw-translate-z variable at the end on tailwinds transform class)?

tailwind-css
1 Answers

Yes, you can create plugins for custom utilities

You config should have something like this

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

user_143050760
Related