histoire-dev / histoire-dev/histoire
Histoire overrides Tailwind v4 styles when building
- Dominant language
- TypeScript
- Stars
- 3.6k
- Forks
- 212
- PR merge metrics
- No merged PRs in 30d
Description
### Describe the bug
Histoire seems to override certain Tailwind v4 classes, which causes the styles to look different in the built version compared to the dev version.
## Steps to reproduce
1. Clone the repository https://gitlab.com/alexander.muedespacher/histoire-tailwindv4/
2. Run `npm install`
3. Run `npm run story:dev` --> Open the browser and check the `TestComponent` story. You should see a green-ish button with an orange border and text.
4. Now, run `npm run story:build && npm run story:preview`
5. Open the browser and check the `TestComponent` story again in the built version.
## Expected behavior
- The button should look the same as in the dev version.
## Actual behavior
- The button looks different.
- The text color is now black
- The border is now invisible
## Observations
There seem to be overrides coming from a `histore` CSS file that are not present in the dev version. This is causing the button to look different in the build version.
```CSS
*, ::before, ::after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
```
```CSS
a, input, button {
color: inherit;
}
```
The issue does not occur in development mode, suggesting a difference in how stylesheets are bundled or applied.
### Reproduction
Repository: https://gitlab.com/alexander.muedespacher/histoire-tailwindv4/
### System Info
```shell
System:
OS: macOS 15.3
CPU: (16) arm64 Apple M3 Max
Memory: 1.90 GB / 64.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node
npm: 10.8.2 - ~/.nvm/versions/node/v20.18.0/bin/npm
pnpm: 9.14.2 - ~/Library/pnpm/pnpm
bun: 1.0.30 - ~/.bun/bin/bun
Browsers:
Chrome: 132.0.6834.112
Safari: 18.3
npmPackages:
@histoire/plugin-vue: ^0.17.17 => 0.17.17
@vitejs/plugin-vue: ^5.1.4 => 5.2.1
histoire: ^0.17.17 => 0.17.17
vite: ^5.4.10 => 5.4.14
```
### 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 the linked minimal reproduction and run npm install, npm run story:dev, and npm run story:build && npm run story:preview. Compare the TestComponent story and the generated CSS, especially the Histoire rules for buttons, borders, and text. Done means the built preview matches development without overriding the Tailwind v4 styles.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- tailwindcss, typescript, vite
- Domain
- build-system, frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100