feat: Adds TS support for tailwind config (#973)

.changeset/plenty-dogs-clean.md

@@ -0,0 +1,5 @@
+---
+"shadcn-svelte": minor
+---
+
+feat: Added TypeScript support for the tailwind config

packages/cli/src/commands/init.ts

@@ -217,11 +217,9 @@ export async function runInit(cwd: string, config: Config) {
 			}
 
 			// Write tailwind config.
-			await fs.writeFile(
-				config.resolvedPaths.tailwindConfig,
-				templates.TAILWIND_CONFIG_WITH_VARIABLES,
-				"utf8"
-			);
+			const { TS, JS } = templates.TAILWIND_CONFIG_WITH_VARIABLES;
+			const tailwindConfigContent = config.resolvedPaths.tailwindConfig.endsWith(".ts") ? TS : JS;
+			await fs.writeFile(config.resolvedPaths.tailwindConfig, tailwindConfigContent, "utf8");
 
 			// Write css file.
 			const baseColor = await getRegistryBaseColor(config.tailwind.baseColor);

packages/cli/src/utils/templates.ts

@@ -110,10 +110,17 @@ export const flyAndScale = (
 	};
 };`;
 
-export const TAILWIND_CONFIG_WITH_VARIABLES = `import { fontFamily } from "tailwindcss/defaultTheme";
+const TAILWIND_JS = `import { fontFamily } from "tailwindcss/defaultTheme";
 
 /** @type {import('tailwindcss').Config} */
-const config = {
+const config = {`;
+
+const TAILWIND_TS = `import { fontFamily } from "tailwindcss/defaultTheme";
+import type { Config } from "tailwindcss";
+
+const config: Config = {`;
+
+const TAILWIND_WITH_VARIABLES = `
 	darkMode: ["class"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
 	safelist: ["dark"],
@@ -176,6 +183,11 @@ const config = {
 export default config;
 `;
 
+export const TAILWIND_CONFIG_WITH_VARIABLES = {
+	TS: TAILWIND_TS + TAILWIND_WITH_VARIABLES,
+	JS: TAILWIND_JS + TAILWIND_WITH_VARIABLES,
+};
+
 export const TAILWIND_CONFIG = `import { fontFamily } from "tailwindcss/defaultTheme";
 
 /** @type {import('tailwindcss').Config} */