diff --git a/src/module.ts b/src/module.ts
index 70e5fb45af..8ec74d02d6 100644
--- a/src/module.ts
+++ b/src/module.ts
@@ -121,7 +121,7 @@ export default defineNuxtModule<ModuleOptions>({
       }
 
       tailwindConfig.safelist = tailwindConfig.safelist || []
-      tailwindConfig.safelist.push(...[{
+      tailwindConfig.safelist.push(...['bg-gray-400', {
         pattern: new RegExp(`bg-(${safeColorsAsRegex})-(50|400|500)`)
       }, {
         pattern: new RegExp(`bg-(${safeColorsAsRegex})-500`),
diff --git a/src/runtime/components/elements/Avatar.vue b/src/runtime/components/elements/Avatar.vue
index 7492d4a4cc..9eb2440f5d 100644
--- a/src/runtime/components/elements/Avatar.vue
+++ b/src/runtime/components/elements/Avatar.vue
@@ -45,7 +45,7 @@ export default defineComponent({
       type: String,
       default: null,
       validator (value: string) {
-        return appConfig.ui.colors.includes(value)
+        return ['gray', ...appConfig.ui.colors].includes(value)
       }
     },
     chipVariant: {