Remix v2 に Storybook と tailwindcss を導入する時の手順

最近は Remix を勉強していて、Spine はお休みしようと思ってます。
表題について、ちょっと導入に詰まったりしたので整理も兼ねて記事にしてみました。

実際のソースコードはコチラです。

Remix のインストール

1. npx create-remix@latest 任意のディレクトリ名 を実行
   • 何か聞かれた場合は yes で OK です。
2. cd 任意のディレクトリ名 を実行
   • npm package をインストールしていないなら、npm i を実行
3. npm run dev を実行
   • http://localhost:3000/ にアクセスできて、ページが表示されていれば、正しく Remix がインストールされています。

Remix に tailwindcss を導入

Install Tailwind CSS with Remix のページの通りにやっていけば OK です。

1. npm install -D tailwindcss を実行
2. npx tailwindcss init --ts を実行
   • プロジェクトのルートディレクトリに tailwind.config.ts が作成されます
3. tailwind.config.ts の content を ['./app/**/*.{js,jsx,ts,tsx}'] に変更
   • > tailwind.config.ts
4. app ディレクトリ配下に tailwind.css を作成。内容は以下の通りです
   • > app/tailwind.css
   app/tailwind.css

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

5. app/root.tsx を以下のように編集
   • > app/root.tsx
   app/root.tsx

   // import { cssBundleHref } from "@remix-run/css-bundle"; // <- コメントアウト
   // …略…
   import stylesheet from "~/tailwind.css"; // <- 新規追加
   
   export const links: LinksFunction = () => [
     { rel: "stylesheet", href: stylesheet }, // <- 新規追加
     // ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []), // <- 既存のコードをコメントアウト
   ];
   
   export default function App() {
     return (
       // …略…
     );
   }
   

6. app/routes/_index.tsx を以下のように編集
   • > app/routes/_index.tsx
   app/routes/_index.tsx

   import type { MetaFunction } from "@remix-run/node";
   // …略…
   export default function Index() {
     return (
       <div>
         <h1 className="text-3xl font-bold underline">Hello world!</h1> {/* <- tailwindcss で構築した HTML を記述する */}
       </div>
     );
   }
   

7. npm run dev を実行
   • http://localhost:3000/ にアクセスできて、tailwindcss が適用されているのを確認できれば OK です。

Remix に Storybook を導入

1. npx storybook@latest init を実行
   • We were not able to detect the right builder for your project. Please select one: は Vite を選択
   • Would you like to install it? は Yes を選択
2. npm run storybook を実行
   • http://localhost:6006/ にアクセスできて、storybook が表示されていれば OK です。
3. 自動生成される stories ディレクトリは不要なので、ディレクトリごと削除

Storybook に tailwindcss を適用

1. .storybook/main.ts の config.stories を stories: ['../app/**/*.mdx', '../app/**/*.stories.@(js|jsx|mjs|ts|tsx)'] に更新する
   • > .storybook/main.ts
2. .storybook/preview.ts の冒頭に import '../app/tailwind.css' を追記する
   • > .storybook/preview.ts
   • ここまでやれば、Storybook に tailwindcss が適用される…と思いきや、もう数ステップ必要です。
3. npm i -D postcss autoprefixer を実行
4. プロジェクトのルートディレクトリ直下に postcss.config.js を作成する。内容は以下の通り
   • > postcss.config.js
   postcss.config.js

   export default {
     plugins: {
       tailwindcss: {},
       autoprefixer: {}
     }
   }
   

ここまでくれば Storybook に tailwindcss が適用されています。

動作検証

以降はただの動作検証なので、実施する必要はありません。

1. 検証用として app/components/button.tsx と app/components/button.stories.tsx を作成
   • > app/components/button/button.tsx
   app/components/button/button.tsx

   import { PropsWithChildren } from 'react'
   
   type PropsButton = {
     handleClick: Function
   }
   
   export const Button = ({ handleClick }: PropsWithChildren<PropsButton>) => {
     return (
       <button
         className="bg-blue-500 text-white font-bold py-2 px-4 rounded"
         onClick={() => handleClick()}
       >
         Button
       </button>
     )
   }
   

   • app/components/button/button.stories.tsx
   app/components/button/button.stories.tsx

   import type { Meta, StoryObj } from '@storybook/react'
   import { Button } from './button'
   
   const meta = {
     title: 'Button',
     component: Button,
     parameters: {
       layout: 'centered'
     },
     tags: ['autodocs']
   } satisfies Meta<typeof Button>
   
   export default meta
   type Story = StoryObj<typeof meta>
   
   export const Base: Story = {
     args: {
       handleClick: () => console.log('Stroybook')
     }
   }
   

2. npm run storybook を実行
   • http://localhost:6006/ にアクセスできて、Button コンポーネントに tailwindcss が適用されていれば OK です。

まとめ

以上。「Remix v2 に Storybook と tailwindcss を導入する時の手順」でした。
postcss と autoprefixer が必要なのが分からないまま、右往左往してました。。