Nuxt•2d ago

Error on Postcss if I want to use custom classes with tailwind on Nuxt3

So I have a component that I'm using tailwind, some of the classes are customised, and they're already inside @layer components {}, so I can use them:

something {
@apply text-title1;
}

something {
@apply text-title1;
}

for some reason, everytime I refresh i got an error from posts, but only when I hard refresh during development [postcss] The text-title1 class does not exist. If text-title1 is a custom class, make sure it is defined within a @layer directive. I'm trying to use shadcn-nuxt in nuxt3. Attached is my custom class in assets/css/tailwind.css and also the nuxt config with the various modules. So what am I missing here? Thanks

3 Replies

kapa.ai•2d ago

Hi @pedropcruz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I don't have enough specific details to fully address your issue with custom Tailwind classes in Nuxt 3. However, I can provide some general guidance and suggestions based on the available information. 1. Ensure your custom classes are properly defined: Make sure your custom classes are correctly defined in your assets/css/tailwind.css file within the appropriate @layer directive. For example:

   @layer components {
     .text-title1 {
       /* Your custom styles here */
     }
   }

   @layer components {
     .text-title1 {
       /* Your custom styles here */
     }
   }

2. Check your Nuxt configuration: Verify that your nuxt.config.ts file is correctly set up to use Tailwind CSS and PostCSS. Here's an example of how it might look:

   export default defineNuxtConfig({
     css: ["~/assets/css/tailwind.css"],
     postcss: {
       plugins: {
         tailwindcss: {},
         autoprefixer: {},
       },
     },
     // other configurations...
   });

   export default defineNuxtConfig({
     css: ["~/assets/css/tailwind.css"],
     postcss: {
       plugins: {
         tailwindcss: {},
         autoprefixer: {},
       },
     },
     // other configurations...
   });

3. Tailwind CSS module: If you're using the @nuxtjs/tailwindcss module, make sure it's properly installed and configured in your nuxt.config.ts file:

   export default defineNuxtConfig({
     modules: ['@nuxtjs/tailwindcss'],
     // other configurations...
   });

   export default defineNuxtConfig({
     modules: ['@nuxtjs/tailwindcss'],
     // other configurations...
   });

4. PostCSS version: Ensure you're using a compatible version of PostCSS. According to the Nuxt documentation on PostCSS configuration, Nuxt uses the same options as postcss-loader. 5. Build process: The error you're seeing on hard refresh during development might be related to how Nuxt is processing your CSS files. Try running a full rebuild of your project to see if that resolves the issue. 6. Check for conflicts: Since you're using shadcn-nuxt, make sure there are no conflicts between your custom Tailwind setup and the shadcn-nuxt configuration. If the issue persists after checking these points, you might want to create a minimal reproduction of the problem and share it on the Nuxt GitHub issues page for more specific assistance from the Nuxt community or core team. Remember that the error message suggests that the text-title1 class is not being recognized. Double-check that this class is indeed defined in your CSS files and that it's being properly loaded and processed by Nuxt and Tailwind. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@349573626447659008> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

pedropcruzOP•this hour

Anyone can help me out with this? Thank you

Gaming

Programming

Error on Postcss if I want to use custom classes with tailwind on Nuxt3

Did you find this page helpful?