Tailwind styles have stopped working since upgrade to V7.

[brittle kelp]

Since updating to V7 my tailwind styles are not longer working

This was my old config (main.js)

const path = require('path');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  stories: ['../**/*.stories.mdx', '../**/*.stories.@(js|jsx|ts|tsx)'],
  /** Expose next public folder to storybook as static */
  staticDirs: ['../public'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
    },
    "storybook-css-modules",
  ],
  core: {
    builder: 'webpack5',
  },
  webpackFinal: (config) => {
    config.resolve.alias = {
      ...config.resolve?.alias,
      '@': [path.resolve(__dirname, '../'), path.resolve(__dirname, '../')],
    };

    config.resolve.roots = [
      path.resolve(__dirname, '../public'),
      'node_modules',
    ];

    config.resolve.plugins = [new TsconfigPathsPlugin()];

    return config;
  },
};

And this is my new main.ts

import type { StorybookConfig } from "@storybook/nextjs";
const config: StorybookConfig = {
  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links", 
    "@storybook/addon-essentials", 
    "@storybook/addon-interactions",
    {
      name: '@storybook/addon-postcss',
      options: {
        postcssLoaderOptions: {
          implementation: require('postcss'),
        },
      },
   },
  ],
  framework: {
    name: "@storybook/nextjs",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },

  /** Expose next public folder to storybook as static */
  staticDirs: ['../public'],
};
export default config;

I also have import '../assets/main.css'; at the top of preview.ts. I saw a couple of threads we similar issues, but i couldnt see a solution. Any ideas?

[bleak spear]

Have you checked out storybook’s addon-styling?

[brittle kelp]

hey Ivan, thanks for the reply, I tried the addon styling but to no avail. I will try again just to double check

[bleak spear]

cc @summer sorrel ^

[brittle kelp]

so i removed addon-postcss and replaced with addon-styling and i now get ModuleBuildError: Module build failed (from ./node_modules/babel-loader/lib/index.js): TypeError: [BABEL] /Users/jimmy/Documents/dev/petculture2/storybook-config-entry.js: Property key of ObjectProperty expected node to be of a type ["Identifier","StringLiteral","NumericLiteral"] but instead got "Identifier" (While processing: "base$0")

or do you recommend I add both addons?

[summer sorrel]

Hey @brittle kelp you should definitely remove the postcss preset

However the @storybook/nextjs framework you have in main should configure postcss for you

The error you’re getting is for a babel loader 🤔 do you have a babelrc or babel.config.js?

Actually.... what's this storybook-config-entry.js file you have?

[brittle kelp]

I have no idea, i have no record of that file on my machine. Very strange. this is the root of my project and its not listed. Very very strange.

On the babel side of things we dont have a babel config, seems alot of the dependencies rely on babel under the hood though

[brittle kelp]

the error seems related to addon-styling package, because if i uninstall that error goes away. Still no styles though on the components

[brittle kelp]

So i have gone back to just a simple main.ts storybook starts but still no styles from tailwind, not sure whats changes between the v6 and v7

[summer sorrel]

from @storybook/addon-styling? interesting! what version of that are you using??

[brittle kelp]

`^0.3.1, super weird seeing as I had it all working in v6, even if i replicate the config using the migration script

[summer sorrel]

Weird! Let me dig into this a bit today 🙂 I'm not sure why this would be causing babel issues 🤔

[bleak spear]

@brittle kelp do you happen to have a link to your project, or a reproduction that shows the issue? Maybe you can create one using https://storybook.new ?

[brittle kelp]

yep ill throw something together, thanks again guys for helping

[runic wedge]

Hey, any updates on the issue?

I just setup a new storybook project with v7 and have not succeed to have tailwind working on my stories

[bleak spear]

@runic wedge have you tried https://github.com/storybookjs/addon-styling?

[runic wedge]

Not at all

I will try right now

Nope it ain't working either with addon-styling installed

[bleak spear]

If you can make a reproduction that would be helpful.

[runic wedge]

Here is my main.ts file:

import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin'

const config: StorybookConfig = {
  stories: [
    '../../pwa-cedh/src/**/*.stories.tsx',
    '../../packages/core/src/**/*.stories.tsx',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling',
      options: {
        postCss: true,
      },
    },
    '@storybook/addon-a11y',
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  staticDirs: ['./public', '../../pwa-cedh/public', '../../pwa-cdfh/public'],
  docs: {
    autodocs: 'tag',
  },
  babel: async options => ({
    ...options,
    rootMode: 'upward',
  }),
  webpackFinal: async config => {
    config.resolve = {
      ...config.resolve,
      plugins: [
        ...(config.resolve?.plugins ?? []),
        new TsconfigPathsPlugin({
          extensions: config.resolve?.extensions,
        }),
      ],
    }

    return config
  },
}
export default config```

[summer sorrel]

Hey @runic wedge Can I see your preview.ts , potcss.config.js, and tailwind.config.js?

[runic wedge]

Hey sure,

preview.ts

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
    },
    actions: {argTypesRegex: '^on[A-Z].*'},
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

postcss.config.js

  plugins: ['tailwindcss', 'autoprefixer'],
};

[summer sorrel]

So you need to import your css file in preview.ts

[runic wedge]

which css file?

tailwind.config.js

  content: [
    '../pwa-cedh/src/**/*!(*.stories|*.spec).{ts,tsx}',
    '../pwa-cdfh/src/**/*!(*.stories|*.spec).{ts,tsx}',
    '../packages/core/**/*!(*.stories|*.spec).{ts,tsx}',
  ],
  presets: [require('@ecoles/tailwind-config')],
}

[summer sorrel]

import type {Preview} from '@storybook/react'

+import '../src/path/to/tailwind.css;

const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'light',
    },
    actions: {argTypesRegex: '^on[A-Z].*'},
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

[runic wedge]

I forgot to mention this is a monorepo and I have my tailwind config inside a local package

[summer sorrel]

hmmmm okay... so that's a little different. This postcss set up needs to know to inject the css file into Storybook's iframe

To be clear, your css file that has the tailwind imports like below is in a local package?

@tailwind base;
@tailwind components;
@tailwind utilities;

[runic wedge]

no in fact there two different main.css (that import tailwind like the code above) files in two different pwa

That would mean I have to import the two generated css files in the preview?

Sorry that was confusing, I think I've got it

thanks for your answer

[summer sorrel]

That is probably the way to go 🙂 However, I'm not fully certain if that will cause any conflicts or duplication 🤔

[runic wedge]

yeah I think so

[summer sorrel]

No need to apologize! It's all good

[runic wedge]

I will manage to include only one since they share the same theme

anyway have a good evening, thanks for your time