nx icon indicating copy to clipboard operation
nx copied to clipboard

Tailwind @apply error: Unknown class `w-full,` in Angular Less

Open saeidi-dev opened this issue 1 month ago • 2 comments

Current Behavior

When running nx serve admin, the following error occurs:

X [ERROR] The w-full,class does not exist. Ifw-full,is a custom class, make sure it is defined within a@layer` directive. [plugin angular-less]

apps/admin/src/app/features/dashboard/workspace/workspace.component.less:2:1: 2 │ @apply w-full h-full; ╵ ^

The plugin "angular-less" was triggered by this import

angular:styles/global:styles:2:8:
  2 │ @import 'packages/theme/src/styles/default.less';
    ╵         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

default.less source:@import 'ng-zorro-antd/ng-zorro-antd.less';

@import 'index.less'; /* @apply used inside */ @import 'themes/default'; `

This error happens in all .less files that use @apply and prevents the project from building or serving.

Expected Behavior

Tailwind utility classes like w-full and h-full should be applied correctly in .less files without causing any errors, and the project should serve successfully.

GitHub Repo

No response

Steps to Reproduce

  1. Have an Nx Angular project with version 22.1.3 using Tailwind and Less.
  2. In a .less file, define a class using @apply w-full h-full;.
  3. Run nx serve admin.
  4. The error above appears.

Nx Report

Node : 25.2.1
OS   : Windows 11
Nx   : 22.1.3
Angular : 20.3.13
Angular CLI: 20.3.12

Failure Logs


Package Manager Version

No response

Operating System

  • [ ] macOS
  • [ ] Linux
  • [x] Windows
  • [ ] Other (Please specify)

Additional Information

No response

saeidi-dev avatar Dec 01 '25 06:12 saeidi-dev

I have the same problem and I still haven't been able to fix it.

mhosseinkhani avatar Dec 06 '25 11:12 mhosseinkhani

I’m experiencing the exact same issue in my Nx Angular project, and the behavior is identical to what’s described here, so I wanted to provide more details to confirm this is not an isolated case.

Whenever I run nx serve on my application, any .less file that contains Tailwind’s @apply directive (for example, @apply w-full h-full;) causes the build to fail with the same error:The w-full class does not exist. If w-full is a custom class, make sure it is defined within a @layer directive. [plugin angular-less]

aminhavasi avatar Dec 07 '25 12:12 aminhavasi