Describe the bug

I'm integrating TailwindCSS v4 in Vitepress, and I found that the styles of one of my components were inexplicably not taking effect. After debugging, I found that the styles set by TailwindCSS were declared in @layer. Since the CSS layer mechanism is that anonymous layers will override named layers (if there is a conflict), the styles in base.css always have the highest priority (in my case) because it is not wrapped by a layer. According to the CSS @layer rule, the styles in base.css will be collected into the anonymous layer.

More context: heroui-vue/heroui-vue#141 (comment)

Reproduction

Check the styles of the Button component, its background color is transparent because the background-color set by TailwindCSS is overwritten by VitePress's base.css

Expected behavior

The set style will not be overwritten

System Info

System:
    OS: Linux 6.14 Ubuntu 24.04.2 LTS 24.04.2 LTS (Noble Numbat)
    CPU: (18) x64 Intel(R) Core(TM) Ultra 5 125H
    Memory: 13.92 GB / 30.85 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.14.0 - ~/.nvm/versions/node/v22.14.0/bin/node
    npm: 10.9.2 - ~/.nvm/versions/node/v22.14.0/bin/npm
    pnpm: 10.14.0 - ~/oss/nextui-vue/node_modules/.bin/pnpm
    bun: 1.2.7 - ~/.bun/bin/bun
  Browsers:
    Chrome: 139.0.7258.66

Additional context

No response

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.