Tailwind classes not working when changed in actions

[lopermo]

Version

@nuxtjs/storybook: 3.3.1 nuxt: 2.14.12

Reproduction Link

The sandbox provided in the example doesn't work. https://codesandbox.io/s/github/nuxt-community/storybook/tree/master/examples/tailwind

What is actually happening?

Copy the same config as in the sandbox and everything works alright, but when I set up a story with tailwind classes and it works alright, it's displayed with the right styles in the canvas; but when I modify the classes through actions, it will only work if I set the default ones. e.g: it'll only load the tailwind classes that come as "default" from the component (text-orange-700 as default will work, but change it through actions to text-orange-800 and it won't work, change it back to text-orange-700 and it works again).

Code

<template>
  <div :class="['px-6 py-2 font-medium rounded-lg w-max', styles]">
    <slot>{{ text }}</slot>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: "Placeholder",
    },
    styles: {
      type: String,
      default: "bg-yellow-100 text-yellow-600",
    },
  },
};
</script>

import MyBadge from './Badge'
export default {
  title: 'Badge',
  component: MyBadge,
  argTypes: {
    styles: { control: 'text' },
    text: {
      control: 'text',
      defaultValue: 'Placeholder'
    }
  }
}

export const Badge = (arg, { argTypes }) => ({
  components: { MyBadge },
  props: Object.keys(argTypes),
  template: '<Badge v-bind="$props" />'
})

[philwolstenholme]

Are you purging your Tailwind classes? If you add the text-orange-800 class via your browser's devtools rather than Storybook does the text colour change?

[lopermo]

Are you purging your Tailwind classes? If you add the text-orange-800 class via your browser's devtools rather than Storybook does the text colour change?

this is my tailwind config: As you can see, I tried with only purging in production, and then I commented the whole thing, still nothing. I did what you suggested and nothing changes. I can't find the classes anywhere in the devtools

module.exports = {
  // purge: {
  //   enabled: process.env.NODE_ENV === 'production',
  //   content: [
  //     'components/**/*.vue',
  //     'layouts/**/*.vue',
  //     'pages/**/*.vue',
  //     'plugins/**/*.js',
  //     'nuxt.config.js',
  //   ]
  // },
  theme: {
    extend: {
      colors: {
        "ghost": "#f9f9fe",
        header: {
          "light": '#423f76',
          DEFAULT: "#110f52"
        }
      },
      fontFamily: {
        sans: ['JakartaSans', 'sans-serif'],
        body: ['JakartaSans', 'sans-serif']
      }
    }
  },
  variants: {
    translate: ({ after }) => after(['group-hover'])
  }
}

[philwolstenholme]

If adding the class via devtools isn't working then I think it means Tailwind hasn't generated a class with that name.

It sounds like this isn't a Nuxt or Storybook issue but maybe an issue with your Tailwind config? Since commenting out the purging have you restarted the Postcard/Tailwind CLI command e.g. by closing your terminal session or window? I wonder if Tailwind is still purging? 🤔

[lopermo]

Yup, did all that. This is my nuxt config, just in case you see something I'm missing:

storybook: {
    stories: [],
    parameters: {},
    webpackFinal(config) {
      return config
    },
},
tailwindcss: {
    jit: true,
    exposeConfig: true
},
build: {
    extractCSS: true,
    filenames: {
      app: ({ isDev }) => (isDev ? '[name].js' : '[contenthash].js'),
      chunk: ({ isDev }) => (isDev ? '[name].js' : '[contenthash].js'),
      css: ({ isDev }) => (isDev ? '[name].css' : '[contenthash].css'),
      img: ({ isDev }) =>
        isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]',
      font: ({ isDev }) =>
        isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]',
      video: ({ isDev }) =>
        isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]'
    },
    transpile: [],
    extend(config, ctx) {
      config.module.rules.push({
        test: /\.vue$/,
        loader: 'vue-svg-inline-loader',
        options: {}
      })
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push(
          {
            test: /\.vue$/,
            loader: "vue-svg-inline-loader",
            options: {},
          }
        );
      }
      config.resolve.alias.vue = "vue/dist/vue.common";
    },
    postcss: {
      preset: {
        autoprefixer: {
          add: true,
          grid: false
        }
      }
    }
  },

And my package.json

"dependencies": {
    "@nuxtjs/axios": "^5.12.5",
    "core-js": "^3.9.1",
    "lodash": "^4.17.21",
    "nuxt": "^2.15.4",
    "nuxt-vuex-localstorage": "^1.3.0",
    "postcss-loader": "^4.2.0",
    "vue-clickaway": "^2.2.2",
    "vue-lodash": "^2.1.2",
    "vue-svg-inline-plugin": "^2.2.0",
    "vuex-persistedstate": "^4.0.0-beta.3"
  },
  "devDependencies": {
    "@nuxtjs/prismic": "^1.2.6",
    "@nuxtjs/storybook": "^3.3",
    "@nuxtjs/tailwindcss": "^4",
    "@storybook/addon-postcss": "^2.0.0",
    "eslint": "^7.23.0",
    "fibers": "^5.0.0",
    "nuxt-vite": "0.0.36",
    "postcss": "^8",
    "sass": "^1.32.8",
    "sass-loader": "^10.1.1",
    "vue-server-renderer": "^2.6.12",
    "vue-svg-inline-loader": "^2.1.2",
    "vue-svg-loader": "^0.16.0",
    "vue-template-compiler": "^2.6.12"
  },
  "resolutions": {
    "postcss": "8.1.7"
  }

[lopermo]

I pushed to a public repository so that you can see what I mean: https://github.com/lopermo/newlopermo.com/tree/storybook

[Rigo-m]

You need to enable purge and use it to read class names from components and stories.

[farnabaz]

Hey @lopermo, Sorry for the late response Your configuration seems fine for me, and it works as expected. If you want to use extended colors like orange take a look at tailwind docs

[AugustBurnsRed]

@lopermo

Hi, i had the same problem. I wanted to add custom class in tailwind.config.js. They were being loaded in the Nuxt side of the app but not in Storybook.

To fix it, i used the custom config like this: https://storybook.nuxtjs.org/advanced/manual-setup. After in my .storybook/main.js, in webpackFinal i added:

config.module.rules.push({ test: /\.css$/, use: [ { loader: 'postcss-loader', options: { postcssOptions: { plugins: [require('tailwindcss'), require('autoprefixer')], }, }, }, ], include: path.resolve(__dirname, '../'), })

[tobiasdiez]

v4 of this module is no longer actively supported. Please try the newest version and open an new issue if the problem persists. Thank you for your understanding.