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

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.

[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.

[michaelpumo]

If anyone is getting an error in Vue SFC’s PostCSS blocks with custom utilities not ‘existing’, hopefully this will help:

This did NOT work (as a rule in a CSS file):

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

@layer utilities {
  .container {
    width: 100%;
    max-width: 1500px;
  }
}

This DOES work (created as a plugin inside tailwind.config.js):

const plugin = require('tailwindcss/plugin')
const pxToRem = (px, base = 16) => `${px / base}rem`

module.exports = {
  purge: [
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  plugins: [
    plugin(function ({ addUtilities, theme }) {
      const customUtilities = {
        '.container': {
          width: '100%',
          maxWidth: '1500px',
        },
      }
      addUtilities(customUtilities)
    }),
  ],
}

Now I can do this in the SFC CSS (notice, you do not put a dot next to the custom class):

<style lang="postcss" scoped>
.Header {
  @apply container;
}
</style>

I hope this helps someone who is struggling to add custom utility classes to a Vue.js or Nuxt.js project.