tailwind.config.js

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    spacing: {
      px: '1px',
      0: '0px',
      0.5: '2px',
      1: '4px',
      1.5: '6px',
      2: '8px',
      2.5: '10px',
      3: '12px',
      3.5: '14px',
      4: '16px',
      5: '20px',
      6: '24px',
      7: '28px',
      8: '32px',
      9: '36px',
      10: '40px',
      11: '44px',
      12: '48px',
      14: '56px',
      16: '64px',
      18: '72px',
      20: '80px',
      24: '96px',
      28: '114px',
      32: '128px',
      36: '144px',
      40: '160px',
      44: '176px',
      48: '192px',
      52: '208px',
      56: '224px',
      60: '240px',
      64: '256px',
      72: '288px',
      80: '320px',
      96: '384px',
    },
    borderRadius: {
      none: '0px',
      sm: '2px',
      DEFAULT: '4px',
      md: '6px',
      lg: '8px',
      xl: '12px',
      '2xl': '16px',
      '3xl': '24px',
      full: '9999px',
    },
    borderWidth: {
      DEFAULT: '1px',
      0: '0',
      2: '2px',
      3: '3px',
      4: '4px',
      6: '6px',
      8: '8px',
    },
    fontSize: {
      xxs: ['10px', { lineHeight: '1.2' }],
      xs: ['13px', { lineHeight: '1.33' }],
      sm: ['14px', { lineHeight: '1.43' }],
      base: ['16px', { lineHeight: '1.5' }],
      md: ['16px', { lineHeight: '1.5' }],
      lg: ['18px', { lineHeight: '1.55' }],
      xl: ['20px', { lineHeight: '1.4' }],
      '2xl': ['24px', { lineHeight: '1.33' }],
      '3xl': ['30px', { lineHeight: '1.2' }],
      '4xl': ['36px', { lineHeight: '1.1' }],
      '5xl': ['48px', { lineHeight: '1' }],
      '6xl': ['60px', { lineHeight: '1' }],
      '7xl': ['72px', { lineHeight: '1' }],
      '8xl': ['96px', { lineHeight: '1' }],
      '9xl': ['128px', { lineHeight: '1' }],
    },
    opacity: {
      0: '0',
      5: '.05',
      7: '.07',
      10: '.1',
      15: '.15',
      20: '.2',
      25: '.25',
      30: '.3',
      40: '.4',
      50: '.5',
      60: '.6',
      70: '.7',
      75: '.75',
      80: '.8',
      90: '.9',
      100: '1',
    },
    extend: {
      keyframes: {
        slideIn: {
          '0%': { transform: 'translate3d(0,-100%,0)' },
          '100%': { transform: 'translate3d(0,0,0)' },
        },
        popIn: {
          '0%': {
            opacity: 0,
            transform: 'scale(0.75)'
          },
          '100%': {
            opacity: 1,
            transform: 'scale(1)'
          }
        }
      },
      animation: {
        'slide-in': 'slideIn 200ms ease-out 1',
        'pop-in': 'popIn 0.5s ease-out forwards'
      },
      boxShadow: {
        xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
        sm: '0 1px 3px 0 rgba(20, 70, 150, 0.05)',
        DEFAULT:
          '0 1px 3px 0 rgb(20 70 150 / 0.07), 0 2px 6px -1px rgb(20 70 150 / 0.07)',
        lg: '0 10px 15px -3px rgb(20 70 150 / 0.1), 0 4px 6px -4px rgb(20 70 150 / 0.1)',
        panel:
          '6px 4px 16px rgba(0,132,255, 0.07), 10px 8px 32px rgba(0,132,255, 0.07), 18px 16px 64px rgba(0,132,255, 0.1)',
        outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
      },
      dropShadow: {
        sm: '0 1px 1px rgb(20 70 150 / 0.05)',
      },
      colors: {
        seafoam: {
          50: '#EEFCF7',
          100: '#D7F9EE',
          150: '#C1F5EB',
          200: '#A2F1E4',
        },
        blue: {
          50: '#DCEEFF',
          100: '#B4DBFF',
          200: '#85C5FE',
          300: '#4EABFE',
          400: '#2296fe',
          500: '#0084FF',
          600: '#0574e4',
          700: '#0D5DBD',
          800: '#144696',
          900: '#1D2C6C',
          1000: '#241748',
        },
        gray: {
          50: '#F6F5FF',
          100: '#ECEAFF',
          150: '#E5E2FF',
          200: '#DFDBFC',
          250: '#C7C3E4',
          300: '#AFABCC',
          400: '#8F8BAC',
          500: '#6F6B8C',
          600: '#545071',
          700: '#332F50',
          800: '#2B2542',
          900: '#221A37',
          1000: '#180F2E',
        },
        orange: {
          100: '#F0C5AD',
          200: '#EDA482',
          300: '#EB8860',
          400: '#EA6D43',
          500: '#EC4815',
          600: '#D94217',
          700: '#C23414',
          800: '#A91D04',
          900: '#861103',
        },
        success: 'green',
        warning: 'orange',
        error: '#D22F2F',
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        tuner: ['tuner-medium', ...defaultTheme.fontFamily.sans],
        'tuner-regular': ['tuner-regular', ...defaultTheme.fontFamily.sans],
      },
      gridTemplateColumns: {
        'auto-sm': 'repeat(auto-fit, minmax(300px, 1fr))',
        'auto-lg': 'repeat(auto-fit, minmax(400px, 1fr))',
      },
      zIndex: {
        '-1': '-1',
      },
    },
  },
  future: {
    removeDeprecatedGapUtilities: true,
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
  ],
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
}