Sometimes I get the error when using the custom TailwindCSS class with @apply in my Nuxt 3 component <styles>. The issue is during the build npm run generate or npm run build but most of the time it does not throw any error. Unable to identify why I get the issue only sometimes and not every time.

I get the following error when using the custom styles within Nuxt 3 component <styles>:

The custom-fill class does not exist. If custom-fill is a custom class, make sure it is defined within a @layer directive.

I have defined this custom style within my assets/css/${cssFolder}/styles.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
}

@layer components {
  .custom-button{
    @apply bg-white border-[#3B83E4];
  }
  .custom-fill{
    @apply fill-[#3B83E4];
  }
}

@layer utilities {
}

I have added the CSS styles in my nuxt.config.css and I am using the different styles based on my environment variables:

css: [customCSS(process.env.CSS)],

function customCSS(cssFolder) {
  return `~/assets/css/${cssFolder}/styles.css`;
}

I have verified the path and it’s correct because other custom styles and even the custom-fill work fine and only sometimes do I get the issue with missing error.

If I am using my other custom styles within the <template> section and they work perfectly without any issue I am noticing that sometimes when I use the custom styles within my Nuxt 3 component <styles> section of the Nuxt 3 component then I get the error.

For example, if I use the custom styles within my directly then I don’t see any issue during the build:

<template>
    <div class="mb-2">
      <button type="button" @click="addObj" class="flex custom-button"> Test Button 
      </button>
    </div>
</template>

But If I use the custom styles within my Nuxt 3 component <styles> section then I get the above error during the build but only sometimes:

<template>
  <div class="flex flex-col items-center">
    <Field>
      <v-select
        ref="selectDropdownRef"
        v-model="item"
        :options="options"
      >
        <template #search="{ attributes, events }">
          <input
            class="vs__search w-full"
            v-bind="attributes"
            v-on="events"
          />
        </template>
      </v-select>
    </Field>
  </div>
</template>
          
<script setup>
import { Field, ErrorMessage } from "vee-validate";
import vSelect from "vue-select";
</script>
        
<style src="vue-select/dist/vue-select.css"></style>
  
<style>
.vs__clear svg {
  @apply custom-fill hidden;
}

.vs__open-indicator {
  @apply custom-fill;
}
</style>

I believe the custom styles are kicking in correctly because they work and can see the provided colour on the component so there seems to be no issue concerning setting up custom Tailwind CSS classes.

I am using the “@nuxtjs/tailwindcss”: “^6.7.0”, and “tailwindcss”: “^3.4.4”, within my application and added tot he modules in nuxt.config.ts: modules: [“@nuxtjs/tailwindcss”,

How do you use the tailwind CSS custom styles within the <styles> and not get the build issue? And why do I get the issue sometimes and not many of the time? Unable to properly reproduce the issue?

I tried the solutions mentioned in other answers but they did not work for me: tailwind: how to use @apply for custom class in nuxt2?