-
-
Notifications
You must be signed in to change notification settings - Fork 189
New issue
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
Histoire Tailwind css should be in a layer #721
Comments
Start a new pull request in StackBlitz Codeflow. |
I have the same problem. the css leaks into ours components. In my case borders not work |
i think that's the same problem as in #339 |
It is hacky, but a way to put the css of histoire in a separate layer, is to include the following code into
This will create a This was inspired by the solution of @qexk #339 (comment). |
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:
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
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
Used Package Manager
yarn
Validations
The text was updated successfully, but these errors were encountered: