StormiCParK
StormiCParK
NNuxt
Created by StormiCParK on 3/23/2025 in #❓・help
UI v3: Styling is off (no rounded corners)
Thank you very much for your time!!
15 replies
NNuxt
Created by StormiCParK on 3/23/2025 in #❓・help
UI v3: Styling is off (no rounded corners)
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.
15 replies
NNuxt
Created by StormiCParK on 3/23/2025 in #❓・help
UI v3: Styling is off (no rounded corners)
It looks like the "rounded" utility class is not working at all. A normal div with tha t class is also not rounded
15 replies
NNuxt
Created by StormiCParK on 3/23/2025 in #❓・help
UI v3: Styling is off (no rounded corners)
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",
},
});
15 replies
NNuxt
Created by StormiCParK on 3/23/2025 in #❓・help
UI v3: Styling is off (no rounded corners)
3.0.1
15 replies
NNuxt
Created by StormiCParK on 3/23/2025 in #❓・help
UI v3: Styling is off (no rounded corners)
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;
}
15 replies