| /** @type {import('tailwindcss').Config} */ |
| const defaultTheme = require('tailwindcss/defaultTheme'); |
| |
| module.exports = { |
| content: ['./src/**/*.{js,jsx,ts,tsx}'], |
| corePlugins: { |
| preflight: false, |
| }, |
| theme: { |
| fontFamily: { |
| inter: ['"Inter"', ...defaultTheme.fontFamily.sans], |
| }, |
| screens: { |
| 'xl': '1280px', |
| 'sm': { 'max': '1024px' }, |
| 'mobile': { 'max': '550px' }, |
| }, |
| spacing: { |
| 1: '8px', |
| 2: '12px', |
| 3: '16px', |
| 4: '24px', |
| 5: '32px', |
| 6: '48px', |
| 7: '64px', |
| 8: '80px', |
| 9: '96px', |
| 10: '112px', |
| 11: '128px', |
| }, |
| extend: { |
| colors: { |
| primary: '#7497F7', |
| 'primary-light': '#99B3F9', |
| 'primary-100': '#F0F4FE', |
| 'primary-200': '#DBE4FD', |
| 'primary-300': '#BDCEFB', |
| 'primary-500': '#7497F7', |
| 'primary-800': '#3C5088', |
| neutral: { |
| invert: '#FFFFFF', |
| 300: '#94959F', |
| 400: '#70727F', |
| 500: '#4D4E5F', |
| 600: '#292B3F', |
| }, |
| secondary: { |
| 500: "#FF8B8B", |
| } |
| }, |
| fontSize: { |
| heading0: ['48px', { lineHeight: '64px' }], |
| heading1: ['32px', { lineHeight: '40px' }], |
| heading2: ['24px', { lineHeight: '30px' }], |
| heading3: ['20px', { lineHeight: '25px' }], |
| heading4: ['16px', { lineHeight: '20px' }], |
| label14: ['14px', { lineHeight: '20px' }], |
| label16: ['16px', { lineHeight: '24px' }], |
| label18: ['18px', { lineHeight: '24px' }], |
| label24: ['24px', { lineHeight: '32px' }], |
| body: ['14px', { lineHeight: 1.214 }], |
| "body-sm": ['12px', { lineHeight: 1.25 },], |
| "body-large": ['24px', { lineHeight: '32px' }], |
| }, |
| dropShadow: { |
| xl: ['0px 3.2px 16px rgba(153, 179, 249, 0.1)'], |
| }, |
| boxShadow: { |
| sm: '0px 2.4px 4.8px -0.8px rgba(0, 0, 0, 0.2), 0px 1.6px 8px rgba(0, 0, 0, 0.2)', |
| lg: '0px 4.8px 9.6px -0.8px rgba(0, 0, 0, 0.2), 0px 3.2px 16px rgba(0, 0, 0, 0.2)', |
| lower: '0px 1.2px 2.4px -0.8px rgba(0, 0, 0, 0.1), 0px 0.8px 4px rgba(0, 0, 0, 0.07)', |
| high: '0px 9.6px 19.2px -0.8px rgba(0, 0, 0, 0.1), 0px 6.4px 32px rgba(0, 0, 0, 0.07)', |
| card: '0px 20px 64px -0.8px rgba(0, 0, 0, 0.06)', |
| hide: '0px 0px 0px 0px rgba(0, 0, 0, 0)', |
| }, |
| }, |
| }, |
| plugins: [], |
| }; |
