Montassar Ghanmy
83 lines
1.8 KiB
JavaScript
83 lines
1.8 KiB
JavaScript
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
|
|
let shades = [];
|
|
['zinc', 'rose', 'orange', 'green', 'blue'].map(color => {
|
|
[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].map(shade => {
|
|
shades.push(`bg-${color}-${shade}`);
|
|
shades.push(`border-${color}-${shade}`);
|
|
shades.push(`text-${color}-${shade}`);
|
|
shades.push(`dark:bg-${color}-${shade}`);
|
|
shades.push(`dark:border-${color}-${shade}`);
|
|
shades.push(`dark:text-${color}-${shade}`);
|
|
});
|
|
});
|
|
|
|
module.exports = {
|
|
content: ['./src/**/*.{html,js,ts,tsx}'],
|
|
darkMode: 'media', //Use browser configuration
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
|
},
|
|
borderRadius: {
|
|
xl: '24px',
|
|
lg: '14px',
|
|
md: '10px',
|
|
sm: '8px',
|
|
},
|
|
fontSize: {
|
|
lg: '17px',
|
|
base: '15px',
|
|
sm: '13px',
|
|
xs: '11px',
|
|
},
|
|
|
|
colors: {
|
|
zinc: {
|
|
50: '#f7f8f9', //From figma
|
|
100: '#f2f4f5', //From figma
|
|
200: '#ebedf0', //From figma
|
|
300: '#d9dadb', //From figma
|
|
400: '#b8c1cc', //From figma
|
|
500: '#818c99', //From figma
|
|
600: '#52525b',
|
|
700: '#3f3f46',
|
|
800: '#27272a',
|
|
900: '#18181b',
|
|
},
|
|
blue: {
|
|
500: '#007AFF', //From figma
|
|
},
|
|
},
|
|
},
|
|
},
|
|
safelist: [
|
|
'cursor-pointer',
|
|
'w-24',
|
|
'h-24',
|
|
'w-32',
|
|
'h-32',
|
|
'w-16',
|
|
'h-16',
|
|
'w-14',
|
|
'h-14',
|
|
'w-12',
|
|
'h-12',
|
|
'h-8',
|
|
'w-8',
|
|
'bg-green-500',
|
|
'bg-red-500',
|
|
'bg-orange-500',
|
|
'h-12',
|
|
'px-4',
|
|
'flex',
|
|
'items-center',
|
|
'border-b-2',
|
|
'border-transparent',
|
|
'zinc-100',
|
|
...shades,
|
|
],
|
|
plugins: [require('@tailwindcss/forms')],
|
|
};
|