storybook darkmode not playing nice

So I am using storybook for my svelte + tailwind app, and I am now trying to make sure that I can toggle darkmode.

So for my tailwind.config.js I added this

module.exports = {  darkMode: "class",

and I installed this addon to storybookhttps://github.com/hipstersmoothie/storybook-dark-mode

with this config .storybook/preview.js

export const parameters = {  darkMode: {    darkClass: "dark",    stylePreview: false,  },

And by looking in the DOM of the storybook iframe I can see that "dark" is applied to the body.But when I create a component with this HTML

<div class="inline"><div class="w-8 h-8 bg-blue-500 dark:bg-green-500" /></div>

the box is always blue.So I thought maybe purgecss was removing it, and so I added safelist: ["dark"] to it's options but without any luck.

So to make things more complicated I tested this component

<div class="inline"><div class="w-8 h-8 bg-blue-500 dark:bg-green-500" /></div><div class="inline dark"><div class="w-8 h-8 bg-blue-500 dark:bg-green-500" /></div>

and to my surprise, one of the boxes turned green.

Honestly, I am not entirely sure if this is because of svelte, storybook, tailwind, or the darkmode storybook plugin.

But I would really appreciate help if anyone has seen something similar