@apply No Longer Works in .less Files After Upgrading to Tailwind CSS v4

[saeidi-dev]

Describe the bug
After upgrading from Tailwind CSS v3 to v4, all @apply directives inside .less files are broken. The build fails and styles are not applied.

Environment

• Tailwind CSS: v4.x
• Previous version: v3.x
• Preprocessor: Less

To Reproduce

1. Have a project using Tailwind CSS v3 with .less files containing @apply
2. Upgrade to Tailwind CSS v4
3. Run the build
4. Observe errors related to @apply not being recognized in .less files

Expected behavior
@apply should work in .less files as it did in v3, or a clear migration path should be provided.

Current behavior
Build fails with errors. @apply directives inside .less files are not processed by Tailwind v4.

Additional context
I have a large codebase with many .less files heavily using @apply. Migrating all of them is a significant effort.

Question
What is the recommended migration path for projects using @apply inside .less files?
Is there any workaround or compatibility layer planned for v4?

I understand that v4 is designed as a standalone CSS build tool and is not intended to be used alongside preprocessors like Less or Sass. However, a migration guide or an automated upgrade tool that handles .less files would be greatly appreciated.

[wongjn]

Consider providing a git repo that reproduces the issue and we can take a look for you.

[chrisjcthomas]

Tailwind CSS v4 features a completely redesigned compiler engine built in Rust. Unlike v3, it compiles CSS natively and does not rely on PostCSS processing pipelines by default (unless configured via @tailwindcss/postcss).

Preprocessors like Less compile CSS before Tailwind runs. Because Less uses the @ symbol for variable declarations, it attempts to evaluate @apply as a variable or mixin, leading to compilation failures.

Here is how you can resolve or migrate this in v4:

1. Escape the @apply directive in Less (Immediate Workaround)

You can prevent the Less compiler from parsing the directive by wrapping it in an escaped literal string using the tilde (~) operator:

.btn {
  ~"@apply bg-blue-500 text-white rounded";
}

Alternatively, in newer versions of Less, you can use the @css directive to output the block raw:

.btn {
  @css {
    @apply bg-blue-500 text-white rounded;
  }
}

2. Ensure PostCSS Integration is Active

If you are compiling Less files through a bundler (like Vite, Webpack, or Rollup), ensure you are using the @tailwindcss/postcss plugin in your PostCSS configuration. This enables Tailwind v4 to parse the CSS output of the Less preprocessor.

3. Migrate to Native CSS (Recommended)

With Tailwind v4's native support for modern CSS features (including native nesting, imports, and variables), preprocessors like Less or Sass are largely redundant. The cleanest long-term migration path is to rename your .less files to .css and utilize standard CSS variables and nesting rules, which Tailwind v4 supports out of the box.

[DucMinhNe]

this isn't really a Less problem, Less passes @apply straight through untouched (it treats it as an unknown at-rule and just emits it). i tested it: lessc styles.less leaves @apply font-bold text-red-500 verbatim in the output. the failure comes one step later, when @tailwindcss/postcss processes that output.

what actually changed in v4: @apply no longer has access to your theme/utilities unless the file being processed can see them. your main entrypoint has @import "tailwindcss" so @apply works there, but a standalone .less file compiled on its own doesn't, so Tailwind throws Cannot apply unknown utility class .... the error message itself hints at the fix.

so the migration is mechanical, not a rewrite: add @reference to the top of each .less file that uses @apply, pointing at your main css:

@reference "../app.css";

.btn {
@apply font-bold text-red-500;
}

@reference imports your theme for resolution only, it doesn't duplicate any css into the output. if you're on the stock theme with no customizations you can even do @reference "tailwindcss" instead of pointing at your file.

i verified the whole chain on tailwindcss 4 + less: lessc -> @tailwindcss/postcss, and with @reference present the @apply resolves correctly (.btn comes out with font-weight: 700 and the red-500 color). without it you get exactly the unknown-utility error you're seeing.

ordering matters in your build: Less has to run before the Tailwind PostCSS plugin (Tailwind needs to see the compiled css). most setups already do this but worth confirming.

so for your large codebase it's basically: prepend one @reference line per .less file that uses @apply. that's the whole migration, no need to convert everything away from Less.

[Syaptiyan]

This is expected behavior in Tailwind CSS v4. Tailwind v4 is designed as a standalone CSS build tool and no longer works with preprocessors like Less or Sass. Here is your migration path:

Option 1: Convert .less files to .css (Recommended)

Tailwind v4 includes most features that Less provides:

• Variables: Use CSS custom properties (--variable: value)
• Nesting: Tailwind v4 supports native CSS nesting
• Mixins: Use @apply or CSS custom properties
• Functions: Use CSS functions or Tailwind utilities

Option 2: Use PostCSS with Less features

If you need Less-specific features, use PostCSS plugins:

npm install postcss postcss-nesting postcss-custom-properties

Option 3: Keep Less for non-Tailwind styles

Separate your styles:

1. Keep .less files for non-Tailwind styles
2. Use .css files for Tailwind styles
3. Import both in your app

Option 4: Use Tailwind v3 if migration is too hard

If you have a large codebase, you can stay on Tailwind v3:

npm install tailwindcss@3

Migration example:

// Before (Less)
@primary: #3b82f6;
.mixin() {
  padding: 1rem;
  margin: 1rem;
}

.button {
  color: @primary;
  .mixin();
  @apply text-white;
}

/* After (CSS with Tailwind v4) */
:root {
  --primary: #3b82f6;
}

.button {
  color: var(--primary);
  padding: 1rem;
  margin: 1rem;
  @apply text-white;
}

Automated migration:

You can use tools like less2css or write a script to convert Less variables to CSS custom properties.