[tailwindcss]: In Vue3 use tailwindcss darkMode

[creater]

Details

Recipe Page: tailwindcss
Recipe Template: tailwindcss
Browser:

What is wrong

add course

Screenshots

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
  content: [
      "./src/**/*.{vue, css, html, js}"
  ],
  darkMode: 'class',
  theme: {
    extend: {},
  },
  plugins: [],
}

preview.js

const withTailwindTheme = (StoryFn, context) => {
    console.log(context)
    const {theme} = context.globals;
    if (theme === "dark"){
        document.body.classList.add("dark")
    }else {
        document.body.classList.remove("dark")
    }

   return StoryFn()
}

export const decorators = [withTailwindTheme];

<template>
  <button type="button" class="bg-green-200 dark:bg-gray-400" @click="onClick" :style="style">{{ label }}</button>
</template>

[Shaun Evening]

Hi there,

Can you share a bit more information about what you’re asking for?

@storybook/addon-styling will work for you to switch themes. If you want to toggle via class names you can use the withThemeByClassName decorator

[Shaun Evening]

Hey folks 👋

I'm going to close this issue for now due to inactivity. However, please comment if this is still a problem and I'll reopen it for investigation.