/** @type {import('tailwindcss').Config} */
import plugin from 'tailwindcss/plugin'

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {}
  },
  plugins: [
    plugin(function ({ addUtilities, matchUtilities, theme }) {
      addUtilities({
        '.transform-3d': {
          'transform-style': 'preserve-3d'
        },
        '.backface-hidden': {
          'backface-visibility': 'hidden'
        },
        '.backface-visible': {
          'backface-visibility': 'visible'
        }
      })

      matchUtilities(
        {
          perspective: value => ({
            perspective: value
          })
        },
        { values: theme('spacing') }
      )

      matchUtilities(
        {
          'rotate-x': value => ({
            transform: `rotateX(${value})`
          }),
          'rotate-y': value => ({
            transform: `rotateY(${value})`
          })
        },
        { values: theme('rotate') }
      )

      matchUtilities(
        {
          'translate-z': value => ({
            transform: `translateZ(${value})`
          })
        },
        { values: theme('spacing') }
      )
    })
  ]
}