tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
fontFamily: {
poppins: ['Poppins', 'sans-serif'],
},
screens: {
bimobile: '496px',
mobile: '640px',
tablet: '768px',
ipad: '1024px',
laptop: '1280px',
desktop: '1536px',
},
extend: {
colors: {
action: {
error: '#E53835',
success: '#1D8E36',
warning: '#FBC02D',
},
inputCaption: '#858585',
inputBg: '#d9d9d9',
overlay: '#a5b4be',
neutral: {
grey: '#a5b4be',
black: '#000000',
white: '#fcfdfe',
darkRed: '#700303',
},
primary: {
lightblue: '#266491',
},
modalOverlay: 'rgba(0, 0, 0, 0.5)',
evenRawsbg: '#DDDDDD',
},
backgroundImage: {
'custom-gradient':
'linear-gradient(90deg, rgba(14,36,52,1) 0%, rgba(38,100,144,1) 42%, rgba(38,100,145,1) 42%, rgba(41,106,154,1) 100%)',
authenticationBackgroundImage:
'url("./src/assets/register-login-background.svg")',
},
boxShadow: {
'inner-bottom':
'inset 0 -4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 -2px 4px -1px rgba(0, 0, 0, 0.06)',
'bottom-left-right':
'2px 2px 4px rgba(0, 0, 0, 0.5), -2px 2px 4px rgba(0, 0, 0, 0.5)',
'dark-lg':
'0 10px 10px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2)',
},
transparent: 'transparent', // Add this line for transparent background
},
backgroundImage: {
'custom-gradient':
'linear-gradient(90deg, rgba(14,36,52,1) 0%, rgba(38,100,144,1) 42%, rgba(38,100,145,1) 42%, rgba(41,106,154,1) 100%)',
authenticationBackgroundImage:
'url("./src/assets/register-login-background.svg")',
},
boxShadow: {
'inner-bottom':
'inset 0 -4px 6px -1px rgba(0, 0, 0, 0.1), inset 0 -2px 4px -1px rgba(0, 0, 0, 0.06)',
'bottom-left-right':
'2px 2px 4px rgba(0, 0, 0, 0.5), -2px 2px 4px rgba(0, 0, 0, 0.5)',
'dark-lg':
'0 10px 10px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -4px rgba(0, 0, 0, 0.2)',
'custom-light': '0 2px 4px rgba(0, 0, 0, 0.1)',
'custom-medium': '0 4px 8px rgba(0, 0, 0, 0.2)',
'custom-heavy': '0 8px 16px rgba(0, 0, 0, 0.4)',
},
},
variants: {
extend: {
boxShadow: ['responsive', 'hover', 'focus'],
},
},
plugins: [],
};