Nuxt•4w ago

UI v3: Styling is off (no rounded corners)

Hi guys, I just upgraded to Nuxt UI v3 following the migration guide. This worked so far, but I have one issue: All components are missing the normal rounded corners. Do you have any idea why that is?

9 Replies

kapa.ai•4w ago

Hi @StormiCParK. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt UI v3, the border radius system has changed significantly. The issue you're experiencing with missing rounded corners is likely related to how border radius is now implemented. Nuxt UI v3 uses a global CSS variable called --ui-radius for consistent border rounding across components. Components now use variations of this base value with calculations like rounded-[calc(var(--ui-radius)*2)] to create different levels of roundness. To fix your issue, you need to make sure this CSS variable is properly defined in your application. Here's how to set it up: 1. Make sure you have a main.css file in your project (typically in app/assets/css/main.css) that imports Tailwind CSS and Nuxt UI:

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

:root {
  --ui-radius: var(--radius-sm);
}

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

:root {
  --ui-radius: var(--radius-sm);
}

If you're using Nuxt UI Pro, use this instead:

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

:root {
  --ui-radius: var(--radius-sm);
}

@import "tailwindcss" theme(static);
@import "@nuxt/ui-pro";

:root {
  --ui-radius: var(--radius-sm);
}

2. Make sure this CSS file is imported in your nuxt.config.ts:

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

export default defineNuxtConfig({
  css: ['~/assets/css/main.css']
})

The default value uses Tailwind's radius tokens, but you can customize it to your preference. This change is part of the updated theming system in Nuxt UI v3, which now uses the Tailwind Variants API for styling components. Border Radius Documentation provides more details on this new approach. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

HugoRCD•4w ago

@StormiCParK Can you give more information, your main.css, nuxt.config or package.json for example ? 😁

StormiCParKOP•4w ago

main.css

@import 'tailwindcss';

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

@config '../../../tailwind.config.ts';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/

@theme static {
  --font-sans: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
}

@import 'tailwindcss';

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

@config '../../../tailwind.config.ts';

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/

@theme static {
  --font-sans: 'Geist', sans-serif;
  --font-mono: 'Geist Mono', monospace;
}

HugoRCD•4w ago

Which version of NuxtUI are you using?

StormiCParKOP•4w ago

3.0.1 Here is my nuxt config

// https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: "2024-07-04",
  devtools: { enabled: true },
  modules: [
    "@nuxt/ui",
    "@vueuse/nuxt",
    // "radix-vue/nuxt",
    "@nuxtjs/supabase",
    "shadcn-nuxt",
    "@pinia/nuxt",
    "@nuxt/test-utils/module",
    "@nuxt/eslint",
    "@nuxt/image",
  ],
  pinia: {
    storesDirs: ["./app/stores/**"],
  },
  css: ["~/assets/css/main.css"],
  vite: {
    plugins: [tailwindcss()],
  },
  colorMode: {
    preference: "light",
  },
  shadcn: {
    // Prefix for all the imported component
    prefix: "",
    // Directory that the component lives in.
    componentDir: "./app/components/ui",
  },
});

// https://nuxt.com/docs/api/configuration/nuxt-config
import tailwindcss from "@tailwindcss/vite";

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  compatibilityDate: "2024-07-04",
  devtools: { enabled: true },
  modules: [
    "@nuxt/ui",
    "@vueuse/nuxt",
    // "radix-vue/nuxt",
    "@nuxtjs/supabase",
    "shadcn-nuxt",
    "@pinia/nuxt",
    "@nuxt/test-utils/module",
    "@nuxt/eslint",
    "@nuxt/image",
  ],
  pinia: {
    storesDirs: ["./app/stores/**"],
  },
  css: ["~/assets/css/main.css"],
  vite: {
    plugins: [tailwindcss()],
  },
  colorMode: {
    preference: "light",
  },
  shadcn: {
    // Prefix for all the imported component
    prefix: "",
    // Directory that the component lives in.
    componentDir: "./app/components/ui",
  },
});

It looks like the "rounded" utility class is not working at all. A normal div with tha t class is also not rounded

HugoRCD•4w ago

You don't have to install the tailwind plugin, NuxtUI already does it for you automatically. And could you also send me your tailwind config? By the way, why not do as recommended in tailwind v4 and put everything in your main.css?

StormiCParKOP•4w ago

Thanks for the tip with the plugin. I found the issue. It is something in the tailwind.config.ts. When I comment out the import of it, it works. I will migrate the config to the main.css part by part and probably find out the core issue. Thank you very much for your time!!

HugoRCD•4w ago

Glad you found your bug and no problems 🙌

Gaming

Programming

UI v3: Styling is off (no rounded corners)

Did you find this page helpful?