histoire-dev / histoire-dev/histoire

Nuxt: Histoire's Tailwind reset overwrites global styles

Open
#586 2 comments 8 reactions 0 assignees View on GitHub
to triage
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:

Screenshot 2023-08-24 at 08 31 02

Resulting in my global heading styles being overwritten by Histoire's Tailwind reset styles:

Screenshot 2023-08-24 at 08 24 34

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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.