39 lines
1.6 KiB
JavaScript
39 lines
1.6 KiB
JavaScript
import plugin from 'tailwindcss/plugin';
|
|
|
|
export default plugin(({ addComponents, theme }) => {
|
|
// Fixed
|
|
addComponents({
|
|
'.container-fixed': {
|
|
'flex-grow': '1',
|
|
width: '100%',
|
|
'padding-inline-start': theme('custom.components.container.fixed.px.DEFAULT'), // Logical property for LTR/RTL
|
|
'padding-inline-end': theme('custom.components.container.fixed.px.DEFAULT') // Logical property for LTR/RTL
|
|
},
|
|
[`@media (min-width: ${theme('screens.xl')})`]: {
|
|
'.container-fixed': {
|
|
'margin-inline-start': 'auto', // Logical property for LTR/RTL
|
|
'margin-inline-end': 'auto', // Logical property for LTR/RTL
|
|
'padding-inline-start': theme('custom.components.container.fixed.px.xl'), // Logical property for LTR/RTL
|
|
'padding-inline-end': theme('custom.components.container.fixed.px.xl') // Logical property for LTR/RTL
|
|
// 'max-width': theme('custom.components.container.fixed')['max-width'],
|
|
}
|
|
}
|
|
});
|
|
|
|
// Fluid
|
|
addComponents({
|
|
'.container-fluid': {
|
|
width: '100%',
|
|
'flex-grow': '1',
|
|
'padding-inline-start': theme('custom.components.container.fluid.px.DEFAULT'), // Logical property for LTR/RTL
|
|
'padding-inline-end': theme('custom.components.container.fluid.px.DEFAULT') // Logical property for LTR/RTL
|
|
},
|
|
[`@media (min-width: ${theme('screens.xl')})`]: {
|
|
'.container-fluid': {
|
|
'padding-inline-start': theme('custom.components.container.fluid.px.xl'), // Logical property for LTR/RTL
|
|
'padding-inline-end': theme('custom.components.container.fluid.px.xl') // Logical property for LTR/RTL
|
|
}
|
|
}
|
|
});
|
|
});
|