at rule for moving a utility class to the end of the layer

[SergiArias]

Hello!

I have a little problem that I cannot solve. I want to create a utility that targets one media query, but I don't want tailwind to build all the variants for this particular media query.

This usually happens when there is the need to fix something that belongs only to that media and only requires a very simple change and not the complete utility toolbox.

There are solutions, but they come with some trouble:

• I can use !important, but it's not generally a good practice
• I can create another breakpoint, but it will build all the variants, making the webpack watcher very slow each time I save my css.

So I think there should be an at rule like @screen-overrides {} that would put all the classes at the end of the layer so they can override.

Maybe there is already a solution, but I did search for it with no results. Any help will be appreciated!

SOLVED

Sorry for not reading carefully, the solution is here: https://tailwindcss.com/docs/functions-and-directives

Just using @tailwind screens; in my css I can order the media queries like I want!

[adamwathan]

Hey! I don't think I understand what you're asking, can you provide some actual code samples so I can see what you're trying to do and what the problem is?

[SergiArias]

Sorry @adamwathan as I published I remembered that I could use the @tailwind screens to order the layers as I want.

You were faster than my rectification 😅

This would summarize what I was referring to just in case someone finds this post:

@tailwind base;
@tailwind components;
@tailwind utilities;

@tailwind screens;

@media (min-aspect-ratio: 1440/700) { // very few classes to justify a breakpoint...
  .win\:-mt-32 {
    @apply -mt-32;
  }

  .win\:py-32 {
    @apply py-32;
  }

  .win\:pt-32 {
    @apply pt-32;
  }
}