Tailwind @apply error: Unknown class `w-full,` in Angular Less
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
- Have an Nx Angular project with version 22.1.3 using Tailwind and Less.
- In a .less file, define a class using @apply w-full h-full;.
- Run nx serve admin.
- 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
I have the same problem and I still haven't been able to fix it.
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]