diff --git a/.changeset/sweet-worms-fix.md b/.changeset/sweet-worms-fix.md new file mode 100644 index 0000000000..deaf083004 --- /dev/null +++ b/.changeset/sweet-worms-fix.md @@ -0,0 +1,5 @@ +--- +"shadcn-ui": minor +--- + +add support for tailwind.config.ts diff --git a/.kodiak.toml b/.kodiak.toml new file mode 100644 index 0000000000..bbfdb22584 --- /dev/null +++ b/.kodiak.toml @@ -0,0 +1,18 @@ +# .kodiak.toml +version = 1 + +[merge] +automerge_label = "automerge" +require_automerge_label = true +method = "squash" +delete_branch_on_merge = true +optimistic_updates = false +prioritize_ready_to_merge = true +notify_on_conflict = true + +[merge.message] +title = "pull_request_title" +body = "pull_request_body" +include_pr_number = true +body_type = "markdown" +strip_html_comments = true diff --git a/apps/www/components/site-header.tsx b/apps/www/components/site-header.tsx index 17cf6861f3..3c13add4ad 100644 --- a/apps/www/components/site-header.tsx +++ b/apps/www/components/site-header.tsx @@ -11,7 +11,7 @@ import { buttonVariants } from "@/registry/new-york/ui/button" export function SiteHeader() { return ( -
+
diff --git a/apps/www/content/docs/components/accordion.mdx b/apps/www/content/docs/components/accordion.mdx index 41ca737ee8..6db148f736 100644 --- a/apps/www/content/docs/components/accordion.mdx +++ b/apps/www/content/docs/components/accordion.mdx @@ -42,12 +42,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -90,12 +90,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/apps/www/content/docs/installation/astro.mdx b/apps/www/content/docs/installation/astro.mdx index e689b20700..cb5e84c3de 100644 --- a/apps/www/content/docs/installation/astro.mdx +++ b/apps/www/content/docs/installation/astro.mdx @@ -62,15 +62,19 @@ Answer `Yes` to all the question prompted by the CLI when installing Tailwind CS ### Edit tsconfig.json file -Add the code below to the tsconfig.json file to resolve paths: +Add the following code to the `tsconfig.json` file to resolve paths: -```json {2-7} showLineNumbers +```ts {4-9} showLineNumbers { "compilerOptions": { + // ... "baseUrl": ".", "paths": { - "@/*": ["src/*"] + "@/*": [ + "./src/*" + ] } + // ... } } ``` diff --git a/apps/www/content/docs/installation/gatsby.mdx b/apps/www/content/docs/installation/gatsby.mdx index cd83d6f8f6..184e0f9cbf 100644 --- a/apps/www/content/docs/installation/gatsby.mdx +++ b/apps/www/content/docs/installation/gatsby.mdx @@ -35,7 +35,7 @@ You will be asked a few questions to configure your project: ### Edit tsconfig.json file -Add the code below to the `tsconfig.json` file to resolve paths: +Add the following code to the `tsconfig.json` file to resolve paths: ```ts {4-9} showLineNumbers { diff --git a/apps/www/content/docs/installation/manual.mdx b/apps/www/content/docs/installation/manual.mdx index efc5dd1fc7..4625b2cde4 100644 --- a/apps/www/content/docs/installation/manual.mdx +++ b/apps/www/content/docs/installation/manual.mdx @@ -117,12 +117,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/apps/www/content/docs/installation/vite.mdx b/apps/www/content/docs/installation/vite.mdx index b198b23c30..eddceefcad 100644 --- a/apps/www/content/docs/installation/vite.mdx +++ b/apps/www/content/docs/installation/vite.mdx @@ -23,20 +23,28 @@ npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p ``` -### Edit tsconfig.json +### Edit tsconfig.json file -Add the code below to the compilerOptions of your tsconfig.json so your app can resolve paths without error +Add the following code to the `tsconfig.json` file to resolve paths: -```typescript -"baseUrl": ".", -"paths": { - "@/*": ["./src/*"] +```ts {4-9} showLineNumbers +{ + "compilerOptions": { + // ... + "baseUrl": ".", + "paths": { + "@/*": [ + "./src/*" + ] + } + // ... + } } ``` ### Update vite.config.ts -Add the code below to the vite.config.ts so your app can resolve paths without error +Add the following code to the vite.config.ts so your app can resolve paths without error ```bash # (so you can import "path" without error) diff --git a/apps/www/registry/default/example/alert-demo.tsx b/apps/www/registry/default/example/alert-demo.tsx index 5255cc9514..a26c71fcfd 100644 --- a/apps/www/registry/default/example/alert-demo.tsx +++ b/apps/www/registry/default/example/alert-demo.tsx @@ -1,4 +1,4 @@ -import { Terminal, Waves } from "lucide-react" +import { Terminal } from "lucide-react" import { Alert, diff --git a/apps/www/registry/default/example/alert-destructive.tsx b/apps/www/registry/default/example/alert-destructive.tsx index 2b4154a8a3..a72c26b8f8 100644 --- a/apps/www/registry/default/example/alert-destructive.tsx +++ b/apps/www/registry/default/example/alert-destructive.tsx @@ -1,4 +1,4 @@ -import { AlertCircle, FileWarning, Terminal } from "lucide-react" +import { AlertCircle } from "lucide-react" import { Alert, diff --git a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx b/apps/www/registry/default/example/dropdown-menu-radio-group.tsx index 42ab782d03..2c06e7b131 100644 --- a/apps/www/registry/default/example/dropdown-menu-radio-group.tsx +++ b/apps/www/registry/default/example/dropdown-menu-radio-group.tsx @@ -1,12 +1,10 @@ "use client" import * as React from "react" -import { DropdownMenuCheckboxItemProps } from "@radix-ui/react-dropdown-menu" import { Button } from "@/registry/default/ui/button" import { DropdownMenu, - DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 598ab6d60e..2653af78c9 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -228,12 +228,25 @@ export async function runInit(cwd: string, config: Config) { const extension = config.tsx ? "ts" : "js" + const tailwindConfigExtension = path.extname( + config.resolvedPaths.tailwindConfig + ) + + let tailwindConfigTemplate: string + if (tailwindConfigExtension === ".ts") { + tailwindConfigTemplate = config.tailwind.cssVariables + ? templates.TAILWIND_CONFIG_TS_WITH_VARIABLES + : templates.TAILWIND_CONFIG_TS + } else { + tailwindConfigTemplate = config.tailwind.cssVariables + ? templates.TAILWIND_CONFIG_WITH_VARIABLES + : templates.TAILWIND_CONFIG + } + // Write tailwind config. await fs.writeFile( config.resolvedPaths.tailwindConfig, - config.tailwind.cssVariables - ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension }) - : template(templates.TAILWIND_CONFIG)({ extension }), + template(tailwindConfigTemplate)({ extension }), "utf8" ) diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts index 94fb1d900c..f110cf90fc 100644 --- a/packages/cli/src/utils/templates.ts +++ b/packages/cli/src/utils/templates.ts @@ -34,12 +34,12 @@ module.exports = { extend: { keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -111,12 +111,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { @@ -127,3 +127,123 @@ module.exports = { }, plugins: [require("tailwindcss-animate")], }` + +export const TAILWIND_CONFIG_TS = `import type { Config } from "tailwindcss" + +const config = { + darkMode: ["class"], + content: [ + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} satisfies Config + +export default config` + +export const TAILWIND_CONFIG_TS_WITH_VARIABLES = `import type { Config } from "tailwindcss" + +const config = { + darkMode: ["class"], + content: [ + './pages/**/*.{<%- extension %>,<%- extension %>x}', + './components/**/*.{<%- extension %>,<%- extension %>x}', + './app/**/*.{<%- extension %>,<%- extension %>x}', + './src/**/*.{<%- extension %>,<%- extension %>x}', + ], + theme: { + container: { + center: true, + padding: "2rem", + screens: { + "2xl": "1400px", + }, + }, + extend: { + colors: { + border: "hsl(var(--border))", + input: "hsl(var(--input))", + ring: "hsl(var(--ring))", + background: "hsl(var(--background))", + foreground: "hsl(var(--foreground))", + primary: { + DEFAULT: "hsl(var(--primary))", + foreground: "hsl(var(--primary-foreground))", + }, + secondary: { + DEFAULT: "hsl(var(--secondary))", + foreground: "hsl(var(--secondary-foreground))", + }, + destructive: { + DEFAULT: "hsl(var(--destructive))", + foreground: "hsl(var(--destructive-foreground))", + }, + muted: { + DEFAULT: "hsl(var(--muted))", + foreground: "hsl(var(--muted-foreground))", + }, + accent: { + DEFAULT: "hsl(var(--accent))", + foreground: "hsl(var(--accent-foreground))", + }, + popover: { + DEFAULT: "hsl(var(--popover))", + foreground: "hsl(var(--popover-foreground))", + }, + card: { + DEFAULT: "hsl(var(--card))", + foreground: "hsl(var(--card-foreground))", + }, + }, + borderRadius: { + lg: "var(--radius)", + md: "calc(var(--radius) - 2px)", + sm: "calc(var(--radius) - 4px)", + }, + keyframes: { + "accordion-down": { + from: { height: "0" }, + to: { height: "var(--radix-accordion-content-height)" }, + }, + "accordion-up": { + from: { height: "var(--radix-accordion-content-height)" }, + to: { height: "0" }, + }, + }, + animation: { + "accordion-down": "accordion-down 0.2s ease-out", + "accordion-up": "accordion-up 0.2s ease-out", + }, + }, + }, + plugins: [require("tailwindcss-animate")], +} satisfies Config + +export default config` diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts index ad2a7023b1..8135e8a480 100644 --- a/packages/cli/test/commands/init.test.ts +++ b/packages/cli/test/commands/init.test.ts @@ -51,7 +51,7 @@ test("init config-full", async () => { expect(mockWriteFile).toHaveBeenNthCalledWith( 1, expect.stringMatching(/tailwind.config.ts$/), - expect.stringContaining(`/** @type {import('tailwindcss').Config} */`), + expect.stringContaining(`import type { Config } from "tailwindcss"`), "utf8" ) expect(mockWriteFile).toHaveBeenNthCalledWith( @@ -121,7 +121,7 @@ test("init config-partial", async () => { expect(mockWriteFile).toHaveBeenNthCalledWith( 1, expect.stringMatching(/tailwind.config.ts$/), - expect.stringContaining(`/** @type {import('tailwindcss').Config} */`), + expect.stringContaining(`import type { Config } from "tailwindcss"`), "utf8" ) expect(mockWriteFile).toHaveBeenNthCalledWith( diff --git a/packages/cli/test/fixtures/next/tailwind.config.js b/packages/cli/test/fixtures/next/tailwind.config.js index da23e8eecf..6e84f58f07 100644 --- a/packages/cli/test/fixtures/next/tailwind.config.js +++ b/packages/cli/test/fixtures/next/tailwind.config.js @@ -58,12 +58,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/tailwind.config.cjs b/tailwind.config.cjs index b70952b4a4..a0c2402724 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -59,12 +59,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: { diff --git a/templates/next-template/components/site-header.tsx b/templates/next-template/components/site-header.tsx index 4e7d2472e6..91e7808703 100644 --- a/templates/next-template/components/site-header.tsx +++ b/templates/next-template/components/site-header.tsx @@ -8,7 +8,7 @@ import { ThemeToggle } from "@/components/theme-toggle" export function SiteHeader() { return ( -
+
diff --git a/templates/next-template/tailwind.config.js b/templates/next-template/tailwind.config.js index ffdff01ca6..3ea1db1112 100644 --- a/templates/next-template/tailwind.config.js +++ b/templates/next-template/tailwind.config.js @@ -58,12 +58,12 @@ module.exports = { }, keyframes: { "accordion-down": { - from: { height: 0 }, + from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, - to: { height: 0 }, + to: { height: "0" }, }, }, animation: {