tailwind.config.js

const { fontFamily } = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1600px",
      "3xl": "1920px"
    },
    extend: {
      animation: {
        marquee: 'marquee 30s linear infinite',
        marquee2: 'marquee2 30s linear infinite',
      },
      keyframes: {
        marquee: {
          '0%': { transform: 'translateX(0%)' },
          '100%': { transform: 'translateX(-100%)' },
        },
        marquee2: {
          '0%': { transform: 'translateX(100%)' },
          '100%': { transform: 'translateX(0%)' },
        },
      },
      colors: {
        'black': '#191919',
        'white': '#BEBEBE'
      },
      fontFamily: {
        display: ['var(--font-PPEditorialOld)', ...fontFamily.serif],
        mono: ['var(--font-SuisseIntlMono)', ...fontFamily.mono],
        serif: ['var(--font-MigraExtralight)', ...fontFamily.serif]
      },
    },
  },
  plugins: []
}