Can't use @apply with utilities added by a plugin

[HapLifeMan]

Hello,

I'm using Tailwind for a while now and I'm starting using plugins.
I passed the last days searching on internet why I can't use @apply with a new utility added by a plugin, but I didn't find the solution. So I'm here hoping you can help me!

I'm using Nuxt with @nuxtjs/tailwindcss, and the tailwindcss-rtl plugin, which adds some useful utilities like me-{size}, ms-{size} to use paddings in RTL and LTR directions easily.

Here's my CSS files:

/* main.css */

@import "tailwindcss/base";
@import "tailwindcss/components";

@import "./components/tooltips.css";

@import "tailwindcss/utilities";

body { @apply .me-2; }

/* components/tooltips.css */

.tooltip { @apply .ms-2; }

Here's the error:

@apply cannot be used with .ms-2 because .ms-2 either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .ms-2 exists, make sure that any @import statements are being properly processed *before* Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

Also, I would like to precise that I'm @Applying classes in some classes in main.css imported from components files.

Thanks if you can provide any help 🙏🏻

[estevanmaito]

What does the definition of ms-2 looks like?

[HapLifeMan]

Is that what you're looking for? https://github.com/20lives/tailwindcss-rtl/blob/master/marginUtilities.js

[estevanmaito]

No. I mean, the CSS it generates, like:

.ms-2 {
  something
}

It probably has some forbidden selector.

This comment summarizes past issues with apply, but generally, the error message is pretty clear: #1897 (comment)

[HapLifeMan]

Oh, I see. It's generating something like this:

[dir="rtl"] .ms-2 { margin-right: 2rem; }

So I will not be able to have it working (if I want to put these classes in CSS files)? :(