chore: add prefix option to init

packages/cli/src/commands/init.ts

@@ -28,6 +28,7 @@ import {
   resolveConfigPaths,
 } from '../utils/get-config'
 import { transformCJSToESM } from '../utils/transformers/transform-cjs-to-esm'
+import { applyPrefixesCss } from '../utils/transformers/transform-tw-prefix'
 
 const PROJECT_DEPENDENCIES = {
   base: [
@@ -150,6 +151,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',
@@ -186,6 +195,7 @@ export async function promptForConfig(
       css: options.tailwindCss,
       baseColor: options.tailwindBaseColor,
       cssVariables: options.tailwindCssVariables,
+      prefix: options.tailwindPrefix,
     },
     aliases: {
       utils: options.utils,
@@ -246,8 +256,8 @@ export async function runInit(cwd: string, config: Config) {
     transformCJSToESM(
       config.resolvedPaths.tailwindConfig,
       config.tailwind.cssVariables
-        ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension, framework: config.framework })
+        ? template(templates.TAILWIND_CONFIG_WITH_VARIABLES)({ extension, framework: config.framework, prefix: config.tailwind.prefix })
-        : template(templates.TAILWIND_CONFIG)({ extension, framework: config.framework }),
+        : template(templates.TAILWIND_CONFIG)({ extension, framework: config.framework, prefix: config.tailwind.prefix }),
     ),
     'utf8',
   )
@@ -258,7 +268,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',
     )

packages/cli/src/utils/get-config.ts

@@ -35,7 +35,7 @@ export const rawConfigSchema = z
     aliases: z.object({
       components: z.string(),
       utils: z.string(),
-      ui: z.string().optional(),
+      ui: z.string().default('').optional(),
     }),
   })
   .strict()

packages/cli/src/utils/templates.ts

@@ -17,6 +17,7 @@ module.exports = {
     './app/**/*.{<%- extension %>,<%- extension %>x,vue}',
     './src/**/*.{<%- extension %>,<%- extension %>x,vue}',
 	],
+  prefix: "<%- prefix %>",
   theme: {
     container: {
       center: true,
@@ -51,6 +52,7 @@ export const TAILWIND_CONFIG_WITH_VARIABLES = `const animate = require("tailwind
 module.exports = {
   darkMode: ["class"],
   safelist: ["dark"],
+  prefix: "<%- prefix %>",
   <% if (framework === 'vite') { %>
   content: [
     './pages/**/*.{<%- extension %>,<%- extension %>x,vue}',

packages/cli/test/fixtures/config-full/components.json

@@ -4,7 +4,8 @@
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
     "baseColor": "zinc",
-    "cssVariables": true
+    "cssVariables": true,
+    "prefix": "tw-"
   },
   "aliases": {
     "utils": "~/lib/utils",

packages/cli/test/utils/__snapshots__/transform-cjs-to-esm.test.ts.snap

@@ -12,6 +12,7 @@ export default {
     './app/**/*.{<%- extension %>,<%- extension %>x,vue}',
     './src/**/*.{<%- extension %>,<%- extension %>x,vue}',
 	],
+  prefix: \\"<%- prefix %>\\",
   theme: {
     container: {
       center: true,
@@ -48,6 +49,7 @@ exports[`handle tailwind config template correctly 2`] = `
 export default {
   darkMode: [\\"class\\"],
   safelist: [\\"dark\\"],
+  prefix: \\"<%- prefix %>\\",
   <% if (framework === 'vite') { %>
   content: [
     './pages/**/*.{<%- extension %>,<%- extension %>x,vue}',

packages/cli/test/utils/get-config.test.ts

@@ -1,9 +1,9 @@
 import path from 'pathe'
-import { expect, test } from 'vitest'
+import { expect, it } from 'vitest'
 
 import { getConfig, getRawConfig } from '../../src/utils/get-config'
 
-test('get raw config', async () => {
+it('get raw config', async () => {
   expect(
     await getRawConfig(path.resolve(__dirname, '../fixtures/config-none')),
   ).toEqual(null)
@@ -31,7 +31,7 @@ test('get raw config', async () => {
   ).rejects.toThrowError()
 })
 
-test('get config', async () => {
+it('get config', async () => {
   expect(
     await getConfig(path.resolve(__dirname, '../fixtures/config-none')),
   ).toEqual(null)
@@ -94,6 +94,7 @@ test('get config', async () => {
       baseColor: 'zinc',
       css: 'src/app/globals.css',
       cssVariables: true,
+      prefix: 'tw-',
     },
     aliases: {
       components: '~/components',