(3/n) shadcn: tailwind config (#6490)

* feat(shadcn): add tailwind version detection * chore: changeset * feat(shadcn): css vars for tailwind v4 * fix(shadcn): handle color space * fix(shadcn): add oklch support * feat(shadcn): handle single quote * feat(shadcn): update tailwind config * feat(shadcn): add keyframes * feat(shadcn): add animation vars * fix: var name * fix(shadcn): handle color values * feat(shadcn): handle radius * feat(shadcn): clean up formatting * feat(shadcn): update next clean up function * chore: changeset * feat(shadcn): fix formatting for v3 and v4 * test(shadcn): update snapshots * fix(shadcn): update tailwind version handling
shadcn-ui · Jan 30, 2025 · 9a14c1d · 9a14c1d
1 parent 5ef2bc5
commit 9a14c1d
Show file tree

Hide file tree

Showing 5 changed files with 948 additions and 48 deletions.
diff --git a/.changeset/fresh-cherries-brush.md b/.changeset/fresh-cherries-brush.md
@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add support for tailwind v4
diff --git a/packages/shadcn/src/preflights/preflight-init.ts b/packages/shadcn/src/preflights/preflight-init.ts
@@ -78,7 +78,15 @@ export async function preFlightInit(
     )}.`
   )
 
-  const tailwindSpinner = spinner(`Validating Tailwind CSS.`, {
+  let tailwindSpinnerMessage = "Validating Tailwind CSS."
+
+  if (projectInfo.tailwindVersion === "v4") {
+    tailwindSpinnerMessage = `Validating Tailwind CSS config. Found ${highlighter.info(
+      "v4"
+    )}.`
+  }
+
+  const tailwindSpinner = spinner(tailwindSpinnerMessage, {
     silent: options.silent,
   }).start()
   if (
@@ -93,6 +101,9 @@ export async function preFlightInit(
   ) {
     errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true
     tailwindSpinner?.fail()
+  } else if (!projectInfo.tailwindVersion) {
+    errors[ERRORS.TAILWIND_NOT_CONFIGURED] = true
+    tailwindSpinner?.fail()
   } else {
     tailwindSpinner?.succeed()
   }

diff --git a/packages/shadcn/src/utils/add-components.ts b/packages/shadcn/src/utils/add-components.ts
@@ -85,6 +85,7 @@ async function addProjectComponents(
     cleanupDefaultNextStyles: options.isNewProject,
     silent: options.silent,
     tailwindVersion,
+    tailwindConfig: tree.tailwind?.config,
   })
 
   await updateDependencies(tree.dependencies, config, {
@@ -176,6 +177,7 @@ async function addWorkspaceComponents(
       await updateCssVars(component.cssVars, targetConfig, {
         silent: true,
         tailwindVersion,
+        tailwindConfig: component.tailwind?.config,
       })
       filesUpdated.push(
         path.relative(workspaceRoot, targetConfig.resolvedPaths.tailwindCss)