Nuxt/UI Custom Color Not Rendering
nuxt4
I've tried adding a few colors to app/assets/css/main.css as outlined in the guide:
I have then included them in my app.config.ts:
and my nuxt.config.ts:
However, when I attempt to use them for a button for example, they don't render at all on dev server? I can inspect via the dev console and see it exists:
Of note, I set the primary to "purple" and it still defaults to the green, so it's almost like it's not recognizing it at all?
@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
--color-twitch-50: #f5f3ff;
--color-twitch-100: #ede9fe;
--color-twitch-200: #ddd6fe;
--color-twitch-300: #c4b5fd;
--color-twitch-400: #a78bfa;
--color-twitch-500: #9146FF;
--color-twitch-600: #7c3aed;
--color-twitch-700: #6d28d9;
--color-twitch-800: #5b21b6;
--color-twitch-900: #4c1d95;
--color-twitch-950: #2e1065;
--color-kick-50: #f0fef4;
--color-kick-100: #dcfce8;
--color-kick-200: #bbf7d1;
--color-kick-300: #86efac;
--color-kick-400: #4ade80;
--color-kick-500: #53FC18;
--color-kick-600: #16a34a;
--color-kick-700: #15803d;
--color-kick-800: #166534;
--color-kick-900: #14532d;
--color-kick-950: #052e16;
--color-paypal-50: #eff6ff;
--color-paypal-100: #dbeafe;
--color-paypal-200: #bfdbfe;
--color-paypal-300: #93c5fd;
--color-paypal-400: #60a5fa;
--color-paypal-500: #0070BA;
--color-paypal-600: #2563eb;
--color-paypal-700: #1d4ed8;
--color-paypal-800: #1e40af;
--color-paypal-900: #1e3a8a;
--color-paypal-950: #172554;
}@import "tailwindcss";
@import "@nuxt/ui";
@theme static {
--color-twitch-50: #f5f3ff;
--color-twitch-100: #ede9fe;
--color-twitch-200: #ddd6fe;
--color-twitch-300: #c4b5fd;
--color-twitch-400: #a78bfa;
--color-twitch-500: #9146FF;
--color-twitch-600: #7c3aed;
--color-twitch-700: #6d28d9;
--color-twitch-800: #5b21b6;
--color-twitch-900: #4c1d95;
--color-twitch-950: #2e1065;
--color-kick-50: #f0fef4;
--color-kick-100: #dcfce8;
--color-kick-200: #bbf7d1;
--color-kick-300: #86efac;
--color-kick-400: #4ade80;
--color-kick-500: #53FC18;
--color-kick-600: #16a34a;
--color-kick-700: #15803d;
--color-kick-800: #166534;
--color-kick-900: #14532d;
--color-kick-950: #052e16;
--color-paypal-50: #eff6ff;
--color-paypal-100: #dbeafe;
--color-paypal-200: #bfdbfe;
--color-paypal-300: #93c5fd;
--color-paypal-400: #60a5fa;
--color-paypal-500: #0070BA;
--color-paypal-600: #2563eb;
--color-paypal-700: #1d4ed8;
--color-paypal-800: #1e40af;
--color-paypal-900: #1e3a8a;
--color-paypal-950: #172554;
}I have then included them in my app.config.ts:
export default defineAppConfig({
ui: {
colors: {
primary: "purple",
secondary: "violet",
success: "emerald",
info: "blue",
warning: "yellow",
error: "rose",
neutral: "gray",
twitch: "twitch",
kick: "kick",
paypal: "paypal",
},
}
})export default defineAppConfig({
ui: {
colors: {
primary: "purple",
secondary: "violet",
success: "emerald",
info: "blue",
warning: "yellow",
error: "rose",
neutral: "gray",
twitch: "twitch",
kick: "kick",
paypal: "paypal",
},
}
})and my nuxt.config.ts:
css: [
'~/assets/css/main.css'
],
ui: {
theme: {
colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral', 'paypal', 'twitch', 'kick']
}
}, css: [
'~/assets/css/main.css'
],
ui: {
theme: {
colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error', 'neutral', 'paypal', 'twitch', 'kick']
}
},However, when I attempt to use them for a button for example, they don't render at all on dev server? I can inspect via the dev console and see it exists:
<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-paypal hover:bg-paypal/75 active:bg-paypal/75 disabled:bg-paypal aria-disabled:bg-paypal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-paypal"><span class="iconify i-simple-icons:paypal shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span> Pay $10 with PayPal <!--v-if--></button><button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 w-full justify-center text-inverted bg-paypal hover:bg-paypal/75 active:bg-paypal/75 disabled:bg-paypal aria-disabled:bg-paypal focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-paypal"><span class="iconify i-simple-icons:paypal shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span> Pay $10 with PayPal <!--v-if--></button>Of note, I set the primary to "purple" and it still defaults to the green, so it's almost like it's not recognizing it at all?
