Nuxt•3mo ago

Import theme error.

I'm using tailwind and to make it easier to organize my themas I've created a separate theme to make it easier to organize. So I created a style.css which has this content.

@import "tailwindcss";
@import "@/assets/css/theme.css";

@import "tailwindcss";
@import "@/assets/css/theme.css";

and my theme looks like this

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

@theme {
  --font-primary:"Nunito","sans-serif";
  --color-success: #72f75d;
  --color-error: #ff4e4e;
  --color-highlight-purple: #8a71f9;
  --color-background: #181622;
  --color-text: #fefefa;
  --color-highlight-yellow: #f6df48;
}

@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");

@theme {
  --font-primary:"Nunito","sans-serif";
  --color-success: #72f75d;
  --color-error: #ff4e4e;
  --color-highlight-purple: #8a71f9;
  --color-background: #181622;
  --color-text: #fefefa;
  --color-highlight-yellow: #f6df48;
}

nuxt is returning a warning message.

5 Replies

kapa.ai•3mo ago

Hi @x0sen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The warning you're seeing is likely due to the way you're using the @theme directive and the organization of your CSS imports. Key points from the knowledge sources: 1. The @theme directive is a Tailwind CSS v4 feature used to define design tokens (like colors and fonts) directly in your CSS. However, it should be used in your main CSS file (e.g., assets/css/main.css), not in a separately imported file like theme.css. Tailwind expects the @theme block to be present in the main entry CSS file so it can process the variables and generate the appropriate utilities and variants Nuxt UI Theme Docs. 2. Import order matters: You should import tailwindcss first, then any UI library (like @nuxt/ui or @nuxt/ui-pro), and then define your @theme block. If you split the @theme block into a separate file and import it, Tailwind may not process it correctly, leading to warnings or ignored variables Nuxt UI Theme Docs. Recommended structure: Instead of splitting your theme into a separate file, define your theme variables directly in your main CSS file. For example:

@import "tailwindcss";
@import "@nuxt/ui"; /* or "@nuxt/ui-pro" if using Pro */

@theme {
  --font-primary: "Nunito", "sans-serif";
  --color-success: #72f75d;
  --color-error: #ff4e4e;
  --color-highlight-purple: #8a71f9;
  --color-background: #181622;
  --color-text: #fefefa;
  --color-highlight-yellow: #f6df48;
}

@import "tailwindcss";
@import "@nuxt/ui"; /* or "@nuxt/ui-pro" if using Pro */

@theme {
  --font-primary: "Nunito", "sans-serif";
  --color-success: #72f75d;
  --color-error: #ff4e4e;
  --color-highlight-purple: #8a71f9;
  --color-background: #181622;
  --color-text: #fefefa;
  --color-highlight-yellow: #f6df48;
}

If you want to use a custom font from Google Fonts, you can still use @import url(...) at the top of your main CSS file. Summary:
Move your @theme block into your main CSS file (e.g., assets/css/main.css) and avoid importing it from a separate file. This should resolve the warning and ensure Tailwind processes your theme variables correctly Nuxt UI Theme Docs. If you need to organize your theme variables, consider using CSS custom properties in a separate file, but keep the @theme block in the main CSS file for Tailwind to recognize it. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

x0senOP•3mo ago

I not use NuxtUI @kapa.ai so you mean I should import my font url directly into style.css and just call it in my theme.css file?

kapa.ai•3mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Yes, you should import your font URL (such as from Google Fonts) directly into your main CSS file (e.g., style.css or main.css). Then, you can reference the font in your theme variables within the same file, inside the @theme block. The knowledge sources show that the recommended approach is to keep the @theme block in your main CSS file, not in a separate imported file. For example:

@import url("<https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap">);
@import "tailwindcss";
@import "@nuxt/ui"; /* if using Nuxt UI */

@theme {
  --font-primary: "Nunito", "sans-serif";
  /* other theme variables */
}

@import url("<https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap">);
@import "tailwindcss";
@import "@nuxt/ui"; /* if using Nuxt UI */

@theme {
  --font-primary: "Nunito", "sans-serif";
  /* other theme variables */
}

This way, Tailwind and Nuxt will correctly process your theme variables and fonts. Avoid splitting the @theme block into a separate file, as Tailwind expects it in the main entry CSS file Nuxt UI Theme Docs. If you want to organize your theme variables, you can use regular CSS custom properties in a separate file, but the @theme block itself should remain in the main CSS file for Tailwind to recognize it. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

Gaming

Programming

Import theme error.

Did you find this page helpful?