histoire-dev / histoire-dev/histoire

Histoire overrides Tailwind v4 styles when building

Open
#779 5 comments 6 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

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

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.