101 lines
3.2 KiB
JavaScript
101 lines
3.2 KiB
JavaScript
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
|
|
module.exports = {
|
|
purge: ['./src/**/*.{js,jsx,ts,tsx}'],
|
|
// darkMode: 'media', // or 'media' or 'class'
|
|
theme: {
|
|
screens: {
|
|
'sm': '640px',
|
|
'md': '768px',
|
|
'lg': '1024px',
|
|
'xl': '1280px',
|
|
'2xl': '1536px',
|
|
'portrait': {'raw': '(orientation: portrait)'},
|
|
'landscape': {'raw': '(orientation: landscape)'},
|
|
},
|
|
spacing: {
|
|
'0': '0px',
|
|
'1': '4px',
|
|
'2': '8px',
|
|
'3': '12px',
|
|
'4': '16px',
|
|
'5': '24px',
|
|
'6': '32px',
|
|
'7': '48px',
|
|
'8': '80px',
|
|
'9': '800px',
|
|
},
|
|
fontFamily: {
|
|
...defaultTheme.fontFamily,
|
|
// serif: ['Didot', 'Didot LT', 'STD', 'Hoefler Text' , 'Garamond', 'Times New Roman', 'serif']
|
|
serif: ['Playfair Display', 'serif'],
|
|
},
|
|
extend: {
|
|
colors: {
|
|
vibrant: {
|
|
DEFAULT: ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(--vibrant), ${opacityValue})`;
|
|
}
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(var(--vibrant), var(${opacityVariable}, 1))`;
|
|
}
|
|
return 'rgb(var(--vibrant))';
|
|
},
|
|
light: ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(--light-vibrant), ${opacityValue})`;
|
|
}
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(var(--light-vibrant), var(${opacityVariable}, 1))`;
|
|
}
|
|
return 'rgb(var(--light-vibrant))';
|
|
},
|
|
dark: ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(--dark-vibrant), ${opacityValue})`;
|
|
}
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(var(--dark-vibrant), var(${opacityVariable}, 1))`;
|
|
}
|
|
return 'rgb(var(--dark-vibrant))';
|
|
},
|
|
},
|
|
muted: {
|
|
DEFAULT: ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(--muted), ${opacityValue})`;
|
|
}
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(var(--muted), var(${opacityVariable}, 1))`;
|
|
}
|
|
return 'rgb(var(--muted))';
|
|
},
|
|
light: ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(--light-muted), ${opacityValue})`;
|
|
}
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(var(--light-muted), var(${opacityVariable}, 1))`;
|
|
}
|
|
return 'rgb(var(--light-muted))';
|
|
},
|
|
dark: ({ opacityVariable, opacityValue }) => {
|
|
if (opacityValue !== undefined) {
|
|
return `rgba(var(--dark-muted), ${opacityValue})`;
|
|
}
|
|
if (opacityVariable !== undefined) {
|
|
return `rgba(var(--dark-muted), var(${opacityVariable}, 1))`;
|
|
}
|
|
return 'rgb(var(--dark-muted))';
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
variants: {
|
|
extend: {},
|
|
},
|
|
plugins: [],
|
|
};
|