csstailwind-csstailwind-css-4

Make Tailwind v4 desktop-first

It used to be that in Tailwind v3, you could just reconfigure the screen queries to work desktop-first. Make something look good on your large computer screen, the downsize, make adjustments and finally get to the size of a mobile screen like so:

export default {
  theme: {
    screens: {
      '2xl': { max: '1535px' },
      xl: { max: '1279px' },
      lg: { max: '1023px' },
      md: { max: '767px' },
      sm: { max: '639px' },
    },
  },
};

Many devs (including me) just can not wrap their heads round starting with a tiny screen and sizing the project upwards to desktop screens. I wanted to do the same thing as above in an idiomatic v4 style using their new CSS-only configuration techniques, but it seems like the only option to achieve this is by configuring each prefix for each possible prop individually (see below) unlike with v3 config where it could have been done globally with a few lines.

@layer utilities {
  /* xs: ≤479px */
  @media (max-width: 479px) {
    .xs\:w-40 { width: 10rem; }
    .xs\:h-40 { height: 10rem; }
  }

  /* sm: ≤639px */
  @media (max-width: 639px) {
    .sm\:w-48 { width: 12rem; }
    .sm\:h-48 { height: 12rem; }
  }
...
}

I tried searching for some V4-specific solutions to this issue but it seems like a new enough problem not many people had really dealt with it to this point. Am I missing some configuration or has this just been blatantly removed because "mobile-first" and that's it?

Solution

  • Max-breakpoint variants are available by default

    By the way, inverted breakpoints are available by default (since the default is min-width), but you can achieve the opposite with max-{breakpoint}.

    For example, from md to xl: md:max-xl:bg-black or from the default to xl: max-xl:bg-black.

    Of course, it's tedious to do this for every single class, and it's definitely better to override the default breakpoints if you prefer a desktop-first layout.

    Declaring custom desktop-first breakpoints

    With the @custom-variant directive, you can declare your own variant, which can even work like a reversed breakpoint, as you demonstrated.

    Just to be safe, I also disabled the default breakpoints separately, so now only the new custom variants will work.

    Based on the JS-based configuration you provided, this is how it looks in the v4 CSS-first configuration:

    @import "tailwindcss";

@theme {
  --breakpoint-*: initial;
}

@custom-variant 2xl (@media (max-width: 1535px));
@custom-variant xl (@media (max-width: 1279px));
@custom-variant lg (@media (max-width: 1023px));
@custom-variant md (@media (max-width: 767px));
@custom-variant sm (@media (max-width: 639px));