NuxtUI: can't change style globally
I created an app.config.ts and the style is not changing. I restarted the server and everything, but the input stay the default Nuxt UI style.
Here is my form page
And here is my app.config.ts (placed at the root of my project)
Here is my form page
<template>
<NuxtLayout name="admin">
<main class="container mx-auto px-4 py-6">
<!-- Step Buttons -->
<div class="flex items-center justify-between gap-2 text-sm mb-6">
<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
<div class="space-y-6 bg-voxel-secondary p-6 rounded-2xl shadow">
<UFormField label="Email" name="email">
<UInput v-model="state.email" />
</UFormField>
<UFormField label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormField>
<UButton type="submit">
Submit
</UButton>
</div>
</UForm>
</div>
</main>
</NuxtLayout>
</template><template>
<NuxtLayout name="admin">
<main class="container mx-auto px-4 py-6">
<!-- Step Buttons -->
<div class="flex items-center justify-between gap-2 text-sm mb-6">
<UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
<div class="space-y-6 bg-voxel-secondary p-6 rounded-2xl shadow">
<UFormField label="Email" name="email">
<UInput v-model="state.email" />
</UFormField>
<UFormField label="Password" name="password">
<UInput v-model="state.password" type="password" />
</UFormField>
<UButton type="submit">
Submit
</UButton>
</div>
</UForm>
</div>
</main>
</NuxtLayout>
</template>And here is my app.config.ts (placed at the root of my project)
// app.config.ts
export default defineAppConfig({
ui: {
input: {
slots: {
base: 'text-red-200',
}
}
}
})// app.config.ts
export default defineAppConfig({
ui: {
input: {
slots: {
base: 'text-red-200',
}
}
}
})
