agola-web/tailwind.js

76 lines
1.7 KiB
JavaScript

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`;
});
});
},
],
};