Fix(separator): use data-[orientation] selectors to fix invisible separator in Tailwind v4

[syazwanz]

Summary

The Separator component in the base and radix registries uses data-horizontal: / data-vertical: custom variant shorthands for orientation styling.

These require @import "shadcn/tailwind.css" which defines the corresponding @custom-variant.

Without it, Tailwind v4 treats them as boolean attribute checks, the styles are never applied, and the separator renders invisible (0px height/width).

This replaces the shorthands with data-[orientation=horizontal]: / data-[orientation=vertical]: selectors to match the new-york-v4 style.

Related

• Refs [bug]: shadcn/Create: Tailwind data attribute selector fix: data-horizontal / data-vertical → data-[orientation=horizontal] #9196
• Related: fix(slider, scroll-area): use correct data-orientation attribute selectors #9380

[vercel]

@syazwanz is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[shadcn]

I see. any reason why you don't want the shadcn/tailwind.css custom variants?

[syazwanz]

I see. any reason why you don't want the shadcn/tailwind.css custom variants?

No issues with the custom variants themselves, but when I set up my project, @import "shadcn/tailwind.css" wasn't in my globals.css, so the separator was completely invisible. Took a while to figure out why.

Since new-york-v4 already uses the bracket syntax, this just aligns base and radix to match. Happy to close if you'd rather keep the custom variants though.

[redonearth]

In my case, when applying the data attribute shorthand syntax in the className of a newly updated component (e.g., data-[orientation=horizontal] in the Separator component was updated to data-horizontal), styles were missing and not applied.

To resolve this,

1. I created a new Vite project by referring to the installation page in the official documentation.
2. After completing the project setup, I looked inside the src folder and found the @import "shadcn/tailwind.css"; statement in index.css. I thought, `That's it,' and pasted it into my original project.
3. However, an error occurred immediately, and upon further inspection, I discovered that the shadcn package needed to be installed to execute this import.
4. I returned to the newly created project, opened package.json, and found shadcn added to the devDependencies. 5. After returning to the original project and running the pnpm i -D shadcn script, I finally confirmed that the custom variant I wanted was added to the styles.

The official documentation currently omits the section "Your project requires `@import "shadcn/tailwind.css"; in its CSS file, which requires the 'shadcn' package to be installed."

I believe the above should be added, as it only provides instructions for setting up a project for the first time, which could be confusing for people who have been using it for a long time, like me.