diff --git a/.changeset/strange-tips-work.md b/.changeset/strange-tips-work.md new file mode 100644 index 00000000000..f7d629e10e3 --- /dev/null +++ b/.changeset/strange-tips-work.md @@ -0,0 +1,5 @@ +--- +'@astrojs/starlight-tailwind': patch +--- + +Adds warning log if a user tries to set `colors.white` in their Tailwind theme config with an object instead of a string. diff --git a/packages/tailwind/index.ts b/packages/tailwind/index.ts index 52b4e4c4c7d..fc11b9eb2af 100644 --- a/packages/tailwind/index.ts +++ b/packages/tailwind/index.ts @@ -49,6 +49,16 @@ const StarlightTailwindPlugin = () => ? theme(`colors.accent.${shade}`, theme(`colors.accent.900`, fallback)) : theme(`colors.accent.${shade}`, fallback); + let white: string = theme('colors.white'); + if (typeof white !== 'string') { + console.warn( + `Expected \`colors.white\` in Tailwind theme to be a string, received ${typeof white}.\n` + + `Try setting a single value, for example \`white: '#fafaf9'\` or \`white: colors.stone[50]\`.` + ); + // Ensure a usable value for white if the user-configured one is wrong. + white = '#fff'; + } + addBase({ // Restore crucial styles from Tailwind Preflight: https://tailwindcss.com/docs/preflight // Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) @@ -65,7 +75,7 @@ const StarlightTailwindPlugin = () => '--sl-font': theme('fontFamily.sans'), '--sl-font-mono': theme('fontFamily.mono'), // Dark mode Starlight theme variables. - '--sl-color-white': theme('colors.white'), + '--sl-color-white': white, '--sl-color-gray-1': theme('colors.gray.200'), '--sl-color-gray-2': theme('colors.gray.300'), '--sl-color-gray-3': theme('colors.gray.400'), @@ -86,7 +96,7 @@ const StarlightTailwindPlugin = () => '--sl-color-gray-5': theme('colors.gray.300'), '--sl-color-gray-6': theme('colors.gray.200'), '--sl-color-gray-7': theme('colors.gray.100'), - '--sl-color-black': theme('colors.white'), + '--sl-color-black': white, '--sl-color-accent-low': themeAccent(200, '#c7d2fe'), '--sl-color-accent': themeAccent(600, '#4f46e5'), '--sl-color-accent-high': themeAccent(900, '#312e81'),