[bug]: (canary version) Incorrect class generation when using a prefix in Tailwind with shadcn

[andrico]

Describe the bug

Description

When installing a new component in shadcn using the canary version and setting a prefix in Tailwind CSS (prefix in tailwind.config.js), the generated classes are malformed. Instead of correctly applying the prefix before the class, shadcn incorrectly introduces additional prefixes (such as dark: or other modifiers), resulting in invalid class names.

Environment

• shadcn version: Canary
• Tailwind CSS version: [Specify version]
• Node.js version: [Specify version]
• OS: [Specify OS]

Additional Notes

This issue causes styling conflicts and prevents the correct application of Tailwind CSS utilities. The expected behavior is that the prefix should always be applied before the class name, even when using Tailwind’s dark mode or other modifiers.

Affected component/components

all

How to reproduce

Steps to Reproduce

1. Set a custom prefix in tailwind.config.js, e.g.:

   module.exports = {
     prefix: 'pf-',
     theme: { /* theme config */ },
     plugins: [],
   };

2. Install a new component using shadcn add <component>.
3. Check the generated classes in the component.

Expected Behavior

The generated classes should correctly apply the prefix before the class, e.g.:

pf:bg-background pf:text-foreground

Actual Behavior

The generated classes incorrectly apply an additional prefix, leading to malformed class names, e.g.:

dark:pf:bg-background dark:pf:text-foreground

Instead of:

pf:dark:bg-background pf:dark:text-foreground

Codesandbox/StackBlitz link

No response

Logs

System Info

-

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues