tailwind.config.js

/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindcss/tailwindcss/blob/master/stubs/defaultConfig.stub.js
*/
module.exports = {
  theme: {
    extend: {
      height: {
        14: '3.5rem',
        18: '4.5rem',
        22: '5.5rem'
      },
      padding: {
        14: '3.5rem',
        18: '4.5rem',
        22: '5.5rem'
      },
      animation: {
        appear: 'appear 0.5s'
      },
      keyframes: {
        appear: {
          '0%': { opacity: 0 }
        }
      }
    }
  },
  variants: {},
  plugins: [
    require('@tailwindcss/typography'),
    require('tailwindcss-animatecss')({
      classes: ['animate__animated', 'animate__fadeInUp', 'animate__fadeIn'],
      settings: {
        animatedSpeed: 800
      },
      variants: ['responsive', 'hover', 'reduced-motion']
    })
  ],
  purge: {
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'content/**/*.md',
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js'
    ]
  },
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true
  }
}