updateTailwindConfigPlugin() — ui Function Reference

Architecture documentation for the updateTailwindConfigPlugin() function in update-css-vars.ts from the ui codebase.

Function typescript FrameworkTooling CLICore calls 1 called by 1

Entity Profile

FrameworkTooling→ CLICore→ updateTailwindConfigPlugin() — ui Function Reference

Dependency Diagram

graph TD
  1029d41a_1898_ac6d_cce2_d39e226440cb["updateTailwindConfigPlugin()"]
  09244f5d_7fce_b385_220b_05945bb9e93b["update-css-vars.ts"]
  1029d41a_1898_ac6d_cce2_d39e226440cb -->|defined in| 09244f5d_7fce_b385_220b_05945bb9e93b
  4b9d28e9_450c_12b3_5ef0_44434fa9535b["transformCssVars()"]
  4b9d28e9_450c_12b3_5ef0_44434fa9535b -->|calls| 1029d41a_1898_ac6d_cce2_d39e226440cb
  546742a2_5bfd_7ac7_0423_1d8418785376["getQuoteType()"]
  1029d41a_1898_ac6d_cce2_d39e226440cb -->|calls| 546742a2_5bfd_7ac7_0423_1d8418785376
  style 1029d41a_1898_ac6d_cce2_d39e226440cb fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/shadcn/src/utils/updaters/update-css-vars.ts lines 704–747

function updateTailwindConfigPlugin(
  tailwindConfig: z.infer<typeof registryItemTailwindSchema>["config"]
) {
  return {
    postcssPlugin: "update-tailwind-config",
    Once(root: Root) {
      if (!tailwindConfig?.plugins) {
        return
      }

      const quoteType = getQuoteType(root)
      const quote = quoteType === "single" ? "'" : '"'

      const pluginNodes = root.nodes.filter(
        (node): node is AtRule =>
          node.type === "atrule" && node.name === "plugin"
      )

      const lastPluginNode =
        pluginNodes[pluginNodes.length - 1] || root.nodes[0]

      for (const plugin of tailwindConfig.plugins) {
        const pluginName = plugin.replace(/^require\(["']|["']\)$/g, "")

        // Check if the plugin is already present.
        if (
          pluginNodes.some((node) => {
            return node.params.replace(/["']/g, "") === pluginName
          })
        ) {
          continue
        }

        const pluginNode = postcss.atRule({
          name: "plugin",
          params: `${quote}${pluginName}${quote}`,
          raws: { semicolon: true, before: "\n" },
        })
        root.insertAfter(lastPluginNode, pluginNode)
        root.insertBefore(pluginNode, postcss.comment({ text: "---break---" }))
      }
    },
  }
}