histoire-dev / histoire-dev/histoire
Nuxt: Histoire's Tailwind reset overwrites global styles
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### 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
```shell
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](https://github.com/histoire-dev/histoire/blob/main/CODE_OF_CONDUCT.md)
- [X] Read the [Contributing Guidelines](https://github.com/histoire-dev/histoire/blob/main/CONTRIBUTING.md).
- [X] Read the [docs](https://histoire.dev/guide/).
- [X] Check that there isn't [already an issue](https://github.com/histoire-dev/histoire/issues) 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](https://github.com/histoire-dev/histoire/discussions).
- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.
Contributor guide
Research direction
Start with histoire.setup.ts in the Nuxt StackBlitz reproduction, select BaseButton, and inspect the h5 and the style tag marked data-vite-dev-id. Compare it with the Vue reproduction; done means the Nuxt setup no longer lets Histoire's Tailwind reset overwrite styles imported from main.css.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxt, tailwindcss, typescript
- Domain
- frontend, web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100