tw4: cleanup/improve error messaging

packages/cli/src/commands/init/preflight.ts

@@ -1,6 +1,9 @@
+import { TW3_SITE_BASE_URL, SITE_BASE_URL } from "../../constants.js";
 import * as semver from "semver";
 import { loadProjectPackageInfo } from "../../utils/get-package-info.js";
 import { error } from "../../utils/errors.js";
+import color from "chalk";
+import { highlight } from "../../utils/utils.js";
 
 /**
  * Runs preflight checks for the `init` command.
@@ -22,7 +25,9 @@ export function preflightInit(cwd: string) {
 
 function checkInitDependencies(dependencies: Partial<Record<string, string>>) {
 	if (!dependencies.tailwindcss || !dependencies.svelte) {
-		throw error(`This CLI version requires Tailwind CSS v4 and Svelte v5.\n`);
+		throw error(
+			`This CLI version requires Tailwind CSS v4 and Svelte v5 to initialize a project.\n`
+		);
 	}
 
 	const isTailwind3 = semver.satisfies(semver.coerce(dependencies.tailwindcss) || "", "^3.0.0");
@@ -34,10 +39,15 @@ function checkInitDependencies(dependencies: Partial<Record<string, string>>) {
 	// `init` is only supported for Tailwind v4 and Svelte v5
 	if (isTailwind3 && isSvelte5) {
 		throw error(
-			`You are using Tailwind CSS v3 with Svelte v5.\n\n` +
+			`Initializing a project with Tailwind v3 is not supported.\n\n` +
+				`This CLI version requires Tailwind v4 and Svelte v5 for the ` +
+				`${highlight("init")} command.\n\n` +
 				`You have two options:\n` +
 				`1. Update Tailwind CSS to v4 and try again.\n` +
-				`2. Use shadcn-svelte@<TODO: version> that supports Tailwind v3.\n\n`
+				`2. Use ${highlight("shadcn-svelte@1.0.0-next.9")} that supports initializing projects with Tailwind v3.\n\n` +
+				`References:\n` +
+				`Tailwind v4 Guide: ${color.underline(`${SITE_BASE_URL}/docs/migration/tailwind-v4`)}\n` +
+				`Legacy Tailwind v3 Docs: ${color.underline(`${TW3_SITE_BASE_URL}/docs`)}\n\n`
 		);
 	}
 
@@ -46,15 +56,18 @@ function checkInitDependencies(dependencies: Partial<Record<string, string>>) {
 	// TODO: add link to upgrade guide?
 	if (isTailwind3 && isSvelte4) {
 		throw error(
-			`You are using Tailwind CSS v3 with Svelte v4.\n\n` +
-				`This CLI version requires Tailwind CSS v4 and Svelte v5.\n` +
-				`Please use shadcn-svelte@<TODO: version> that supports Tailwind v3 + Svelte v4.\n\n`
+			`Initializing a project with Tailwind v3 and Svelte v4 is not supported.\n\n` +
+				`This CLI version requires Tailwind v4 and Svelte v5 for the ` +
+				`${highlight("init")} command.\n\n` +
+				`Please use ${highlight("shadcn-svelte@0.14.2")} that supports Tailwind v3 + Svelte v4.\n\n`
 		);
 	}
 
 	// if not Tailwind v4 and Svelte v5 by this point, they are using Tailwind v4 and Svelte v4
 	// which is kinda cursed
 	if (!isTailwind4 || !isSvelte5) {
-		throw error(`This CLI version requires Tailwind CSS v4 and Svelte v5.\n`);
+		throw error(
+			`This CLI version requires Tailwind CSS v4 and Svelte v5 to initialize a project.\n`
+		);
 	}
 }

packages/cli/test/utils/preflight-init.test.ts

@@ -1,6 +1,9 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { loadProjectPackageInfo } from "../../src/utils/get-package-info.js";
 import { preflightInit } from "../../src/commands/init/preflight.js";
+import { highlight } from "../../src/utils/utils";
+import color from "chalk";
+import { SITE_BASE_URL, TW3_SITE_BASE_URL } from "../../src/constants";
 
 vi.mock("../../src/utils/get-package-info.js");
 
@@ -19,10 +22,15 @@ describe("preflightInit", () => {
 		});
 
 		expect(() => preflightInit("/test")).toThrow(
-			"You are using Tailwind CSS v3 with Svelte v5.\n\n" +
-				"You have two options:\n" +
-				"1. Update Tailwind CSS to v4 and try again.\n" +
-				"2. Use shadcn-svelte@<TODO: version> that supports Tailwind v3.\n\n"
+			`Initializing a project with Tailwind v3 is not supported.\n\n` +
+				`This CLI version requires Tailwind v4 and Svelte v5 for the ` +
+				`${highlight("init")} command.\n\n` +
+				`You have two options:\n` +
+				`1. Update Tailwind CSS to v4 and try again.\n` +
+				`2. Use ${highlight("shadcn-svelte@1.0.0-next.9")} that supports initializing projects with Tailwind v3.\n\n` +
+				`References:\n` +
+				`Tailwind v4 Guide: ${color.underline(`${SITE_BASE_URL}/docs/migration/tailwind-v4`)}\n` +
+				`Legacy Tailwind v3 Docs: ${color.underline(`${TW3_SITE_BASE_URL}/docs`)}\n\n`
 		);
 	});
 
@@ -36,9 +44,10 @@ describe("preflightInit", () => {
 		});
 
 		expect(() => preflightInit("/test")).toThrow(
-			"You are using Tailwind CSS v3 with Svelte v4.\n\n" +
-				"This CLI version requires Tailwind CSS v4 and Svelte v5.\n" +
-				"Please use shadcn-svelte@<TODO: version> that supports Tailwind v3 + Svelte v4.\n\n"
+			`Initializing a project with Tailwind v3 and Svelte v4 is not supported.\n\n` +
+				`This CLI version requires Tailwind v4 and Svelte v5 for the ` +
+				`${highlight("init")} command.\n\n` +
+				`Please use ${highlight("shadcn-svelte@0.14.2")} that supports Tailwind v3 + Svelte v4.\n\n`
 		);
 	});
 
@@ -52,7 +61,7 @@ describe("preflightInit", () => {
 		});
 
 		expect(() => preflightInit("/test")).toThrow(
-			"This CLI version requires Tailwind CSS v4 and Svelte v5.\n"
+			`This CLI version requires Tailwind CSS v4 and Svelte v5 to initialize a project.\n`
 		);
 	});
 
@@ -88,7 +97,7 @@ describe("preflightInit", () => {
 		});
 
 		expect(() => preflightInit("/test")).toThrow(
-			"This CLI version requires Tailwind CSS v4 and Svelte v5.\n"
+			`This CLI version requires Tailwind CSS v4 and Svelte v5 to initialize a project.\n`
 		);
 	});
 });

v4/src/lib/registry/charts/chart-bar-negative.svelte

@@ -26,7 +26,6 @@
 	</Card.Header>
 	<Card.Content>
 		<Chart.Container config={chartConfig}>
-			<!-- TODO: How to add `month` labels to bars and give them a custom color? -->
 			<BarChart
 				labels={{
 					offset: 5,

v4/src/lib/registry/charts/chart-line-dots.svelte

@@ -52,7 +52,6 @@
 					xAxis: { format: PeriodType.Month },
 				}}
 			>
-				<!-- TODO: How to style active do, say, add a wider radius? -->
 				{#snippet tooltip()}
 					<Chart.Tooltip hideLabel />
 				{/snippet}

v4/src/lib/registry/charts/chart-radar-lines-only.svelte

@@ -49,7 +49,6 @@
 					},
 				]}
 				props={{
-					// TODO: How to draw hexagons instead of circles?
 					spline: { curve: curveLinearClosed, motion: "tween" },
 					grid: { radialY: "linear", x: false },
 					yAxis: { format: () => "" },

v4/src/lib/registry/ui/pagination/pagination-link.svelte

@@ -21,7 +21,6 @@
 	{page.value}
 {/snippet}
 
-<!-- TODO: Fix this error: Expression produces a union type that is too complex to represent. Note: Removing `Fallback` in children={children || Fallback} fixes, makes you wonder how/why `Fallback` is causing this. -->
 <PaginationPrimitive.Page
 	bind:ref
 	{page}

v4/src/lib/registry/ui/pagination/pagination-next-button.svelte

@@ -17,7 +17,6 @@
 	<ChevronRightIcon class="size-4" />
 {/snippet}
 
-<!-- TODO: Fix this error: Expression produces a union type that is too complex to represent. Note: Removing `Fallback` in children={children || Fallback} fixes, makes you wonder how/why `Fallback` is causing this. -->
 <PaginationPrimitive.NextButton
 	bind:ref
 	aria-label="Go to next page"