import type { Config } from "tailwindcss";
const config: Config = {
content: [
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
colors: {
white: '#fff',
transparent:'transparent',
primary: {
main: '#FBBF24',
hover: '#F59E0B',
light: '#FDE68A',
pale: '#FFFBEB'
},
secondary: {
main: '#8B5CF6',
hover: '#6D28D9',
light: '#C4B5FD',
pale:'#EDE9FE'
},
success:{
main: '#25984E',
hover: '#166534',
light: '#DCFCE7',
pale: '#F0FDF4'
},
error: {
main: '#FCA5A5',
hover: '#DC2626',
light: '#FEE2E2',
pale: '#FEF2F2'
},
overlay: '#1E1E1E52',
text: {
hover: '#1E293B',
dark: '#334155',
main: '#475569',
light: '#64748B',
pale: '#94A3B8'
},
border: {
dark: '#CBD5E1',
light: '#F3F4F6',
input: '#E2E8F0',
focused: '#C7D2FE',
disabled: '#FEE2E2'
},
bg: {
dark: '#F8FAFC',
light: '#FEFEFE'
},
},
boxShadow:{
'softSmall': '0px 8px 16px 0px #1111111F',
'softMedium': '0px 20px 24px 0px #1111111F',
'softLarge': '0px 32px 64px 0px #1111111F',
'strokeSmall': '0px 0px 1px 0px #091E424F, 0px 3px 8px 0px #091E4229',
'strokeMedium': '0px 0px 1px 0px #091E424F, 0px 9px 12px 0px #091E4226',
'strokeLarge': '0px 0px 1px 0px #091E424F, 0px 14px 18px 0px #091E4226',
'indigoSmall': '0px 8px 16px 0px #FFF6D3CC',
'indigoMedium': '0px 20px 24px 0px #FBBF2433',
'indigoLarge': '0px 32px 64px 0px #FBBF2433'
},
screens: {
xl: { max: "1279px" },
// => @media (max-width: 1279px) { ... }
lg: { max: "1023px" },
// => @media (max-width: 1023px) { ... }
md: { max: "767px" },
// => @media (max-width: 767px) { ... }
sm: { max: "639px" },
// => @media (max-width: 639px) { ... }
},
extend: {
backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
flex: {
'2': '2 2 0%'
}
},
},
plugins: [],
};
export default config;
