tailwind.config.cjs
const config = {
content: [
'./src/**/*.{html,js,svelte,ts}',
'./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}'
],
theme: {
extend: {
colors: {
'dark-white': '#F7F7F7',
black: '#111827',
'dark-grey': '#1F2937',
grey: '#374151',
'light-grey': '#6B7280',
red: '#DA3C2B',
yellow: '#DD972A',
green: '#057A55'
},
fontFamily: {
Roboto: ['Roboto', 'sans-serif'],
Raleway: ['Raleway', 'sans-serif']
},
animation: {
blink: 'blink 4s linear infinite',
eyes: 'eyes 10s ease-in-out infinite'
},
keyframes: {
blink: {
'0%, 96%': { transform: 'scaleY(1)' },
'98%': { transform: 'scaleY(0.1)' }
},
eyes: {
'0%, 25%, 50%, 75%': { transform: 'translate(0, 0)' },
'30%, 45%': { transform: 'translate(-10px, 0)' },
'80%, 95%': { transform: 'translate(10px, 0)' }
}
},
boxShadow: {
'box-light': '0 10px 50px 0 rgba(17, 24, 39, .05)',
'box-dark': '0 10px 50px 0 rgba(247, 247, 247, .02)'
}
}
},
safelist: [
'object-bottom',
'object-center',
'object-left',
'object-left-bottom',
'object-left-top',
'object-right',
'object-right-bottom',
'object-right-top',
'object-top',
'w-[50%]',
'w-[33%]',
'left-[50%]',
'left-[33%]',
'left-[66%]'
],
plugins: [require('flowbite/plugin')],
darkMode: 'media'
};
module.exports = config;