buildTailwindThemeColorsFromCssVars() — ui Function Reference

Architecture documentation for the buildTailwindThemeColorsFromCssVars() function in update-tailwind-config.ts from the ui codebase.

Function typescript FrameworkTooling CLICore

Entity Profile

FrameworkTooling→ CLICore→ buildTailwindThemeColorsFromCssVars() — ui Function Reference

Dependency Diagram

graph TD
  c09b8e64_3e09_bf5f_54cf_0fe1b7ddc552["buildTailwindThemeColorsFromCssVars()"]
  ef3e192c_eced_bc46_1021_689faf6b7065["update-tailwind-config.ts"]
  c09b8e64_3e09_bf5f_54cf_0fe1b7ddc552 -->|defined in| ef3e192c_eced_bc46_1021_689faf6b7065
  style c09b8e64_3e09_bf5f_54cf_0fe1b7ddc552 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-tailwind-config.ts lines 504–540

export function buildTailwindThemeColorsFromCssVars(
  cssVars: z.infer<typeof registryItemCssVarsSchema>
) {
  const result: Record<string, any> = {}

  for (const key of Object.keys(cssVars)) {
    const parts = key.split("-")
    const colorName = parts[0]
    const subType = parts.slice(1).join("-")

    if (subType === "") {
      if (typeof result[colorName] === "object") {
        result[colorName].DEFAULT = `hsl(var(--${key}))`
      } else {
        result[colorName] = `hsl(var(--${key}))`
      }
    } else {
      if (typeof result[colorName] !== "object") {
        result[colorName] = { DEFAULT: `hsl(var(--${colorName}))` }
      }
      result[colorName][subType] = `hsl(var(--${key}))`
    }
  }

  // Remove DEFAULT if it's not in the original cssVars
  for (const [colorName, value] of Object.entries(result)) {
    if (
      typeof value === "object" &&
      value.DEFAULT === `hsl(var(--${colorName}))` &&
      !(colorName in cssVars)
    ) {
      delete value.DEFAULT
    }
  }

  return result
}