agola-web/tailwind.js

65 lines
1.6 KiB
JavaScript
Raw Permalink Normal View History

module.exports = {
theme: {
extend: {
container: {
center: true,
padding: '2rem',
},
fontFamily: {
'sans': ['Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji']
},
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`
})
})
}
]
}