histoire icon indicating copy to clipboard operation
histoire copied to clipboard

Nuxt: Histoire's Tailwind reset overwrites global styles

Open t0byman opened this issue 1 year ago • 2 comments

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

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

t0byman avatar Aug 25 '23 08:08 t0byman