/** @type {import('tailwindcss').Config} */ module.exports = { content: [ './app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { typography: require('./typography'), extend: { colors: { gray: { 25: '#FCFCFD', 50: '#F9FAFB', 100: '#F3F4F6', 200: '#E5E7EB', 300: '#D1D5DB', 400: '#9CA3AF', 500: '#6B7280', 700: '#374151', 800: '#1F2A37', 900: '#111928', }, primary: { 25: '#F5F8FF', 50: '#EBF5FF', 100: '#E1EFFE', 200: '#C3DDFD', 300: '#A4CAFE', 400: '#528BFF', 600: '#1C64F2', 700: '#1A56DB', }, blue: { 500: '#E1EFFE', }, green: { 50: '#F3FAF7', 100: '#DEF7EC', 800: '#03543F', }, yellow: { 100: '#FDF6B2', 800: '#723B13', }, purple: { 50: '#F6F5FF', 200: '#DCD7FE', }, indigo: { 25: '#F5F8FF', 100: '#E0EAFF', 600: '#444CE7', }, }, screens: { mobile: '100px', // => @media (min-width: 100px) { ... } tablet: '640px', // 391 // => @media (min-width: 600px) { ... } pc: '769px', // => @media (min-width: 769px) { ... } }, boxShadow: { 'xs': '0px 1px 2px 0px rgba(16, 24, 40, 0.05)', 'sm': '0px 1px 2px 0px rgba(16, 24, 40, 0.06), 0px 1px 3px 0px rgba(16, 24, 40, 0.10)', 'md': '0px 2px 4px -2px rgba(16, 24, 40, 0.06), 0px 4px 8px -2px rgba(16, 24, 40, 0.10)', 'lg': '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)', 'xl': '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)', '2xl': '0px 24px 48px -12px rgba(16, 24, 40, 0.18)', '3xl': '0px 32px 64px -12px rgba(16, 24, 40, 0.14)', }, }, }, plugins: [ require('@tailwindcss/typography'), ], }