unovue/shadcn-vue

Reproduction

Checkout v4-docs branch, run pnpm install && pnpm dev:v4, open http://localhost:3000/docs/components/toggle-group

Describe the bug

I've run into a really obscure bug while working on the v4 docs which may have to do with the tailwind setup or may even be a bug in tailwindcss or @tailwindcss/vite itself.

The visual issue

I discovered this on the Toggle Group documentation page, where the example looks off, because it has no rounded borders like in shadcn/ui:

Expected (shadcn/ui docs):

I didn't check anything further places so far, so there might be more things affected by this issue.

The CSS issue

The CSS causing this issue is an !important statement inside the border-none utility class which is applied to the ToggleGroup component. Notice: it isn't set on ToggleGroup as !border-none, but rather the utility class from tailwindcss on the utilties layer itself, which shouldn't be there!

Here's what it looks like in Chrome DevTools (same for Firefox and Safari):

Here comes the fun part! When I replace this statement in themes.css: https://github.com/unovue/shadcn-vue/blob/8f9e45ad74b07036bd6f216f9f6a9a2ff81d8047/apps/v4/assets/css/themes.css#L224 and replace it with raw css instead of using the @apply classes:

[data-slot="toggle-group"],
[data-slot="toggle-group-item"] {
  border-radius: 0 !important;
  box-shadow: none !important;
}

the issue goes away and it works just like in shadcn/ui! The rounded-none class only contains the border-radius: 0; class like it should. This is also the case when inspecting this element on the official shadcn/ui documentation site.

Further investigation

I've tried isolating the issue and comparing why this works in shadcn/ui but not here.

• tried downgrading the tailwindcss dependency from "tailwindcss": "^4.1.14" to "tailwindcss": "4.1.11" like in shadcn/ui currently. Didn't change anything tho.
• tried it with building and previewing the docs with pnpm build:v4 and then previewing them. No change, so it's not because of the dev server.
• tried it with the exact current theme.css configuration from shadcn/ui (see PR #1474 ). This didn't change anything either.

The only difference that I can see from the tailwind in this project to the one shadcn/ui is using is that they're using @tailwindcss/postcss instead of @tailwindcss/vite for the docs as it's Next.js and not Nuxt of course.

My conclusion

Am I missing something obvious here? 🤔

If not, my best guess is that this is an actual bug of tailwindcss or tailwindcss/vite with having an @apply with !important prefixes on utility statement in global css causing this to be set with wrong scope inside the actual utility class.

What are your thoughts on this, should we maybe just apply the temporary fix for this that I described above?

Sorry for the lengthy issue description, but I want to provide as much context as possible 😅

System Info

shadcn-vue: latest v4-docs branch
OS: macOS Sequoia 15.7
Chrome: 141.0.7390.66
Edge: 118.0.2088.57
Firefox: 139.0.4
Safari: 18.6

Contributes

• I am willing to submit a PR to fix this issue
• I am willing to submit a PR with failing tests