Tailwindcss-module: Custom utility: @apply can only be used for classes in the same CSS tree.

[phamhongphuc]

Version

@nuxtjs/tailwindcss: v3.0.0
nuxt: 2.14.1

Reproduction Link

https://codesandbox.io/s/tailwindcss-issue-1jf8w

Steps to reproduce

Document: https://tailwindcss.com/docs/adding-new-utilities

In tailwind.pcss, I create a custom class like:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@responsive {
  .global-class { 
    @apply text-blue-400
  }
}

The .global-class or sm:global-class can be use in <template>.
But it can't be use in <style lang="postcss"> with @apply

<style lang="postcss">
.component-class {
  @apply text-blue-400; /* work */
}
.apply-component-class {
  @apply component-class; /* work */
}
.apply-global-class {
  @apply global-class; /* doesn't work, throw build error */
}
</style>

What is Expected?

@apply global-class; will be work

What is actually happening?

@apply global-class; throw build error

@apply can only be used for classes in the same CSS tree.

Module build failed (from ./node_modules/postcss-loader/src/index.js): SyntaxError (26:3) `@apply` cannot be used with `.global-class` because `.global-class` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.global-class` 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.

[nomadboy20]

same issue cant fix it

[peoray]

Check your tailwind.config.js file and ensure you're properly nesting your object properties. I had the same issue, turns out I was missing the closing } for my theme property.

[hacknug]

I think this is a duplicate of #123.

This is happening because Nuxt treats style tags on SFC's as a different CSS file/block and they only have whatever comes from PostCSS as context. If you want this to work, you'll probably need to write a Tailwind plugin to add those base styles, components or utilities. After your styles come from a plugin, everything should work as you expect.

I'm just guessing here but I would almost bet this is the case.

[Atinux]

Hi there,

It is a weird situation indeed, I am not experimented in PostCSS sorry. Is it possible to create a working reproduction using only Vue + Tailwind? This will help me narrow the issue :)

[hacknug]

Reproduction Link

https://codesandbox.io/s/tailwindcss-issue-1jf8w

@Atinux does the link from OP work for you? It has a custom class on tailwind.pcss and he later tries to use @apply on /pages/index.vue.

[Atinux]

@phamhongphuc reproduction is valid.

My question was to have the similar reproduction with vue-cli + ssr + tailwindcss to see if this error comes from Nuxt itself or Vue.

I found a temporary workaround by creating a components.pcss file and import it where you actually need it: https://codesandbox.io/s/tailwindcss-issue-forked-wwbcs?file=/pages/index.vue:416-452

[phamhongphuc]

@phamhongphuc reproduction is valid.

My question was to have the similar reproduction with vue-cli + ssr + tailwindcss to see if this error comes from Nuxt itself or Vue.

I found a temporary workaround by creating a components.pcss file and import it where you actually need it: https://codesandbox.io/s/tailwindcss-issue-forked-wwbcs?file=/pages/index.vue:416-452

I don't have experience with vue-cli + ssr + tailwindcss.
Your temporary workaround looks good but I think It isn't exactly what we need.

After weeks, I found another way to fix this issue by creating new utilities via JS.
https://codesandbox.io/s/tailwindcss-issue-forked-nxr0w?file=/assets/tailwind.config.js

- Pros:

• No build error
• Access tailwind theme value easier.

- Cons:

• No hot reload (only full reload again when force saves tailwind.config.js or nuxt.config.js).
• yarn nuxt process will be terminated with incomplete code in tailwind.config.js file (have to manual restart).

[itpropro]

I use @apply with nuxtjs for a long time now and it works fine. I recently enabled the experimental complex classes feature by setting it in the tailwind.config.sj:

module.exports = {
  experimental: {
    applyComplexClasses: true,
...

I had a similar problem, but I still had imports like

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

in my style section and the tailwindcss file in my assets folder.
I removed the whole assets/css folder, as I was not doing anything with the tailwind.css and the requirement for one was dropped and I have the following tailwindcss config:

tailwindcss: {
    configPath: '@/tailwind.config.js',
    cssPath: '@/assets/css/tailwind.css',
    exposeConfig: false
  }

where all the 3 keys are only there, because I change them regularly for testing, not because they are needed.
With a clean installation and "applyComplexClasses" set to true, there should be no problem in having @apply statements like these:

<style scoped>
.btn-base {
  @apply px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white transition ease-in-out duration-150;
}
.btn-neutral {
  @apply bg-indigo-600 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 disabled:cursor-not-allowed disabled:bg-indigo-400;
}
...

I hope this helps anyone.

EDIT:
A lot has changed with TailwindCSS >2.0. I was not able to reproduce this error in different setups including components in different CSS trees.

[Atinux]

@itpropro you confirm that with TailwindCSS 2, the issue is gone?

[Atinux]

Closing, please re-open if this is still relevant.

[michaelpumo]

For what it's worth, I am getting this same issue:

"nuxt": "^2.15.2",
"@nuxtjs/tailwindcss": "^3.4.2"

Utility:

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

@layer utilities {
  @variants responsive {
    .form-input {
      color: red;
    }
  }
}

...and using it like so:

<style lang="postcss" scoped>
.FormInput {
  @apply .form-input;
}
</style>

Results in an error:

@apply cannot be used with .form-input because .form-input either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .form-input 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.

[wongwithhisfellowpartners]

Closing, please re-open if this is still relevant.

restart vscode works!

[chojnicki]

For what it's worth, I am getting this same issue:

"nuxt": "^2.15.2",
"@nuxtjs/tailwindcss": "^3.4.2"

Utility:

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

@layer utilities {
  @variants responsive {
    .form-input {
      color: red;
    }
  }
}

...and using it like so:

<style lang="postcss" scoped>
.FormInput {
  @apply .form-input;
}
</style>

Results in an error:

@apply cannot be used with .form-input because .form-input either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that .form-input 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.

I doubt you still facing this problem after a month, but in your case it should be @apply form-input and not @apply .form-input