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

export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {
      keyframes: {
        'start-filming-breath': {
          '0%, 100%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.08)' },
        },
      },
      animation: {
        'start-filming-breath':
          'start-filming-breath 1.6s ease-in-out infinite',
      },
    },
  },
  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') },
      )
    }),
  ],
}