We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Tailwind prefix not working for Pseudo-classes classes.
Right now it's
const buttonVariants = cva( "ac:inline-flex ac:items-center ac:justify-center ac:gap-2 ac:whitespace-nowrap ac:rounded-md ac:text-sm ac:font-medium ac:transition-[color,box-shadow] disabled:ac:pointer-events-none disabled:ac:opacity-50 [&_svg]:ac:pointer-events-none [&_svg:not([class*=size-])]:ac:size-4 [&_svg]:ac:shrink-0 ac:ring-ring/10 dark:ac:ring-ring/20 dark:ac:outline-ring/40 ac:outline-ring/50 focus-visible:ac:ring-4 focus-visible:ac:outline-1 aria-invalid:focus-visible:ac:ring-0", { variants: { variant: { default: "ac:bg-primary ac:text-primary-foreground ac:shadow-sm hover:ac:bg-primary/90" }, size: { default: "ac:h-9 ac:px-4 ac:py-2 has-[>svg]:ac:px-3" }, }, defaultVariants: { variant: "default", size: "default", }, } )
But it should be const buttonVariants = cva( "ac:inline-flex ac:items-center ac:justify-center ac:gap-2 ac:whitespace-nowrap ac:rounded-md ac:text-sm ac:font-medium ac:transition-[color,box-shadow] ac:disabled:pointer-events-none ac:disabled:opacity-50 ac:[&_svg]:pointer-events-none ac:[&_svg:not([class*=size-])]:size-4 ac:[&_svg]:shrink-0 ac:ring-ring/10 ac:dark:ring-ring/20 ac:dark:outline-ring/40 ac:outline-ring/50 ac:focus-visible:ring-4 ac:focus-visible:outline-1 ac:aria-invalid:focus-visible:ring-0", { variants: { variant: { default: "ac:bg-primary ac:text-primary-foreground ac:shadow-sm ac:hover:bg-primary/90", }, size: { default: "ac:h-9 ac:px-4 ac:py-2 ac:has-[>svg]:px-3" }, }, defaultVariants: { variant: "default", size: "default", }, } )
const buttonVariants = cva( "ac:inline-flex ac:items-center ac:justify-center ac:gap-2 ac:whitespace-nowrap ac:rounded-md ac:text-sm ac:font-medium ac:transition-[color,box-shadow] ac:disabled:pointer-events-none ac:disabled:opacity-50 ac:[&_svg]:pointer-events-none ac:[&_svg:not([class*=size-])]:size-4 ac:[&_svg]:shrink-0 ac:ring-ring/10 ac:dark:ring-ring/20 ac:dark:outline-ring/40 ac:outline-ring/50 ac:focus-visible:ring-4 ac:focus-visible:outline-1 ac:aria-invalid:focus-visible:ring-0", { variants: { variant: { default: "ac:bg-primary ac:text-primary-foreground ac:shadow-sm ac:hover:bg-primary/90", }, size: { default: "ac:h-9 ac:px-4 ac:py-2 ac:has-[>svg]:px-3" }, }, defaultVariants: { variant: "default", size: "default", }, } )
all
https://codesandbox.io/p/devbox/qkftty
The text was updated successfully, but these errors were encountered:
Successfully merging a pull request may close this issue.
Describe the bug
Tailwind prefix not working for Pseudo-classes classes.
Right now it's
const buttonVariants = cva( "ac:inline-flex ac:items-center ac:justify-center ac:gap-2 ac:whitespace-nowrap ac:rounded-md ac:text-sm ac:font-medium ac:transition-[color,box-shadow] disabled:ac:pointer-events-none disabled:ac:opacity-50 [&_svg]:ac:pointer-events-none [&_svg:not([class*=size-])]:ac:size-4 [&_svg]:ac:shrink-0 ac:ring-ring/10 dark:ac:ring-ring/20 dark:ac:outline-ring/40 ac:outline-ring/50 focus-visible:ac:ring-4 focus-visible:ac:outline-1 aria-invalid:focus-visible:ac:ring-0", { variants: { variant: { default: "ac:bg-primary ac:text-primary-foreground ac:shadow-sm hover:ac:bg-primary/90" }, size: { default: "ac:h-9 ac:px-4 ac:py-2 has-[>svg]:ac:px-3" }, }, defaultVariants: { variant: "default", size: "default", }, } )
But it should be
const buttonVariants = cva( "ac:inline-flex ac:items-center ac:justify-center ac:gap-2 ac:whitespace-nowrap ac:rounded-md ac:text-sm ac:font-medium ac:transition-[color,box-shadow] ac:disabled:pointer-events-none ac:disabled:opacity-50 ac:[&_svg]:pointer-events-none ac:[&_svg:not([class*=size-])]:size-4 ac:[&_svg]:shrink-0 ac:ring-ring/10 ac:dark:ring-ring/20 ac:dark:outline-ring/40 ac:outline-ring/50 ac:focus-visible:ring-4 ac:focus-visible:outline-1 ac:aria-invalid:focus-visible:ring-0", { variants: { variant: { default: "ac:bg-primary ac:text-primary-foreground ac:shadow-sm ac:hover:bg-primary/90", }, size: { default: "ac:h-9 ac:px-4 ac:py-2 ac:has-[>svg]:px-3" }, }, defaultVariants: { variant: "default", size: "default", }, } )
Affected component/components
all
How to reproduce
Codesandbox/StackBlitz link
https://codesandbox.io/p/devbox/qkftty
Logs
System Info
Before submitting
The text was updated successfully, but these errors were encountered: