tailwind-csstailwind-css-4

Why not working {min-,max-,}w-screen-{breakpoint} following the pattern of {min-,max-,}w-{container_breakpoint}

I have been using the max-w-screen-{breakpoint} example since v3. However, it still works in v4, but I can't find any mention of it in the documentation.

I'm more interested in why, if max-w-screen-lg works, w-screen-lg doesn't produce any result. At the same time, the example given in the docs uses max-w-lg (the same as max-w-screen-lg, but container-specific), and w-lg (also container-specific) works. Even with the min-* prefix, only the container-specific min-w-lg works - min-w-screen-lg does not.

But since the behavior with max-w-screen-lg is undocumented, the question is only hypothetical.

The feature can currently be used with variables (w-(--breakpoint-lg)), but this makes the behavior of max-w-screen-{breakpoint} feel inconsistent. Since based on how the syntax works, I would expect it to work both with the min- or without prefix.

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

<div class="w-lg bg-sky-400">...</div>
<div class="w-32 min-w-lg  bg-sky-500">...</div>
<div class="w-999 max-w-lg  bg-sky-600">...</div>

<div class="w-screen-lg bg-orange-400">... (not working)</div>
<div class="w-32 min-w-screen-lg bg-orange-500">... (not working)</div>
<div class="w-999 max-w-screen-lg bg-orange-600">...</div>

<div class="w-(--breakpoint-lg) bg-emerald-400">...</div>
<div class="w-32 min-w-(--breakpoint-lg) bg-emerald-500">...</div>
<div class="w-999 max-w-(--breakpoint-lg) bg-emerald-600">...</div>

Solution

  • The max-w-screen-{breakpoint} class was retained solely for better compatibility with v3.

    The goal is that it will be used less or not at all in new v4 projects. In any case, the new, shorter syntax relying on variables for quick access should be used:

    <div class="w-(--breakpoint-lg) bg-emerald-400">...</div>
<div class="w-32 min-w-(--breakpoint-lg) bg-emerald-500">...</div>
<div class="w-999 max-w-(--breakpoint-lg) bg-emerald-600">...</div>

    For your own purposes, you can define custom functional utilities, allowing you to introduce the missing w-screen-{breakpoint} and min-w-screen-{breakpoint} utilities:

    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<style type="text/tailwindcss">
@utility w-screen-* {
  width: --value(--breakpoint-*);
}
@utility min-w-screen-* {
  min-width: --value(--breakpoint-*);
}
</style>

<div class="w-lg bg-sky-400">...</div>
<div class="w-32 min-w-lg  bg-sky-500">...</div>
<div class="w-999 max-w-lg  bg-sky-600">...</div>

<div class="w-screen-lg bg-orange-400">...</div>
<div class="w-32 min-w-screen-lg bg-orange-500">...</div>
<div class="w-999 max-w-screen-lg bg-orange-600">...</div>

<div class="w-(--breakpoint-lg) bg-emerald-400">...</div>
<div class="w-32 min-w-(--breakpoint-lg) bg-emerald-500">...</div>
<div class="w-999 max-w-(--breakpoint-lg) bg-emerald-600">...</div>

    and if max-w-screen-{breakpoint} gets removed later, you can restore it as well:

    @utility max-w-screen-* {
  max-width: --value(--breakpoint-*);
}