feat(cli): add support for custom Tailwind prefix transformer (#770)

* feat(cli): add support for custom Tailwind prefix

* fix(cli): add tw prefix on classes applied in the css file

* feat(cli): add support for custom tailwind prefix

* chore: add changeset

* style(shadcn-ui): code format

---------

Co-authored-by: shadcn <m@shadcn.com>

packages/cli/src/commands/init.ts

@@ -27,6 +27,8 @@ import ora from "ora"
 import prompts from "prompts"
 import * as z from "zod"
 
+import { applyPrefixesCss } from "../utils/transformers/transform-tw-prefix"
+
 const PROJECT_DEPENDENCIES = [
   "tailwindcss-animate",
   "class-variance-authority",
@@ -132,6 +134,14 @@ export async function promptForConfig(
       active: "yes",
       inactive: "no",
     },
+    {
+      type: "text",
+      name: "tailwindPrefix",
+      message: `Are you using a custom ${highlight(
+        "tailwind prefix eg. tw-"
+      )}? (Leave blank if not)`,
+      initial: "",
+    },
     {
       type: "text",
       name: "tailwindConfig",
@@ -168,6 +178,7 @@ export async function promptForConfig(
       css: options.tailwindCss,
       baseColor: options.tailwindBaseColor,
       cssVariables: options.tailwindCssVariables,
+      prefix: options.tailwindPrefix,
     },
     rsc: options.rsc,
     tsx: options.typescript,
@@ -246,7 +257,10 @@ export async function runInit(cwd: string, config: Config) {
   // Write tailwind config.
   await fs.writeFile(
     config.resolvedPaths.tailwindConfig,
-    template(tailwindConfigTemplate)({ extension }),
+    template(tailwindConfigTemplate)({
+      extension,
+      prefix: config.tailwind.prefix,
+    }),
     "utf8"
   )
 
@@ -256,7 +270,9 @@ export async function runInit(cwd: string, config: Config) {
     await fs.writeFile(
       config.resolvedPaths.tailwindCss,
       config.tailwind.cssVariables
-        ? baseColor.cssVarsTemplate
+        ? config.tailwind.prefix
+          ? applyPrefixesCss(baseColor.cssVarsTemplate, config.tailwind.prefix)
+          : baseColor.cssVarsTemplate
         : baseColor.inlineColorsTemplate,
       "utf8"
     )