Zenn
Open8

Nuxt3 + TailwindCSS + Storybook7の設定をする

Storybook
Tailwind CSS
Vue 3
Nuxt 3
Tatsu24Tatsu24

nuxt3にstorybook7(今はbeta)を入れたい。

以下で入れることができた。

$ npx sb@next init --type vue3
Tatsu24Tatsu24

tailwindのグローバルCSSの設定

assets/css/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Tatsu24Tatsu24

storybookでtailwindcssを読み込むために@storybook/addon-postcssを追加

$ npm i -D @storybook/addon-postcss
$ yarn add -D @storybook/addon-postcss
Tatsu24Tatsu24

storybookの設定

.storybook/main.js
module.exports = {
  stories: ["../components/**/stories/*.stories.@([jt]s?(x)|mdx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  framework: {
    name: "@storybook/vue3-webpack5",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
}
.storybook/previrew.js
import "../assets/css/main.css"

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}
Tatsu24Tatsu24

package.jsonに以下がなかったら追記する。

package.json
"scripts": {
    "storybook": "storybook dev -p 6006"
}

storybook起動

$ npm run storybook
$ yarn storybook
Tatsu24Tatsu24

postcss.config.jsファイルが必要だったみたい。

postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}