website-new/frontend/tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class',
  theme: {
    fontFamily: {
      primary: ['"Abril Fatface"', 'serif'],
      secondary: ['"Poppins"', 'sans-serif'],
    },
    fontSize: {
      head: [
        '56px',
        {
          letterSpacing: '1px',
          lineHeight: '74px',
        },
      ],
      subhead: [
        '12px',
        {
          letterSpacing: '28px',
          lineHeight: 'normal',
        },
      ],
      'head-mobile': [
        '30px',
        {
          letterSpacing: '1px',
          lineHeight: 'normal',
        },
      ],
      title: [
        '30px',
        {
          letterSpacing: '1px',
          lineHeight: '40px',
        },
      ],
      'title-24': [
        '24px',
        {
          letterSpacing: '1px',
          lineHeight: 'normal',
        },
      ],
      p: [
        '16px',
        {
          letterSpacing: '0px',
          lineHeight: '28px',
        },
      ],
      'p-italic': [
        '16px',
        {
          letterSpacing: 'opx',
          lineHeight: '22px',
        },
      ],
      btn: [
        '16px',
        {
          letterSpacing: '0px',
          lineHeight: '16px',
        },
      ],
      'input-label': [
        '14px',
        {
          letterSpacing: '0px',
          lineHeight: 'normal',
        },
      ],
      'p-mobile': [
        '14px',
        {
          letterSpacing: '0px',
          lineHeight: 'normal',
        },
      ],
      'title-mobile': [
        '24px',
        {
          letterSpacing: '0px',
          lineHeight: '40px',
        },
      ],
      'italic-p-mobile': [
        '14px',
        {
          letterSpacing: '0px',
          lineHeight: 'normal',
        },
      ],
      'italic-title': [
        '30px',
        {
          letterSpacing: '1px',
          lineHeight: 'normal',
        },
      ],
      'italic-title-mobile': [
        '18px',
        {
          letterSpacing: '0px',
          lineHeight: '28px',
        },
      ],
      'input-label-mobile': [
        '12px',
        {
          letterSpacing: '0px',
          lineHeight: 'normal',
        },
      ],
      'display-numb': [
        '56px',
        {
          letterSpacing: '2px',
          lineHeight: 'normal',
        },
      ],
      'subtitle-48': [
        '48px',
        {
          letterSpacing: '0px',
          lineHeight: 'normal',
        },
      ],
      'banner-mobile': [
        '18.66px',
        {
          letterSpacing: '0px',
          lineHeight: '24px',
        },
      ],
      'banner-p': [
        '14px',
        {
          letterSpacing: '0px',
          lineHeight: '21px',
        },
      ],
      'banner-p-mobile': [
        '12px',
        {
          letterSpacing: '0px',
          lineHeight: '18px',
        },
      ],
    },
    minHeight: {
      12: '3rem',
    },
    maxWidth: {
      '780p': '780px',
      wrapper: '1150px',
      custom: '1150px',
      dropzone: '110px',
      banner: '1118px',
      banner_m: '309px',
    },
    transitionDuration: {
      DEFAULT: '300ms',
    },
    extend: {
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        white: '#ffffff',
        'baby-blue': '#f0f3f9',
        'dg-primary': {
          50: '#f4e9f4',
          75: '#fafafa',
          100: '#e9d4e9',
          200: '#debedd',
          300: '#d3a9d2',
          400: '#c893c7',
          500: '#bc7dbc',
          600: '#b168b1',
          700: '#a652a5',
          800: '#9b3d9a',
          900: '#90278f' /* Default  */,
          1000: '#822381',
          1100: '#731f72',
          1200: '#651b64',
          1300: '#561756',
          1400: '#481448',
          1500: '#3a1039',
          1600: '#2b0c2b',
          1700: '#1d081d',
          1800: '#0e040e',
        },
        'dg-secondary': '#8468bf',
        'dark-gray': '#353535',
        black: '#000000',
      },
      spacing: {
        '2p': '2px',
        '4p': '4px',
        '8p': '8px',
        '12p': '12px',
        '15p': '15px',
        '16p': '16px',
        '20p': '20px',
        '32p': '32px',
        '42p': '42px',
        '48p': '48px',
        '64p': '64px',
        '72p': '72px',
        '90p': '90px',
        '140p': '140px',
        '164p': '164px',
        '200p': '200px',
        '240p': '240px',
      },
      borderRadius: {
        8: '8px',
        16: '16px',
        32: '32px',
      },
      boxShadow: {
        custom: '0 0px 9px 9px rgba(0, 0, 0, 0.09)',
      },
    },
  },
  plugins: [
    // eslint-disable-next-line no-undef
    require('@tailwindcss/forms'),
  ],
};