-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
-
in tailwind v3 you could do something like this
module.exports = {
theme: {
screens: {
sm: '640px', // Custom global breakpoint
md: '768px', // Custom global breakpoint
lg: '1024px', // Custom global breakpoint
xl: '1280px', // Custom global breakpoint
},
container: {
center: true,
screens: {
sm: '600px', // Custom container max-width at 'sm' breakpoint
md: '728px', // Custom container max-width at 'md' breakpoint
lg: '984px', // Custom container max-width at 'lg' breakpoint
xl: '1240px', // Custom container max-width at 'xl' breakpoint
},
},
},
};
but in v4 we only got the below which only applies to @container and not container
--container-3xs: 16rem;
--container-2xs: 18rem;
--container-xs: 20rem;
--container-sm: 24rem;
--container-md: 28rem;
--container-lg: 32rem;
--container-xl: 36rem;
--container-2xl: 42rem;
--container-3xl: 48rem;
--container-4xl: 56rem;
--container-5xl: 64rem;
--container-6xl: 72rem;
--container-7xl: 80rem;
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 1 comment 4 replies
-
Indeed, in v4, container only uses the --breakpoint variables:
tailwindcss/packages/tailwindcss/src/utilities.ts
Lines 1005 to 1015 in fc94ab4
But you can override container using @utility like:
@utility container { margin-inline: auto; max-width: none; @media (width >= 37.5rem) { max-width: 37.5rem; } @media (width >= 45.5rem) { max-width: 45.5rem; } @media (width >= 61.5rem) { max-width: 61.5rem; } @media (width >= 77.5rem) { max-width: 77.5rem; } }
Beta Was this translation helpful? Give feedback.
All reactions
-
This maybe out of the scope but how can we make something like this work
@utility container { @media (width >= var(--breakpoint-xl)) { max-width: calc( 0.8 * var(--breakpoint-xl)) } }
the issue is with the width >= var(--breakpoint-xl) but it works with width >= 80rem
Beta Was this translation helpful? Give feedback.
All reactions
-
You can do:
@utility container { @variant xl { max-width: calc(0.8 * var(--breakpoint-xl)); } }
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
@wongjn With this solution, the generated code contains "lot" of dead code - the default styles (max-width) for the utility are still in the ouput, even though they are never used (because the .utility class is overridden by cascade). This really bothers me, but I don't think there is a solution for this as of now?
Beta Was this translation helpful? Give feedback.
All reactions
-
You could consider:
- Using utility classes instead of
container. - Forking the project to suit your needs.
Beta Was this translation helpful? Give feedback.