@apply and @screen in plugins not working as expected

[brc-dd]

Description

I am unable to use @apply and @screen in my custom plugins. The @apply is being completely ignored, and the order of @screen keys is not being respected.

Even if I replace @screen sm with @media (min-width: 640px) (and others too), the plugin is not working as expected. Although for @apply, as a possible workaround, I am able to define CSS directly in the plugin or combine multiple classes directly using tw.

---

My Plugin

plugin(({ addComponents }) =>
  addComponents({
    ".componentX": {
      "@apply w-full mx-auto px-4 bg-black text-white py-8": {},
      "@screen sm": { maxWidth: "540px" },
      "@screen md": { maxWidth: "720px" },
      "@screen lg": { maxWidth: "960px" },
      "@screen xl": { maxWidth: "1140px" },
      "@screen 2xl": { maxWidth: "1320px" },
    },
  })
)

JSX Code

<>
  <div tw="componentX">Hey There</div>              {/* Actual */}
  <div className="componentX">Hey There</div>       {/* Expected */}
</>

---

Actual vs Expected Behavior

Actual

@media (min-width: 1536px) {
  .css-154dcof {
    max-width: 1320px;
  }
}
@media (min-width: 1280px) {
  .css-154dcof {
    max-width: 1140px;
  }
}
@media (min-width: 1024px) {
  .css-154dcof {
    max-width: 960px;
  }
}
@media (min-width: 768px) {
  .css-154dcof {
    max-width: 720px;
  }
}
@media (min-width: 640px) {
  .css-154dcof {
    max-width: 540px;
  }
}

Expected

The media queries should have been in reverse order, i.e. in which the keys of the plugin are defined. And there should have been styles corresponding to w-full mx-auto px-4 bg-black text-white py-8 also.

---

Minimum Reproducible Example

https://github.com/brc-dd/twin-possible-bug

This repo is bootstrapped using the official Next.js example: with-tailwindcss followed by configuring it to use twin.macro as per the instructions given here.

[brc-dd]

I tried using custom media queries having both min and max, so that the styles don't overlap, but that also doesn't work with tw.macro. It generated a CSS like this:

@media (min-width: [object Object]) {
  /* ... */
}

---

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      'sm': {'min': '640px', 'max': '767px'},
      'md': {'min': '768px', 'max': '1023px'},
      'lg': {'min': '1024px', 'max': '1279px'},
      'xl': {'min': '1280px', 'max': '1535px'},
      '2xl': {'min': '1536px'},
    },
  }
}

[ben-rogerson]

Thanks for the great bug report ⚡

Looks like there's a bug here plus a few features that twin doesn't currently support:

• Bug: Media queries in plugins are added in reverse order (Fix on the way)
• Feature request: @apply in plugins
  This is the first time I've seen this feature - I had a hunt for some tailwindcss docs mentioning @apply within plugins but couldn't find anything. Seems like a great feature to add.
• Feature request: Max-width media queries [source]
  I feel adding this feature will be troublesome with the existing code. I might need to see some more interest in it first.

[brc-dd]

Should I split this into three issues for better tracking (+ labelling)?

PS: Yeah, I am also unable to find any official documentation on @apply within plugins. Actually, I had seen it here on this discussion. As far as the feature of max/multi-range/custom breakpoints is concerned, I don't think many users use them. I, also, found them while searching for a workaround.

[ben-rogerson]

Should I split this into three issues for better tracking (+ labelling)?

Yes please, thanks ahead :)

[minzojian]

@brc-dd

• source

i faced the same issue

@media (min-width: [object Object]) {

have you solved this problem? and how?