tailwind.config.js

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    spacing: {
      0: '0',
      1: '4px',
      2: '8px',
      3: '12px',
      4: '16px',
      5: '20px',
      6: '24px',
      7: '28px',
      8: '32px',
      10: '40px',
      11: '44px',
      12: '48px',
      14: '56px',
      16: '64px',
      20: '80px',
      60: '240px',
      72: '288px',
      135: '135px',
      410: '410px',
    },
    screens: {
      '2xs': '320px',
      xs: '480px',
      sm: '640px',
      md: '780px',
      l: '1024px',
      xl: '1280px',
      '2xl': '1440px',
    },
    extend: {
      width: {
        '1/3': '33.3%',
        'board-xs': 'calc((100% - 16px * (1 - 1)) / 1)',
        'board-s': 'calc((100% - 16px * (2 - 1)) / 2)',
        'board-m': 'calc((100% - 16px * (3 - 1)) / 3)',
        'board-l': 'calc((100% - 16px * (4 - 1)) / 4)',
        'board-xl': 'calc((100% - 16px * (5 - 1)) / 5)',
      },
      minWidth: {
        '2xs': '320px',
        xs: '480px',
        sm: '640px',
        md: '780px',
        l: '1024px',
        xl: '1280px',
        '2xl': '1440px',
      },
      maxWidth: {
        input: '410px',
        welcome: '1280px',
        'out-team': '1024px',
        'board-xs': 'calc((100% - 16px * (1 - 1)) / 1)',
        'board-s': 'calc((100% - 16px * (2 - 1)) / 2)',
        'board-m': 'calc((100% - 16px * (3 - 1)) / 3)',
        'board-l': 'calc((100% - 16px * (4 - 1)) / 4)',
        'board-xl': 'calc((100% - 16px * (5 - 1)) / 5)',
      },
      height: {
        columns: 'calc(100vh - 110px)',
        l: 'calc(100vh - 212px)',
        m: 'calc(100vh - 278px)',
      },
      maxHeight: {
        modal: '70%',
        'modal-content': '300px',
      },
      gridTemplateRows: {
        columns: 'max-content',
      },
      colors: {
        black: '#14142B',
        gray: '#AFB0B9',
        primaryBlue: '#096CFE',
        primaryGreen: '#1AD993',
        primaryPurple: '#503AE7',
        primaryViolet: '#832BC1',
        purple: '#AA9BFF',
        'off-white': '#F4F2FF',
        'light-green': '#ABFFE0',
        red: '#FF3D3D',
      },
      fontFamily: {
        body: ['Inter', 'sans-serif'],
        heading: ['Nunito', 'Arial'],
      },
      fontSize: {
        xs: '1rem',
        s: '1.125rem',
        m: '1.25rem',
        l: '1.5rem',
        xl: '2.5rem',
        '2xl': [
          '3rem',
          {
            lineHeight: '3.5rem',
          },
        ],
        '3xl': [
          '4rem',
          {
            lineHeight: '5rem',
          },
        ],
        logo: [
          '2.75rem',
          {
            lineHeight: '2.75rem',
          },
        ],
      },
      boxShadow: {
        footer: '0 -1px 3px 0 rgb(0 0 0 / 0.1), 0 -1px 2px -1px rgb(0 0 0 / 0.1)',
      },
      borderRadius: {
        DEFAULT: '24px',
      },
    },
  },
  plugins: [],
};