histoire
histoire copied to clipboard
Nuxt: Histoire's Tailwind reset overwrites global styles
Describe the bug
I load my global styles as a main.css in histoire.setup.ts like import './assets/css/main.css';
. However, these global styles get overwritten by Histoire's Tailwind reset styles because the style tag (search for data-vite-dev-id
) is loaded after the main.css and not before it:
Resulting in my global heading styles being overwritten by Histoire's Tailwind reset styles:
Let me know if this issue belongs in https://github.com/nuxt-modules/tailwindcss/issues
Reproduction
https://stackblitz.com/edit/histoire-nuxt3-starter-qfowrz?file=histoire.setup.ts
Choose BaseButton
and then inspect the h5.
This is not the case in a vue3 setup without Nuxt or @histoire/plugin-nuxt: https://stackblitz.com/edit/histoire-vue3-starter-jcvvhd?file=histoire.setup.ts
System Info
Just from StackBlitz:
System:
OS: Linux 5.0 undefined
CPU: (2) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 0 Bytes / 0 Bytes
Shell: 1.0 - /bin/jsh
Binaries:
Node: 16.20.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 9.4.2 - /usr/local/bin/npm
pnpm: 8.6.10 - /usr/local/bin/pnpm
npmPackages:
@histoire/plugin-nuxt: ^0.17.0 => 0.17.0
@histoire/plugin-vue: ^0.17.1 => 0.17.1
histoire: ^0.17.0 => 0.17.0
Used Package Manager
npm
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.