Files
mue/tailwind.config.js

59 lines
1.4 KiB
JavaScript

const { light } = require('@mui/material/styles/createPalette');
const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
modal: {
light: 'rgba(255, 255, 255, .85)',
dark: 'rgba(14, 16, 19, .85)',
},
'modal-content': {
light: 'rgba(255, 255, 255, .95)',
dark: 'rgba(14, 16, 19, .95)',
},
background: {
light: 'rgba(255, 255, 255, 0.7)',
dark: 'rgba(0, 0, 0, 0.7)',
},
brand: {
orange: '#FF5C25',
red: '#D21A11',
pink: '#FF456E',
},
},
width: {
modal: 'clamp(60vw, 1400px, 90vw)',
},
borderRadius: {
DEFAULT: '12px',
},
borderColor: {
modal: 'rgba(14, 16, 19, 0.3)',
},
textShadow: {
sm: '0 1px 4px var(--tw-shadow-color)',
DEFAULT: '0 2px 8px var(--tw-shadow-color)',
lg: '0 8px 24px var(--tw-shadow-color)',
},
},
},
plugins: [
require('@tailwindcss/typography'),
plugin(function ({ matchUtilities, theme }) {
matchUtilities(
{
'text-shadow': (value) => ({
textShadow: value,
}),
},
{ values: theme('textShadow') },
);
}),
],
};