/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#641ae6',
light: '#641ae6',
'dark-light': 'rgba(67,97,238,.15)'
},
secondary: {
DEFAULT: '#805dca',
light: '#ebe4f7',
'dark-light': 'rgb(128 93 202 / 15%)'
},
success: {
DEFAULT: '#00ab55',
light: '#ddf5f0',
'dark-light': 'rgba(0,171,85,.15)'
},
danger: {
DEFAULT: '#e7515a',
light: '#fff5f5',
'dark-light': 'rgba(231,81,90,.15)'
},
warning: {
DEFAULT: '#e2a03f',
light: '#fff9ed',
'dark-light': 'rgba(226,160,63,.15)'
},
info: {
DEFAULT: '#2196f3',
light: '#e7f7ff',
'dark-light': 'rgba(33,150,243,.15)'
},
dark: {
DEFAULT: '#3b3f5c',
light: '#eaeaec',
'dark-light': 'rgba(59,63,92,.15)'
},
black: {
DEFAULT: '#0e1726',
light: '#e3e4eb',
'dark-light': 'rgba(14,23,38,.15)'
},
white: {
DEFAULT: '#ffffff',
light: '#e0e6ed',
dark: '#888ea8'
}
},
fontFamily: {
nunito: ['var(--font-nunito)', 'sans-serif']
},
spacing: {
4.5: '18px'
},
boxShadow: {
'3xl': '0 2px 2px rgb(224 230 237 / 46%), 1px 6px 7px rgb(224 230 237 / 46%)'
},
typography: ({ theme }) => ({
DEFAULT: {
css: {
'--tw-prose-invert-headings': theme('colors.white.dark'),
'--tw-prose-invert-links': theme('colors.white.dark'),
h1: {
fontSize: '40px',
marginBottom: '0.5rem',
marginTop: 0
},
h2: {
fontSize: '32px',
marginBottom: '0.5rem',
marginTop: 0
},
h3: {
fontSize: '28px',
marginBottom: '0.5rem',
marginTop: 0
},
h4: {
fontSize: '24px',
marginBottom: '0.5rem',
marginTop: 0
},
h5: {
fontSize: '20px',
marginBottom: '0.5rem',
marginTop: 0
},
h6: {
fontSize: '16px',
marginBottom: '0.5rem',
marginTop: 0
},
p: { marginBottom: '0.5rem' },
li: { margin: 0 },
img: { margin: 0 }
}
}
})
}
},
daisyui: {
themes: [
{
mytheme: {
primary: '#641ae6',
secondary: '#d926a9',
accent: '#1fb2a6',
neutral: '#2a323c',
'base-100': '#ffffff',
info: '#3abff8',
success: '#36d399',
warning: '#fbbd23',
error: '#f87272'
}
}
]
},
plugins: [
require('@tailwindcss/forms')({
strategy: 'class'
}),
require('@tailwindcss/typography'),
require('daisyui')
]
};