Discussion on: How to configure Tailwindcss for Svelte and Storybook (2020 Update)

View post

Hello there, Great article!

Anyways, for anyone that is having an issue with your postcss-import issue or any PostCSS 8 compatibility issue that would look like this on the error:

Error: PostCSS plugin postcss-import requires PostCSS 8

At the time of writing this (Which is March 14, 2021), Here's what you need to do:

npx sb@next init --type svelte instead of npx sb init --svelte This is because the StoryBook developer has updated the dependency issue in their pre-release branch.
It's going to ask you to install sb@next, press [ Enter ]

Here's a GitHub issue for this problem:
github.com/storybookjs/storybook/i...

To future proof this for StoryBook 7:

run npm i -D @storybook/addon-postcss or yarn install -D @storybook/addon-postcss
Include @storybook/addon-postcss inside the main.js.

//.storybook/main.js

const sveltePreprocess = require("svelte-preprocess");

module.exports = {
  stories: ["../stories/**/*.stories.js"],
  addons: ["@storybook/addon-knobs', '@storybook/addon-postcss"], // <- Add it here

  webpackFinal: async (config) => {
    const svelteLoader = config.module.rules.find(
      (r) => r.loader && r.loader.includes("svelte-loader")
    );
    svelteLoader.options = {
      ...svelteLoader.options,
      preprocess: sveltePreprocess({ postcss: true }),
    };

    return config;
  },
};