V4 prefix function, nextjs 14 webpack error

[Moonachi]

package version

{
 "tailwindcss": "^4.1.3",
 "@tailwindcss/postcss": "^4.1.3",
 "next": "14",
 "react": "18.2.0",
}

Code

I just wrote below code in globals.css

@import "tailwindcss" prefix(tw);

Error

../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./styles/globals.css
Error: Cannot apply unknown utility class: absolute
Import trace for requested module:
../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./styles/globals.css
./styles/globals.css

It works fine when using @import "tailwindcss" only.
However, when I change it to @import "tailwindcss" prefix(tw);, I see the error message above.

If you happen to know how to resolve this, I'd appreciate your help.

[wongjn]

You'd need to apply the prefix to your @apply usage:

@apply tw:absolute;

[Moonachi]

I’m sorry, I didn’t check properly.

Even with the following code:

@import "tailwindcss" prefix(tw);
@apply tw:absolute;

An error still occurs.

../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[1]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[6].oneOf[14].use[2]!./styles/globals.css
Error: Cannot apply unknown utility class: absolute

[wongjn]

Consider checking there are no other usages of @apply absolute. Otherwise, consider providing a git repo that reproduces the unexpected behavior.

[Moonachi]

I reviewed my code and noticed that I wasn't actually using the @apply-generated className, so I removed it. That resolved the issue since the error wasn't relevant anymore.

I have one more question. As I understand it, using a prefix (like tw) is meant to avoid className collisions. In that case, is it technically possible to use both prefixed and non-prefixed classNames together in the same project? If so, how should that be configured?

[wongjn]

You'd have two stylesheets, one with:

@import "tailwindcss";

The other with:

@import "tailwindcss" prefix(tw);

Or to avoid duplicate CSS rules:

@import "tailwindcss/theme.css" prefix(tw) layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);

Then ensure these are separate CSS compilation "threads" by not @importing them together. You'd import them in the app code separately, like:

import "./path/to/stylesheet-one.css";
import "./path/to/stylesheet-two.css";

[Moonachi]

I tried the first method, but it seems that using both prefix and not prefix in a single project is not possible.