diff --git a/src/colors.ts b/src/colors.ts index f4024789..daf54e57 100644 --- a/src/colors.ts +++ b/src/colors.ts @@ -204,7 +204,7 @@ const colorsAsRegex = (colors: string[]): string => colors.join('|') export const excludeColors = (colors: object) => Object.keys(omit(colors, colorsToExclude)).map(color => kebabCase(color)) as string[] -export const generateSafelist = (colors: string[]) => { +export const generateSafelist = (colors: string[], globalColors) => { const baseSafelist = Object.keys(safelistByComponent).flatMap(component => safelistByComponent[component](colorsAsRegex(colors))) // Ensure `red` color is safelisted for form elements so that `error` prop of `UFormGroup` always works @@ -213,6 +213,8 @@ export const generateSafelist = (colors: string[]) => { return [ ...baseSafelist, ...formsSafelist, + // Ensure all global colors are safelisted for the Notification (toast.add) + ...safelistByComponent['notification'](colorsAsRegex(globalColors)), // Gray safelist for Avatar & Notification 'bg-gray-500', 'dark:bg-gray-400', diff --git a/src/module.ts b/src/module.ts index 6c830321..f64612af 100644 --- a/src/module.ts +++ b/src/module.ts @@ -123,7 +123,7 @@ export default defineNuxtModule({ } tailwindConfig.safelist = tailwindConfig.safelist || [] - tailwindConfig.safelist.push(...generateSafelist(options.safelistColors)) + tailwindConfig.safelist.push(...generateSafelist(options.safelistColors, colors)) tailwindConfig.plugins = tailwindConfig.plugins || [] tailwindConfig.plugins.push(iconsPlugin({ collections: getIconCollections(options.icons as any[]) }))