Histoire doesn't load tailwind styles

[swyxio]

Describe the bug

see here: https://histoire-build-bug-demo.netlify.app/story/src-components-featurecard-story-svelte?variantId=_default

the repro/code for this is here: swyxio/swyxkit#113

this component is written in tailwind, it is supposed to look like this

but histoire looks like this (both in dev and in build)

so i think its pretty clear that the tailwind styles are not loading.

Reproduction

repro: swyxio/swyxkit#113 (in the same histoire branch, which i've overwritten to reflect the latest histoire version)

System Info

System:
    OS: macOS 12.5.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 197.92 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.15.0 - ~/Library/Caches/fnm_multishells/1002_1664767773366/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.5.5 - ~/Library/Caches/fnm_multishells/1002_1664767773366/bin/npm
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 15.6.1
  npmPackages:
    @histoire/plugin-svelte: ^0.11.0 => 0.11.0
    histoire: ^0.11.0 => 0.11.0

[Akryum]

You need to add CSS with a setup file.

Then in that setup file import the CSS file with:

@tailwind base;
@tailwind components;
@tailwind utilities;

---

Change the histoire config with:

{
  // ...
  setupFile: '/src/histoire-setup.ts',
}

Create an src/histoire-setup.ts file:

import './tailwind.css'

[Ishadijcks]

Can confirm that it is still not working

[Ishadijcks]

It does seem to work after build && preview, just not in in `dev

[romanslonov]

Try clear your browser cache If tailwind's styles are not loading. For me it fixes issue.

[Ishadijcks]

Thanks for the tip. It was working for me suddenly yesterday, maybe that was the cause!

[Thebigbignooby]

@romanslonov thanks! One year later I am still running into this, your comment was helpful!

[Eliophot]

On the other hand, if you have dynamic colors, the rendering does not work unless you add this in the tailwind configuration: https://v2.tailwindcss.com/docs/optimizing-for-production#safelisting-specific-classes