tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')
const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  purge: {
    enabled: process.env.NODE_ENV === 'production',
    // classes that are generated dynamically, e.g. `rounded-${size}` and must
    // be kept
    safeList: [],
    content: [
      './index.html',
      './src/**/*.{vue,js,ts}',
      // etc.
    ],
  },
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      colors: {
        gray: {
          850: 'hsl(221, 41%, 16%)',
          900: '#111827',
        }
      },
      transitionProperty: {
        'popup': 'transform, opacity',
      },
      animation: {
        'gradient-y': 'gradient-y 5s ease infinite',
        'shake': 'shake 0.5s ease infinite',
        'arrow': 'arrow 1s infinite',
      },
      keyframes: {
        'gradient-y': {
          '0%': {
            'background-position': '0% 50%',
          },
          '50%': {
            'background-position': '100% 50%',
          },
          '100%': {
            'background-position': '0% 50%',
          },
        },
        'shake': {
          '0%': { transform: 'translate(1px, 1px) rotate(0deg)' },
          '10%': { transform: 'translate(-1px, -2px) rotate(-1deg)' },
          '20%': { transform: 'translate(-3px, 0px) rotate(1deg)' },
          '30%': { transform: 'translate(3px, 2px) rotate(0deg)' },
          '40%': { transform: 'translate(1px, -1px) rotate(1deg)' },
          '50%': { transform: 'translate(-1px, 2px) rotate(-1deg)' },
          '60%': { transform: 'translate(-3px, 1px) rotate(0deg)' },
          '70%': { transform: 'translate(3px, 1px) rotate(-1deg)' },
          '80%': { transform: 'translate(-1px, -1px) rotate(1deg)' },
          '90%': { transform: 'translate(1px, 2px) rotate(0deg)' },
          '100%': { transform: 'translate(1px, -2px) rotate(-1deg)' }
        },
        'arrow': {
          '0%,100%': { transform: 'translateX(0);', 'animation-timing-function': 'cubic-bezier(0.8, 0, 1, 1);' },
          '50%': { transform: 'translateX(25%);', 'animation-timing-function': 'cubic-bezier(0, 0, 0.2, 1);' },
        }
      },
      backgroundSize: {
        '400%': '400%',
      },
    },
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slate: colors.slate,
      white: colors.white,
      gray: colors.gray,
      sky: colors.sky,
    },
  },
}