Histoire Tailwind css should be in a layer

[mikaelh94]

Describe the bug

I use PrimeVue for my components, with the PrimeVue default style and my custom css on top of it.

PrimeVue's default styles are in a layer:

/* Order */
@layer reset, primevue;

When running Histoire, there is some Histoire/TW styles that are not in a layer and they override PrimeVue default styles: histoire-app/src/app/style/main.pcss

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

...

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body,
  pre {
    margin: 0;
  }

Since a css property defined without any layer will always have more specificity than a layered css property, those global styles should be in the @layer base no ? Like found in this tw issue

Look at my StackBlitz, the TW default border (border-color: #e5e7eb;) override my BaseInput invalid border color.

Reproduction

https://stackblitz.com/edit/histoire-vue3-starter-gvitle?file=src%2FBaseButton.story.vue

System Info

System:
    OS: macOS 14.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 78.06 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
  Browsers:
    Chrome: 125.0.6422.60
    Safari: 17.3.1
  npmPackages:
    @histoire/plugin-vue: ^0.17.17 => 0.17.17
    @vitejs/plugin-vue: ^5.0.4 => 5.0.4
    histoire: ^0.17.17 => 0.17.17
    vite: ^5.2.11 => 5.2.11

Used Package Manager

yarn

Validations

• [X] Follow our Code of Conduct
• [X] Read the Contributing Guidelines.
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[stackblitz[bot]]

Start a new pull request in StackBlitz Codeflow.

• histoire-vue3-starter-gvitle (Open reproduction)

[andreLuis1506]

I have the same problem. the css leaks into ours components. In my case borders not work