Tailwind 3 to 4 migration: unclear how to replicate @apply functionality

[arman-h]

In TW3, we used to be able to do this:

.theme-mb {
  @apply mb-4 lg:mb-8;
}

.theme-mt {
  @apply mt-4 lg:mt-8;
}

.theme-my {
  @apply theme-mb;
  @apply theme-mt;
}

In TW4, this throws Error: Cannot apply unknown utility class: theme-mb error. What's the right way of doing something similar in the new version?

[philipp-spiess]

Hey! Check this out: https://tailwindcss.com/docs/upgrade-guide#using-apply-with-vue-svelte-or-css-modules

[arman-h]

@philipp-spiess thank you for the quick reply, I saw the @reference documentation, but still unsure how to make it work in NextJS's global.css stylesheet, which is the main CSS file in the project, and I'm trying to use @apply directly there. In other words, I have:

@import "tailwindcss";

.theme-mb {
  @apply mb-4 lg:mb-8;
}

.theme-mt {
  @apply mt-4 lg:mt-8;
}

.theme-my {
  @apply theme-mb;
  @apply theme-mt;
}

so I'm not using @apply in another context.

[philipp-spiess]

Oh yeah sorry I was confused here! @apply slightly changed and you are not able to use it with non Tailwind utilities anymore. What you want to do in your case is to converted the theme-mb and theme-mt to utility functions instead: https://play.tailwindcss.com/9D3EZs6skd?file=css

[arman-h]

Awesome, that did it, thanks for the swift answer!

Would be helpful to clarify the documentation, as this was not obvious.