(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

Author: shadcn

.changeset/fresh-cherries-brush.md

@@ -0,0 +1,5 @@
+---
+"shadcn": minor
+---
+
+add support for tailwind v4

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()
   }

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)