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'
      }],

      //
      'n-head' : ['54.00px', {
        letterSpacing: '-0.6%',
        lineHeight: '125%',
      }],
      'n-subhead' : ['16px', {
        letterSpacing: '1.5px',
        lineHeight: '24px',
      }],
      'n-head-mobile' : ['24px', {
        letterSpacing: '-0.6%',
        lineHeight: '32px',
      }],
      'n-subhead-mobile' : ['10.5px', {
        letterSpacing: '1.5px',
        lineHeight: '28px',
      }],
      'n-paragraph' : ['16px', {
        letterSpacing: '0%',
        lineHeight: '28px',
      }],
      'n-paragraph-mobile' : ['14px', {
        letterSpacing: '0%',
        lineHeight: '24px',
      }],
      'n-h3-heading' : ['24px', {
        letterSpacing: '-0.6%',
        lineHeight: '32px',
      }],
      'n-h3-heading-mobile' : ['18.66px', {
        letterSpacing: '0%',
        lineHeight: '24px',
      }],
      'n-paragraph-title-mobile' : ['14px', {
        letterSpacing: '0%',
        lineHeight: '24px',
      }],
      'n-paragraph-title' : ['18px', {
        letterSpacing: '0%',
        lineHeight: 'normal',
      }],


    },
    minHeight: {
      '12': '3rem',
    },
    maxWidth: {
      '780p':'780px',
      'wrapper': '1150px',
      'custom': '1150px',
      'dropzone': '110px',
    },
    transitionDuration: {
      DEFAULT: '300ms',
    },
    extend: {
      colors: {
        transparent: 'transparent',
        current: 'currentColor',
        white: '#ffffff',
        'baby-blue': '#f0f3f9',
        'dg-primary': {
          50: '#f4e9f4',
          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',
        '16p': '16px',
        '20p':'20px',
        '32p':'32px',
        '48p':'48px',
        '64p':'64px',
        '72p':'72px',
        '90p':'90px',
        '140p':'140px',
        '164p': '164px',
        '200p': '200px',
        '240p':'240px'


      },
      borderRadius: {
        '8': '8px',
        '16': '16px',
        '32' : '32px'
      }
    },
  },
  plugins: [
    // eslint-disable-next-line no-undef
    require('@tailwindcss/forms'),
  ],
};