How to create custom utility classes using @apply?

[AgarwalPragy]

I've the following code to create a custom button style

<button>Hello</button>

<style lang="postcss">
  button {
    @apply btn btn-ghost-surface hover:btn-filled-primary w-full;
  }
</style>

This works on the dev server, but fails when doing pnpm build with the error

vite v4.0.4 building for production...
...
[vite-plugin-svelte] Error while preprocessing src/routes/login/+page.svelte - [postcss] src/routes/login/+page.svelte.postcss:3:5:
The `btn` class does not exist. If `btn` is a custom class, make sure it is defined within a `@layer` directive.
file: src/routes/login/+page.svelte
error during build:
CssSyntaxError: Error while preprocessing src/routes/login/+page.svelte - [postcss] src/routes/login/+page.svelte.postcss:3:5: 
The `btn` class does not exist. If `btn` is a custom class, make sure it is defined within a `@layer` directive.
    at Input.error (node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/input.js:148:16)
    at AtRule.error (node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/node.js:60:32)
    at processApply (node_modules/.pnpm/tailwindcss@3.2.4_postcss@8.4.21/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:376:29)
    at node_modules/.pnpm/tailwindcss@3.2.4_postcss@8.4.21/node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:524:9
    at node_modules/.pnpm/tailwindcss@3.2.4_postcss@8.4.21/node_modules/tailwindcss/lib/processTailwindFeatures.js:55:50
    at plugins (node_modules/.pnpm/tailwindcss@3.2.4_postcss@8.4.21/node_modules/tailwindcss/lib/index.js:38:63)
    at LazyResult.runOnRoot (node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (node_modules/.pnpm/postcss@8.4.21/node_modules/postcss/lib/lazy-result.js:206:17)
 ELIFECYCLE  Command failed with exit code 1.

[endigo9740]

@AgarwalPragy This is standard behavior for Tailwind. They do not allow component classes to be implemented with @apply. Component classes, like our button classes, are not the same as Tailwind's utility classes. Move those classes inline for your button and it will resolve the issue.

<button class="btn btn-ghost-surface hover:btn-filled-primary w-full">Hello</button>

This is the approach Tailwind recommends:
https://tailwindcss.com/docs/utility-first#overview

Additionally we provide some tips for handling global styling here if it helps:
https://www.skeleton.dev/blog/deep-dive-skeleton-styling