Replies: 2 comments
-
Hey! There's no way to customize the container width for each breakpoint. The You could use the https://tailwindcss.com/docs/container#adding-horizontal-padding If it were me though personally I would just create a custom container class by hand in my CSS file that did exactly what I wanted. |
Beta Was this translation helpful? Give feedback.
-
@adamwathan, For some reason I thought my needs were basic needs that anyone customizing a container would need. I disabled the default container now, but, because I need to use containerMaxWidths configuration to have possible to use this values for width, maxWidth, minWidth, flexBasis (of course we needed here clean value, without padding to visually be equal with content inside container in situations like modals) - I kept the same config export const containerSetup = {
center: true,
padding: {
DEFAULT: '1rem',
lg: '2rem',
},
screens: containerMaxWidths,
} satisfies ThemeConfig['container']; export const containerVariables = () => {
const containerPaddingSetup = containerSetup.padding;
// container-xxx
const containerVars = Object.keys(containerMaxWidths).reduce(
(prev, curr) => ({
...prev,
[`--container-${curr}`]:
containerMaxWidths[curr as keyof typeof containerMaxWidths],
}),
{},
);
// container max-width responsive variable
const containerMaxWidthVars = Object.keys(containerMaxWidths).reduce(
(acc: any, curr: any) => ({
...acc,
[`@media ${largerThan(curr)}`]: {
'--container-max-width':
containerMaxWidths[curr as keyof typeof containerMaxWidths],
// || breakpoints[curr as keyof typeof breakpoints],
},
}),
{
'--container-max-width': containerMaxWidths.min,
},
);
// container padding responsive variable
const containerPaddingVars = Object.keys(containerPaddingSetup).reduce(
(acc: any, curr: any) => {
const paddingValue =
containerPaddingSetup[curr as keyof typeof containerPaddingSetup];
if (curr === 'DEFAULT') {
return {
...acc,
'--container-padding': paddingValue,
};
}
return {
...acc,
[`@media ${largerThan(curr)}`]: {
'--container-padding': paddingValue,
},
};
},
{},
);
return deepmerge.all([
containerVars,
containerMaxWidthVars,
containerPaddingVars,
]);
};
addBase({
':root': {
...globalCssVariables(),
},
});
// Instead of default container, use custom one, css vars generated by config
addComponents([
{
'.container': {
maxWidth: 'var(--container-max-width)',
paddingLeft: 'var(--container-padding)',
paddingRight: 'var(--container-padding)',
marginLeft: 'auto',
marginRight: 'auto',
},
},
]); Only this way I have the configurable container and breakpoints values in sync with other utils that used it. |
Beta Was this translation helpful? Give feedback.
-
What version of Tailwind CSS are you using?
v3.4.4
What build tool (or framework if it abstracts the build tool) are you using?
Vite
What version of Node.js are you using?
v18.18.2
What browser are you using?
Chrome
What operating system are you using?
macOS
Reproduction URL
https://play.tailwindcss.com/ZD4y2b0WTo?file=config
Describe your issue
Why the
screens
undercontainer
uses values as media query?For example for
lg
breakpoint I have 992px value (62em equivalent), and I want the max-width of container for this breakpoint to be 960px (60em eq).Expected result:
Actual result:
Beta Was this translation helpful? Give feedback.
All reactions