|
|
|
/* eslint-disable */
|
|
|
|
const defaultTheme = require('tailwindcss/defaultTheme');
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
purge: ['./src/pages/**/*.{ts,tsx}', './src/components/**/*.{ts,tsx}'],
|
|
|
|
theme: {
|
|
|
|
extend: {
|
|
|
|
transitionProperty: {
|
|
|
|
'max-height': 'max-height',
|
|
|
|
width: 'width',
|
|
|
|
},
|
|
|
|
fontFamily: {
|
|
|
|
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
|
|
|
},
|
|
|
|
typography: (theme) => ({
|
|
|
|
DEFAULT: {
|
|
|
|
css: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
a: {
|
|
|
|
color: theme('colors.indigo.500'),
|
|
|
|
'&:hover': {
|
|
|
|
color: theme('colors.indigo.400'),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
h1: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
},
|
|
|
|
h2: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
},
|
|
|
|
h3: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
},
|
|
|
|
h4: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
},
|
|
|
|
h5: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
},
|
|
|
|
h6: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
},
|
|
|
|
|
|
|
|
strong: {
|
|
|
|
color: theme('colors.gray.400'),
|
|
|
|
},
|
|
|
|
|
|
|
|
code: {
|
|
|
|
color: theme('colors.gray.300'),
|
|
|
|
},
|
|
|
|
|
|
|
|
figcaption: {
|
|
|
|
color: theme('colors.gray.500'),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
}),
|
|
|
|
},
|
|
|
|
},
|
|
|
|
variants: {
|
|
|
|
padding: ['first', 'last', 'responsive'],
|
|
|
|
borderWidth: ['first', 'last'],
|
|
|
|
margin: ['first', 'last', 'responsive'],
|
|
|
|
boxShadow: ['group-focus'],
|
|
|
|
opacity: ['disabled', 'hover', 'group-hover'],
|
|
|
|
ringColor: ['focus', 'focus-within', 'hover', 'active'],
|
|
|
|
scale: ['hover', 'focus', 'group-hover'],
|
|
|
|
zIndex: ['hover', 'responsive'],
|
|
|
|
},
|
|
|
|
plugins: [
|
|
|
|
require('@tailwindcss/forms'),
|
|
|
|
require('@tailwindcss/typography'),
|
|
|
|
require('@tailwindcss/aspect-ratio'),
|
|
|
|
],
|
|
|
|
};
|