2891b62b6c
I really like it! TODO: Extract more components
62 lines
1.4 KiB
JavaScript
62 lines
1.4 KiB
JavaScript
module.exports = {
|
|
theme: {
|
|
extend: {
|
|
container: {
|
|
center: true,
|
|
padding: '2rem',
|
|
},
|
|
borderWidth: {
|
|
default: '1px',
|
|
'0': '0',
|
|
'2': '2px',
|
|
'4': '4px',
|
|
'5': '5px',
|
|
'6': '6px',
|
|
},
|
|
spacing: {
|
|
px: '1px',
|
|
'2px': '2px',
|
|
'3px': '3px',
|
|
'0': '0',
|
|
'1': '0.25rem',
|
|
'2': '0.5rem',
|
|
'3': '0.75rem',
|
|
'4': '1rem',
|
|
'5': '1.25rem',
|
|
'6': '1.5rem',
|
|
'8': '2rem',
|
|
'10': '2.5rem',
|
|
'12': '3rem',
|
|
'16': '4rem',
|
|
'20': '5rem',
|
|
'24': '6rem',
|
|
'32': '8rem',
|
|
'40': '10rem',
|
|
'48': '12rem',
|
|
'56': '14rem',
|
|
'64': '16rem',
|
|
},
|
|
colors: {
|
|
dark: '#4a4a4a',
|
|
}
|
|
}
|
|
},
|
|
variants: {
|
|
backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
|
|
borderColor: ['responsive', 'hover', 'focus', 'disabled'],
|
|
boxShadow: ['responsive', 'hover', 'focus', 'disabled'],
|
|
cursor: ['responsive', 'disabled'],
|
|
opacity: ['responsive', 'disabled'],
|
|
textColor: ['responsive', 'hover', 'focus', 'disabled'],
|
|
},
|
|
plugins: [
|
|
function ({ addVariant, e }) {
|
|
addVariant('disabled', ({ modifySelectors, separator }) => {
|
|
modifySelectors(({ className }) => {
|
|
return `.${e(`disabled${separator}${className}`)}:disabled`
|
|
})
|
|
})
|
|
}
|
|
]
|
|
}
|