Tailwind prefix

apps/www/src/lib/registry/default/ui/alert-dialog/AlertDialogCancel.vue

@@ -14,7 +14,14 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
     <slot />
   </AlertDialogCancel>
 </template>

apps/www/src/lib/registry/default/ui/v-calendar/Calendar.vue

@@ -79,10 +79,22 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('prev')"
+      >
         <ChevronLeft class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('next')"
+      >
         <ChevronRight class="w-4 h-4" />
       </button>
     </div>

apps/www/src/lib/registry/new-york/ui/alert-dialog/AlertDialogCancel.vue

@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from 'vue'
 import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
 import { cn } from '@/lib/utils'
-import { buttonVariants } from '@/lib/registry/new-york/ui/button'
+import { buttonVariants } from '@/lib/registry/default/ui/button'
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
 
@@ -14,7 +14,14 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)">
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
     <slot />
   </AlertDialogCancel>
 </template>

apps/www/src/lib/registry/new-york/ui/v-calendar/Calendar.vue

@@ -80,10 +80,22 @@ const vCalendarSlots = computed(() => {
 <template>
   <div class="relative">
     <div v-if="$attrs.mode !== 'time'" class="absolute flex justify-between w-full px-4 top-3 z-[1]">
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('prev')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('prev')"
+      >
         <ChevronLeftIcon class="w-4 h-4" />
       </button>
-      <button :class="cn(buttonVariants({ variant: 'outline' }), 'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100')" @click="handleNav('next')">
+      <button
+        :class="cn(
+          buttonVariants({ variant: 'outline' }),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+        )"
+        @click="handleNav('next')"
+      >
         <ChevronRightIcon class="w-4 h-4" />
       </button>
     </div>

apps/www/src/public/registry/styles/default/alert-dialog.json

@@ -16,7 +16,7 @@
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",

apps/www/src/public/registry/styles/new-york/alert-dialog.json

@@ -16,7 +16,7 @@
     },
     {
       "name": "AlertDialogCancel.vue",
-      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/new-york/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel v-bind=\"delegatedProps\" :class=\"cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)\">\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport { type HTMLAttributes, computed } from 'vue'\nimport { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'\nimport { cn } from '@/lib/utils'\nimport { buttonVariants } from '@/lib/registry/default/ui/button'\n\nconst props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()\n\nconst delegatedProps = computed(() => {\n  const { class: _, ...delegated } = props\n\n  return delegated\n})\n</script>\n\n<template>\n  <AlertDialogCancel\n    v-bind=\"delegatedProps\"\n    :class=\"cn(\n      buttonVariants({ variant: 'outline' }),\n      'mt-2 sm:mt-0',\n      props.class,\n    )\"\n  >\n    <slot />\n  </AlertDialogCancel>\n</template>\n"
     },
     {
       "name": "AlertDialogContent.vue",

packages/cli/src/commands/init.ts

@@ -163,14 +163,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: 'tailwindPrefix',
+      message: `Are you using a custom ${highlight(
+        'tailwind prefix eg. tw-',
+      )}? (Leave blank if not)`,
+      initial: '',
+    },
     {
       type: 'text',
       name: 'tailwindConfig',
@@ -208,7 +208,7 @@ export async function promptForConfig(
       css: options.tailwindCss,
       baseColor: options.tailwindBaseColor,
       cssVariables: options.tailwindCssVariables,
-      // prefix: options.tailwindPrefix,
+      prefix: options.tailwindPrefix,
     },
     aliases: {
       utils: options.utils,

packages/cli/src/utils/transformers/index.ts

@@ -8,6 +8,7 @@ import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
 import { transformCssVars } from '@/src/utils/transformers/transform-css-vars'
 import { transformImport } from '@/src/utils/transformers/transform-import'
 import { transformSFC } from '@/src/utils/transformers/transform-sfc'
+import { transformTwPrefixes } from '@/src/utils/transformers/transform-tw-prefix'
 
 export interface TransformOpts {
   filename: string
@@ -25,7 +26,7 @@ export type Transformer<Output = SourceFile> = (
 const transformers: Transformer[] = [
   transformCssVars,
   transformImport,
-  // transformTwPrefixes,
+  transformTwPrefixes,
 ]
 
 const project = new Project({

packages/cli/src/utils/transformers/transform-tw-prefix.ts

@@ -31,8 +31,14 @@ export const transformTwPrefixes: Transformer = async ({
       return sourceFile
 
     const value = node.getText()
+
+    // Do not parse imported packages/files
+    if (node.getParent().getKind() === SyntaxKind.ImportDeclaration)
+      return
+
     const hasClosingDoubleQuote = value.match(/"/g)?.length === 2
-    if (value.search('\'') === -1 && hasClosingDoubleQuote) {
+    const hasFunction = value.startsWith('"cn(')
+    if (value.search('\'') === -1 && hasClosingDoubleQuote && !hasFunction) {
       const mapped = applyPrefix(value.replace(/"/g, ''), config.tailwind.prefix)
       node.replaceWithText(`"${mapped}"`)
     }