You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.6 KiB
91 lines
2.6 KiB
const { spacing } = require('tailwindcss/defaultTheme');
|
|
|
|
module.exports = {
|
|
mode: 'jit',
|
|
purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
|
|
darkMode: 'class', // or 'media' or 'class'
|
|
theme: {
|
|
screens: {
|
|
'2xl': {'max': '1535px'},
|
|
// => @media (max-width: 1535px) { ... }
|
|
|
|
'xl': {'max': '1279px'},
|
|
// => @media (max-width: 1279px) { ... }
|
|
|
|
'lg': {'max': '1023px'},
|
|
// => @media (max-width: 1023px) { ... }
|
|
|
|
'md': {'max': '767px'},
|
|
// => @media (max-width: 767px) { ... }
|
|
|
|
'sm': {'max': '639px'},
|
|
// => @media (max-width: 639px) { ... }
|
|
},
|
|
extend: {
|
|
typography: (theme) => ({
|
|
DEFAULT: {
|
|
css: {
|
|
color: theme('colors.gray.700'),
|
|
a: {
|
|
color: theme('colors.blue.500'),
|
|
'&:hover': {
|
|
color: theme('colors.blue.700'),
|
|
},
|
|
code: { color: theme('colors.blue.400') },
|
|
},
|
|
'h2,h3,h4': {
|
|
'scroll-margin-top': spacing[32],
|
|
},
|
|
code: { color: theme('colors.pink.500') },
|
|
'blockquote p:first-of-type::before': false,
|
|
'blockquote p:last-of-type::after': false,
|
|
},
|
|
},
|
|
dark: {
|
|
css: {
|
|
color: theme('colors.gray.300'),
|
|
a: {
|
|
color: theme('colors.blue.400'),
|
|
'&:hover': {
|
|
color: theme('colors.blue.600'),
|
|
},
|
|
code: { color: theme('colors.blue.400') },
|
|
},
|
|
blockquote: {
|
|
borderLeftColor: theme('colors.gray.800'),
|
|
color: theme('colors.gray.300'),
|
|
},
|
|
'h2,h3,h4': {
|
|
color: theme('colors.gray.100'),
|
|
'scroll-margin-top': spacing[32],
|
|
},
|
|
hr: { borderColor: theme('colors.gray.800') },
|
|
ol: {
|
|
li: {
|
|
'&:before': { color: theme('colors.gray.500') },
|
|
},
|
|
},
|
|
ul: {
|
|
li: {
|
|
'&:before': { backgroundColor: theme('colors.gray.500') },
|
|
},
|
|
},
|
|
strong: { color: theme('colors.gray.300') },
|
|
thead: {
|
|
color: theme('colors.gray.100'),
|
|
},
|
|
tbody: {
|
|
tr: {
|
|
borderBottomColor: theme('colors.gray.700'),
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
},
|
|
variants: {
|
|
typography: ['dark'],
|
|
},
|
|
plugins: [require('@tailwindcss/typography')],
|
|
};
|
|
|