From 4505d52cda17dccbf7b4dd571984e6750c93f1b8 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Mon, 8 Apr 2024 19:53:50 +0200
Subject: [PATCH 1/2] Add warning to Tailwind plugin if `colors.white` is not a
 string

---
 packages/tailwind/index.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

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'),

From a2180cb9f4dfe63a1bba4f412309179fb12f1e45 Mon Sep 17 00:00:00 2001
From: Chris Swithinbank <swithinbank@gmail.com>
Date: Mon, 8 Apr 2024 19:55:05 +0200
Subject: [PATCH 2/2] Add changeset

---
 .changeset/strange-tips-work.md | 5 +++++
 1 file changed, 5 insertions(+)
 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 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.