37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
const plugin = require('tailwindcss/plugin');
|
|
const stepinTheme = require('stepin/es/style/tailwind.config.cjs');
|
|
|
|
module.exports = {
|
|
presets: [stepinTheme],
|
|
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,less,css}', './docs/**/*.{vue,ts,jsx,tsx,less,css,md}'],
|
|
darkMode: 'class', // or 'media' or 'class'
|
|
corePlugins: {
|
|
preflight: false,
|
|
},
|
|
theme: {
|
|
extend: {
|
|
screens: {
|
|
sm: '480px',
|
|
md: '768px',
|
|
lg: '976px',
|
|
xl: '1440px',
|
|
xxl: '1536px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
plugin(function ({ addVariant, theme }) {
|
|
const addMedia = (name, minWidth) => {
|
|
const collapsedWidth = 160;
|
|
addVariant(name, [
|
|
`@media (min-width: ${minWidth}px)`,
|
|
`@media (min-width: ${minWidth - collapsedWidth}px) {.collapsed &}`,
|
|
]);
|
|
};
|
|
const screens = Object.keys(theme('screens'));
|
|
screens.forEach((name) => addMedia(`${name}x`, parseInt(theme(`screens.${name}`).replace('px', ''))));
|
|
}),
|
|
require('@tailwindcss/container-queries'),
|
|
],
|
|
};
|