#@nuxt/ui issue with tailwind classes.

3 messages · Page 1 of 1 (latest)

winter jasperBOT
#

Hi @pure elk. 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 directly address your issue with the bg-gray-200/75 class transformation in the Modal component. However, I can provide some general guidance and suggestions based on the Nuxt UI theming documentation.

The issue you're experiencing might be related to how Tailwind CSS and Nuxt UI are configured in your project. Here are a few things you can check:

  1. CSS Variables:
    Nuxt UI v3 uses CSS variables for theming. Make sure you have properly set up your CSS variables, especially for the gray color scale. You can do this in your main.css file using the @theme directive as shown in the Nuxt UI Pro Theming documentation.

  2. Tailwind Configuration:
    Ensure that your Tailwind configuration is correctly set up. In Nuxt UI v3, you should be using CSS-first theming instead of a tailwind.config.ts file. Remove your tailwind.config.ts if you have one and use CSS variables instead.

  3. CSS Imports:
    Make sure you have correctly imported Tailwind CSS and Nuxt UI in your CSS file. Your main.css should look something like this:

    @import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --color-gray-200: 229 231 235; /* Adjust these values as needed */
  /* Other color variables... */
}

  4. App Config:
    Check your app.config.ts file to ensure you haven't accidentally overridden any default styles for the Modal component.

  5. Version Compatibility:
    You mentioned you're using "@nuxt/ui": "2.21.0" and "nuxt": "3.11.2". Make sure these versions are compatible with each other and that you're following the correct documentation for your version of Nuxt UI.

#

If you've checked all of these and are still experiencing issues, you might want to consider opening an issue on the Nuxt UI GitHub repository with a minimal reproduction of your problem.

For more detailed information on theming and configuration, you can refer to the Nuxt UI Theming documentation.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: