tailwindcss at-rule error in the style tag of the vue file.

[Iran-110]

If we use at-rule in the vue file, the plugin will stop building the application.

<script setup lang="ts">

</script>

<template>
  <div class="my-2 mx-auto container">
    <div class="card">
      Hello
    </div>
  </div>
</template>

<style scoped>
.card {
  @apply border border-gray-300 bg-gray-50 rounded p-3;  /* <<- cause of the error */
}
</style>

Nuxt project info:

---

• Operating System: Linux
• Node Version: v20.10.0
• Nuxt Version: 3.9.3
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: [email protected]
• Builder: -

---

[5:25:08 PM]  ERROR  [vite:css] [postcss] /tw-mangle-test/pages/index.vue?vue&type=style&index=0&scoped=531a26c4&lang.css:3:3: The tw-a class does not exist. If tw-a is a custom class, make sure it is defined within a @layer directive.
file: /home/yafateme/WebstormProjects/tw-mangle-test/pages/index.vue?vue&type=style&index=0&scoped=531a26c4&lang.css:3:2


[5:25:08 PM]  ERROR  Nuxt Build Error: [postcss] /home/yafateme/WebstormProjects/tw-mangle-test/pages/index.vue?vue&type=style&index=0&scoped=531a26c4&lang.css:3:3: The tw-a class does not exist. If tw-a is a custom class, make sure it is defined within a @layer directive.

  at Input.error (node_modules/postcss/lib/input.js:106:16)
  at AtRule.error (node_modules/postcss/lib/node.js:115:32)
  at processApply (node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:380:29)
  at node_modules/tailwindcss/lib/lib/expandApplyAtRules.js:538:9
  at node_modules/tailwindcss/lib/processTailwindFeatures.js:61:46
  at async plugins (node_modules/tailwindcss/lib/plugin.js:41:29)
  at async LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:261:11)
  at async compileCSS (node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:40337:25)
  at async Object.transform (node_modules/vite/dist/node/chunks/dep-V3BH7oO1.js:39710:56)
  at async node_modules/vite-plugin-inspect/dist/index.mjs:376:17
  at async transform (node_modules/rollup/dist/es/shared/node-entry.js:17593:16)
  at async ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:17810:36)

[Iran-110]

Demo: https://github.com/Iran-110/tw-mangle-test/tree/at-rule

[sonofmagic]

Thanks for the demo, it seems to require special processing of vue files. For example, I need to parse the vue file and convert it into ast, and then do the obfuscation separately.

This will be in the future!

[Iran-110]

Thanks for your response. I checked the stack trace and found that the source of the error is in the processApply function in the expandApplyAtRules.js:380:29 file.

if (!applyClassCache.has(applyCandidate)) {
  throw apply.error(`The \`${applyCandidate}\` class does not exist. If \`${applyCandidate}\` is a custom class, make sure it is defined within a \`@layer\` directive.`);
}

It seems that the application wants to load the obfuscated class name from the cache (here tw-a). In this situation, if the class name is not found, the app. will throw an error.

[neonarc4]

@Iran-110 assalam why it doesnt work

[Iran-110]

@neonarc4 salamon alaykom. I think you are running your project in development mode and this plugin seems to have limitations in that mode.

It's explained in the unplugin-tailwindcss-mangle repository page: