From 1aae51ac512df8de088c7529236e196be42077e8 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank
Date: Tue, 9 Apr 2024 13:15:15 +0200
Subject: Add warning to Tailwind plugin if `colors.white` is not a string
 (#1726)

---
 .changeset/strange-tips-work.md |  5 +++++
 packages/tailwind/index.ts      | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/strange-tips-work.md

diff --git a/.changeset/strange-tips-work.md b/.changeset/strange-tips-work.md
new file mode 100644
index 00000000..f7d629e1
--- /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 52b4e4c4..fc11b9eb 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'),
-- 
cgit