tailwind.preset.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  prefix: 'com-',
  theme: {
    extend: {
      colors: {
        /* Adding custom colors to the tailwind config. by www.color-name.com */
        primary: {
          100: '#d6e0ff',
          200: '#adc2ff',
          300: '#85a3ff',
          400: '#5c85ff',
          500: '#3366ff',
          600: '#2952cc',
          700: '#1f3d99',
          800: '#142966',
          900: '#0a1433',
        },
        'Spiro-Disco': '#1ac7e340',
        'Brilliant-Azure': '#2aa5ff',
        'Caribbean-Green': '#00d68f',
        gunmetal: '#2f2e41',
        'Silver-Sand': '#c4c4c4',
        'Azureish-White': '#dae0ff',
        'Very-Light-Blue': '#536eff',
        'Sonic-Silver': '#777777',
        'Blue-Jeans': ' #29a5ff',
        'Raisin-Black': '#231f20',
        'Spanish-Gray': '#979797',
        'Ultramarine-Blue': '#3366FF',
        Azure: '#0095ff',
        Blueberry: '#4e74ff',
        'Dark-Spring-Green': '#10654c',
        'Blue-Violet': '#6F22DF',
        Blond: '#FFF1BB',
        'Black-Coral': '#595867',
        AuroMetalSaurus: '#667085',
        Charcoal: '#344054',
        'Auro-Metal-Saurus': '#667085',
        'Dark-Jungle-Green': '#101828',
        'Light-Silver': '#D0D5DD',
        'Bright-Gray': '#EAECF0',
        'Crayola-Green': '#1B9F68',
        Charcoal: '#344054',
        'Vampire-Black': '#0A0A0A',
        'Anti-Flash-White': '#f2f2f2',
        'Yankees-Blue': '#222B45',
        'Alice-Blue': '#EDF5FF',
        'New-Car': '#1D4ED8',
        'Bright-Gray': '#E4E9F2',
        'Brandeis-Blue': '#0074ED',
        'Chrome-Yellow': '#FFAA00',
        'Infra-Red': '#FF3D71',
        AuroMetalSaurus: '#667085',
        Lavender: '#E6F1FF',
        Quartz: '#4B4B5C',
      },

      lineClamp: {
        14: '14',
      },
      gridTemplateColumns: {
        24: 'repeat(24, minmax(0, 1fr))',
      },
      gridColumn: {
        'span-18': 'span 18 / span 18',
        'span-19': 'span 19 / span 19',
        'span-20': 'span 20 / span 20',
        'span-22': 'span 22 / span 22',
      },
      fontSize: {
        /* This is a custom font size. */
        'Public-Page-CTA-Heading': '60px',
        'Page-Heading': '36px',
        'Page-Section-Header': '24px',
        'Page-Subheading': '20px',
        'Card-Subheading': '18px',
        'Paragraph-1': '16px',
        'Paragraph-2': '14px', //Button text, Input
        Caption: '12px',
        '10px': '10px',
        '8px': '8px',
      },
      spacing: {
        /* Adding custom spacing to the tailwind config. */
        '2px': '2px',
        '5px': '5px',
        '6px': '6px',
        '7px': '7px',
        '9px': '9px',
        '10px': '10px',
        '14px': '14px',
        '17px': '17px',
        '20px': '20px',
        '30px': '30px',
        '39px': '39px',
        '56px': '56px',
        '68px': '68px',
        '72px': '72px',
        '76px': '76px',
        '78px': '78px',
        '86px': '86px',
        '120px': '120px',
        '140px': '140px',
        '152px': '152px',
        '156px': '156px',
        '169px': '169px',
        '212px': '212px',
        '220px': '220px',
        '260px': '260px',
        '264px': '264px',
        '296px': '296px',
        '300px': '300px',
        '307px': '307px',
        '318px': '318px',
        '336px': '336px',
        '340px': '340px',
        '500px': '500px',
        '630px': '630px',
        '800px': '800px',
        '95vh': '95vh',
        '70vw': '70vw',
        '80vw': '80vw',
        '95vw': '95vw',
        '100vw': '100vw',
      },
      borderWidth: {
        /* Setting the default border width to 1px and 3px. */
        DEFAULT: '1px',
        3: '3px',
      },
      lineHeight: {
        /* Adding custom line height to the tailwind config. */
        '14px': '14px',
        '21px': '21px',
        '30px': '30px',
      },
      boxShadow: {
        /* Adding a box shadow to the element. */
        Card: '0 5px 15px #dae0ff',
        'Chat-box': '0 7px 29px 0 #64646f33 ',
      },
    },
    container: {
      center: true,
    },
  },
  plugins: [
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/aspect-ratio'),
    require('tailwind-scrollbar-hide'),
  ],
  corePlugins: {
    preflight: false,
  },
};