You could try ignoring purgecss when watching for storybook.

I am not sure about your exact setup but in my case I added a conditional in postcss.config.js for storybook to work correctly:

const isProduction =
  !process.env.ROLLUP_WATCH &&
  !process.env.LIVERELOAD &&
  process.env.NODE_ENV !== 'development'

module.exports = {
  plugins: [
    require('tailwindcss'),
    ...(isProduction ? [purgecss] : [])
  ]
};

My .storybook/preview.js contains the following:

export const parameters = {
  darkMode: {
    stylePreview: true,
    darkClass: 'dark',
    lightClass: 'light',
  }
}

The only thing which still doesn’t work after this is the white text in dark mode, so I had to add .dark { color: white; } to my css.

I had this issue as well but it was because I defined a prefix of vc- in my tailwind.config.js file.

When I configured the addon https://github.com/hipstersmoothie/storybook-dark-mode, I used the class dark not vc-dark in .storybook/preview.js:

export const parameters = {
  darkMode: {
    dark: { ...themes.dark },
    light: { ...themes.light },
    darkClass: 'dark',
    stylePreview: true
  }
}

should be

export const parameters = {
  darkMode: {
    dark: { ...themes.dark },
    light: { ...themes.light },
    darkClass: 'vc-dark',
    stylePreview: true
  }
}

Not sure if you, (OP), have a prefix defined in your tailwind.config.js file but it’s something to watch out for, if others are having the same issue.

Even with the prefix, you can still use the dark variant normally, just don’t forget to use the prefix when referencing class names after the variant:

<div class="vc-bg-blue-500 dark:vc-bg-green-500" />

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 storybook
https://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