[v4] How to use custom utility class with CSS module on Next.js?

[ryuapp]

In v3, custom css was defined and used in a plugin, but in v4 it seems to be invalid, so I defined a class in @layer.
However, CSS module cannot recognize it. Do you know how to work it?

/* globals.css */
@import "tailwindcss";

@layer button {
  .btn {
    @apply px-4 py-2 bg-blue-500 text-white rounded;
  }
}

/* module.css */
@reference "./globals.css";

.helloWorldButton {
  @apply btn;
}

Error Code:

Error evaluating Node.js code
CssSyntaxError: C:\xxxx\next-tailwindcss-module-css\app\hello-world.module.css:2:3: The `btn` class does not exist. If `btn` is a custom class, make sure it is defined within a `@layer` directive.
    [at Input.error (turbopack://[project]/node_modules/postcss/lib/input.js:109:16)]
    [at AtRule.error (turbopack://[project]/node_modules/postcss/lib/node.js:145:32)]
    [at processApply (C:\xxxx\next-tailwindcss-module-css\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:380:29)]
    [at C:\xxxx\next-tailwindcss-module-css\node_modules\tailwindcss\lib\lib\expandApplyAtRules.js:551:9]
    [at C:\xxxx\next-tailwindcss-module-css\node_modules\tailwindcss\lib\processTailwindFeatures.js:55:50]
    [at process.processTicksAndRejections (node:internal/process/task_queues:105:5)]
    [at async plugins (C:\xxxx\next-tailwindcss-module-css\node_modules\tailwindcss\lib\plugin.js:38:17)]
    [at async LazyResult.runAsync (turbopack://[project]/node_modules/postcss/lib/lazy-result.js:261:11)]
    [at async transform (turbopack://[project]/postcss.config.mjs/transform.ts:79:34)]
    [at async run (turbopack://[turbopack-node]/ipc/evaluate.ts:92:23)]

Reproduction repo:
https://github.com/ryuapp/next-tailwindcss-module-css

[wongjn]

You'd use @utility in v4:

@utility btn {
  @apply px-4 py-2 bg-blue-500 text-white rounded;
}

[ryuapp]

Thank you. I would like to ask one additional point:
With the current configuration, if the class to be used does not exist, the css will not be applied.
I'm trying to detect with @source, but it doesn't work.
In the worst case, I create a file to generate them, but is there any solution in css?

[wongjn]

You'd create a file to generate them. Though really, you should consider avoiding CSS modules altogether and using Tailwind classes directly in your components where possible. Use your components as components to keep things DRY, instead of @apply in the CSS.

---

As an aside, Adam Wathan (creator of Tailwind) does seem to advocate avoiding @apply:

• https://twitter.com/adamwathan/status/1226511611592085504
• https://twitter.com/adamwathan/status/1559250403547652097

[ryuapp]

Ok. I understand that they are not a best practice as they are used temporarily for project compatibility.
Thank you for your politeness.