StorybookをReact viteの環境で作る

Viteいいですよね。最近はVite使うことが増えてきました。

本記事では、Storybook ReactとViteの環境で用意する手順を記載します。

空っぽのディレクトリにStorybookを入れることはできないのでまず最初にviteを入れてReact の環境を作ります。

npm create vite@latest
// <https://vitejs.dev/guide/>

上記コマンドを実行後フレームワークを聞かれるのでReactを選択

続いてStorybookのインストールをします。

npx storybook@latest init
// <https://storybook.js.org/docs/get-started/install>

続いてTailwindのインストールをします。

npm install -D tailwindcss postcss autoprefixer
// <https://tailwindcss.com/docs/installation/using-postcss>

TailwindのConfigを作成します。

npx tailwindcss init

これでコマンドによる環境構築は完了です。

続いてセットアップをしていきます。

//tailwind.config.ts
module.exports = {
	- content: [],
  + content: ["./src/**/*.{js,jsx,ts,tsx}"],
  ...
}

postcss.config.cjsというファイルを作成

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

src以下にTailwindのCSSを作成

// src/styles/tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

StorybookにTailwindのCSSを読み込むようにする

// .storybook/preview.ts
import type { Preview } from "@storybook/react";
+ import "tailwindcss/tailwind.css";

const preview: Preview = {
...

最後にnpm run storybookのコマンドを実行して起動を確認して、なにかTailwindcssのStyleを当てて動作確認ができれば完了です。