diff --git a/.changeset/plenty-dogs-clean.md b/.changeset/plenty-dogs-clean.md new file mode 100644 index 000000000..17bbf82e9 --- /dev/null +++ b/.changeset/plenty-dogs-clean.md @@ -0,0 +1,5 @@ +--- +"shadcn-svelte": minor +--- + +feat: Added TypeScript support for the tailwind config diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 35e7036b5..cdbcde7fc 100644 --- a/packages/cli/src/commands/init.ts +++ b/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); diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 60828f2c6..8d279cc8c 100644 --- a/packages/cli/src/utils/templates.ts +++ b/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} */