Fonrtend_Start_Code/tailwind.config.cjs

135 lines
3.3 KiB
JavaScript

/* eslint-disable no-undef */
/** @type {import('tailwindcss').Config} */
const safeListFile = 'safelist.txt';
// colors.indigo
const SAFELIST_COLORS = 'colors';
module.exports = {
mode: 'jit',
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './safelist.txt'],
darkMode: 'class',
theme: {
fontFamily: {
sans: [
'Tajawal',
'Inter',
'ui-sans-serif',
'system-ui',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'"Helvetica Neue"',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
serif: ['Tajawal', 'ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
mono: [
'Tajawal',
'ui-monospace',
'SFMono-Regular',
'Menlo',
'Monaco',
'Consolas',
'"Liberation Mono"',
'"Courier New"',
'monospace',
],
},
screens: {
xs: '576',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
extend: {
fontSize: {
base: '16px', // Set the default font size to 18px
sm: ['.98rem', { lineHeight: '1.25rem' }],
},
typography: (theme) => ({
DEFAULT: {
css: {
color: theme('colors.gray.500'),
maxWidth: '65ch',
},
},
invert: {
css: {
color: theme('colors.gray.400'),
},
},
}),
colors: {
nafithBlueColor: {
100: '#F6FBFE',
200: '#eaf3f8',
300: '#34baed',
400: '#1CACE3',
500: '#125785',
700: '#0E5484',
},
nafithLightBlueColor: {
100: '#F2F9FD',
200: '#E3F2FB',
300: '#C1E6F6',
400: '#8BD1EE',
500: '#5CBFE5',
600: '#26A1D1',
700: '#1882B1',
800: '#15688F',
900: '#155877',
950: '#0F3042',
},
nafithDarkBlueColor: {
500: '#1F293C',
},
nafithRedColor: {
100: '#FF1000',
},
nafithGreenColor: {
400: '#b8d24a',
500: '#95c13d',
600: '#7fbf3a',
},
},
},
},
plugins: [
// eslint-disable-next-line @typescript-eslint/no-var-requires
require('./twSafelistGenerator')({
path: safeListFile,
patterns: [
`text-{${SAFELIST_COLORS}}`,
`bg-{${SAFELIST_COLORS}}`,
`dark:bg-{${SAFELIST_COLORS}}`,
`dark:hover:bg-{${SAFELIST_COLORS}}`,
`dark:active:bg-{${SAFELIST_COLORS}}`,
`hover:text-{${SAFELIST_COLORS}}`,
`hover:bg-{${SAFELIST_COLORS}}`,
`active:bg-{${SAFELIST_COLORS}}`,
`ring-{${SAFELIST_COLORS}}`,
`hover:ring-{${SAFELIST_COLORS}}`,
`focus:ring-{${SAFELIST_COLORS}}`,
`focus-within:ring-{${SAFELIST_COLORS}}`,
`border-{${SAFELIST_COLORS}}`,
`focus:border-{${SAFELIST_COLORS}}`,
`focus-within:border-{${SAFELIST_COLORS}}`,
`dark:text-{${SAFELIST_COLORS}}`,
`dark:hover:text-{${SAFELIST_COLORS}}`,
`h-{height}`,
`w-{width}`,
],
}),
require('@tailwindcss/typography'),
],
};