📝
【Next.js14 AppRouter】storybookでtailwindCSSを使用する方法
はじめに
本記事では、Next.js14のプロジェクトにstorybookを導入し、tailwindCSSをstorybookに適用する方法について解説します。
バージョン
- Next.js 14.0.3
- storybook 7.6.2
- tailwindcss 3.3.0
Next.jsプロジェクトの作成
以下のコマンドを実行し、質問に対して、以下のように回答します。
fish
npx create-next-app --typescript
Need to install the following packages:
create-next-app@14.0.3
Ok to proceed? (y) y
✔ What is your project named? … storybook-tutorial-yt
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Creating a new Next.js app in /Users/hogefuga/dev/nextProjects/storybook-tutorial.
storybookの導入
以下のコマンドを実行し、storybookをプロジェクトに導入します。
（質問にはyを入力してください）
fish
npx storybook@latest init
tailwindCSSとstorybookを連携
①tailwind.configの編集
contentに、storiesディレクトリ配下を追加します。
tailwind.config.ts
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
// 以下を追加
'./src/stories/**/*.{js,ts,jsx,tsx,mdx}',
],
②.storybook内のファイル編集
tailwindCSSのディレクティブを記載したファイルをimportします。
私の場合は、Next.jsのAppRouterを使用しているため、/appに存在しています。
（ここのパスは各PJで置き換えて使用してください）
preview.ts
import '../src/app/globals.css'
これとは別の設定にはなりますが、import文で@/hoge/fugaというエイリアスをstorybookでも使用したい場合は、以下のようにwebpackFinalを設定に追加する必要があります。
main.ts
import type { StorybookConfig } from "@storybook/nextjs";
import path from "path";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-onboarding",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/nextjs",
options: {},
},
docs: {
autodocs: "tag",
},
// webpackFinalを追加
webpackFinal: async (config) => {
config.resolve = config.resolve || {}
config.resolve.alias = {
...config.resolve?.alias,
"@": path.resolve(__dirname, "../src"),
};
return config;
}
};
export default config;
③tailwindCSSが使用できるか確認
デフォルトで作成されているButton.tsxで確認してみます。
適当にtailwindCSSのClassを適用させてみましょう。
Button.tsx
import './button.css'
import React from 'react'
interface ButtonProps {
/**
* Is this the principal call to action on the page?
*/
primary?: boolean
/**
* What background color to use
*/
backgroundColor?: string
/**
* How large should the button be?
*/
size?: 'small' | 'medium' | 'large'
/**
* Button contents
*/
label: string
/**
* Optional click handler
*/
onClick?: () => void
}
/**
* Primary UI component for user interaction
*/
export const Button = ({
primary = false,
size = 'medium',
backgroundColor,
label,
...props
}: ButtonProps) => {
// ここで確認します
const mode = primary
? 'bg-sky-500 text-red-500'
: 'storybook-button--secondary'
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(
' ',
)}
{...props}
>
{label}
<style jsx>{`
button {
background-color: ${backgroundColor};
}
`}</style>
</button>
)
}
以下のコマンドでstorybookカタログを起動して確認します。
fish
yarn storybook
tailwindCSSが適用されていたら成功です。
もし適用できていなかったら、以下の記事の方法を試してみてください。
私はなくても適用できたのですが、@storybook/addon-postcssというアドオンが必要かもしれません。
Discussion