Custom media query rules not working in v4

[charlesganza]

I'm facing an issue with v4 where custom media query rules are not having any effect.

In v3, in tailwind.config.ts inside the theme block I used the below code which worked perfectly for my needs.

screens: {
        'tablet-and-up': '63.9375rem',
        'tablet-and-down': {'max': '56.25rem'},
        'xs-mobile': {'min': '0.0625rem', 'max': '34.3125rem'},
        'mobile': {'max': '34.3125rem'},
        'phablet': {'min': '34.375rem', 'max': '46.8125rem'},
        'tablet': {'min': '46.875rem', 'max': '63.9375rem'},
        'desktop': {'min': '64rem', 'max': '79.9375rem'},
        'xl': {'min': '80rem', 'max': '95.9375rem'},
        '2xl': '96rem',
}

and since tailwind.config.ts has been removed, how can I include those rules in v4?

Here's what I've tried so far to no avail.

In my app.css, I've included:

@custom-variant tablet-and-up (@media (min-width: 63.9375rem));
@custom-variant tablet-and-down (@media (max-width: 56.25rem));
@custom-variant xs-mobile (@media (min-width: 0.0625rem) and (max-width: 34.3125rem));
@custom-variant mobile (@media (max-width: 34.3125rem));
@custom-variant phablet (@media (min-width: 34.375rem) and (max-width: 46.8125rem));
@custom-variant tablet (@media (min-width: 46.875rem) and (max-width: 63.9375rem));
@custom-variant desktop (@media (min-width: 64rem) and (max-width: 79.9375rem));
@custom-variant xl (@media (min-width: 80rem) and (max-width: 95.9375rem));
@custom-variant 2xl (@media (min-width: 96rem));

But whenever I use it, there's no effect. This has broken my site and I'd appreciate a guide on how to get this to work. Tailwind provided breakpoints don't work either. I even tried wrapping my content into @container, but it didn't work either.

For example, this div below is supposed to display 3 columns on big screens, 2 on tablets and 1 on mobile. That isn't working.

<div class="grid grid-cols-3 mobile:grid-cols-1 tablet:grid-cols-2 not-mobile:gap-4">

Any help will be appreciated as this has broken my whole site.

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[charlesganza]

Okay, I'll provide one.
In the meantime, is there a guide on how to migrate those screen media rules from v3 to v4?

[wongjn]

You can try searching the internet for a guide.

[charlesganza]

Reason I opened a ticket was because this https://tailwindcss.com/docs/responsive-design wasn't working.
Anyway, I ended up using a different approach with a custom media query watcher in Svelte.