conditional container width does not work

[sancelot]

hi,

in my vite project,
I want to enable 6 columns if my screen width is <1920px and 3columns when it is >1921px
<div className="h-full grid grid-cols-6 toto:grid-cols-3 gap-4">
I extended theme in tailwind.config.js but has no effect.

theme: {
extend: {
screens: {
toto: "1921px", // applies when screen > 1920px
},

[rozsazoltan]

Are you using TailwindCSS v3 or v4?

[rozsazoltan]

From the description, I would guess that you're using v4. In v4, we no longer use tailwind.config.js; instead, in a CSS-first configuration, you can declare your toto breakpoint like this:

• What's breaking changes from v4?
• New CSS-first configuration option in v4
• How to can create (functional) utilities with @utility without plugin

@theme {
  --breakpoint-toto: 1921px;
}

But it's important to note that TailwindCSS uses rem-based breakpoints by default, which shouldn't be mixed with px-based breakpoints. More here:

You created a px-based breakpoint, but Tailwind uses rem-based breakpoints. It's not very advantageous to mix the two. Maybe interest for you: rem is dynamic. px is not. Together? Chaos.

Your custom breakpoint is defined in pixels, the default ones are defined in rems. We sort each "unit" logically, but we can't sort between px and rem becaues that might be different at runtime. Use rem instead.

rem units are multiples of the :root default font-size. By default, this font size is 16px, so 1rem = 16px, 2rem = 16*2px, and so on. Therefore, 1921px = 1921/16 rem. It's important this depends on the base font size.

• https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units#relative_length_units
• https://discord.com/channels/486935104384532500/1420034538687430790/1420034538687430790

[hyattc1]

First thing is to check which Tailwind version you’re on with:

npx tailwindcss -v

• If it’s v3 you can keep using tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      screens: {
        toto: "1921px",
      }
    }
  }
}

Then you can use it like this:

<div className="grid grid-cols-6 toto:grid-cols-3 gap-4">

• If it’s v4 the config moved into CSS, so you need:

@theme {
  --breakpoint-toto: 1921px;
}

So it’s the same idea, just depends on whether you’re on v3 or v4.

[rozsazoltan]

The question already mentioned the v3 configuration. From that, it clearly followed that they were using v4. As I had mentioned much earlier: #18983 (reply in thread)

[sancelot]

V4 fine breakpoint worked.thanks

[hyattc1]

Glad this helped. Could you can mark it as the accepted answer so others with the same problem can find it more easily.

[rozsazoltan]

The question already mentioned the v3 configuration. From that, it clearly followed that they were using v4. As I had mentioned much earlier: #18983 (reply in thread)