Next.js の Storybook に Tailwind CSS の font-family を適用させる
こんにちは。Gaji-Labo 横田です。今回は Next.js の Storybook に Tailwind CSS のカスタムクラスでオーバーライドした font-family を適用させる方法を紹介します。
前提
動作を確認したバージョンは以下となります。各フレームワークのインストール・設定方法については割愛します。
- Next.js 14
- Tailwind CSS 3
- Storybook 8
- Storybook for Next.js 8
Storybook の Decorators を使う
Storybook には Decorators という機能があり、コンポーネントカタログとしてストーリーの見た目を調整することができます。
公式：https://storybook.js.org/docs/writing-stories/decorators
import type { Meta } from '@storybook/react';
import { YourComponent } from './YourComponent';
const meta: Meta<typeof YourComponent> = {
component: YourComponent,
decorators: [
(Story) => (
<div style={{ margin: '3em' }}>
{/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it */}
<Story />
</div>
),
],
};
export default meta;公式サイトよりコードを引用しました。
このような感じで、個別のコンポーネントファイルごとに decorators:[] の中で style 属性を直接指定し、ストーリーのコンポーネントに余白などのスタイルを追加することができます。
今回は、Tailwind CSS のカスタムクラスでオーバーライドしたオリジナルの font-family を全てのストーリーに設定したいので、まず、tailwind.config.ts で Tailwind CSS の font-family クラスをオーバーライドします。
import type { Config } from 'tailwindcss';
const config = {
theme: {
// font-family をオーバーライド
// Tailwind CSS デフォルトの font-family と併用して使用するケースは少ないので extend しない
fontFamily: {
myCustom: [
'ui-serif',
'Georgia',
'Cambria',
'"Times New Roman"',
'Times',
'serif',
],
},
},
} satisfies Config;
export default config; 任意の css ファイルで Tailwind CSS の各レイヤーのディレクティブを指定しておきます。
@tailwind base;
@tailwind components;
@tailwind utilities;次にフォントをレンダリングするために Next.js の layout.tsx で font-family を指定しておきます。これをしないと tailwind.config.ts とStorybook でクラスを指定していてもフォントがレンダリングされません。
import '@/styles/globals.css';
...
<body className='font-myCustom'>Storybook の設定ファイル .storybook/preview.tsx で上記の css ファイルを import し、 decorators:[] の中でカスタムクラスを設定します。
import React from 'react'
import type { Preview } from '@storybook/react';
import '@/styles/globals.css';
const preview: Preview = {
decorators: [
(Story) => {
return (
<div className='font-myCustom'>
<Story />
</div>
)
}
]
};
export default preview;これで Tailwind CSS のカスタムクラスが Storybook に適用されます。
終わりに
今回は Tailwind CSS のカスタムクラスでオーバーライドした font-family を Storybook 全てのストーリーに適用させましたが、Tailwind CSS デフォルトの font-family を適用させることも可能です。参考になれば幸いです。
Gaji-Laboでは、 Next.js 経験が豊富なフロントエンドエンジニアを募集しています
弊社では Next.js の知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違う Gaji-Labo を味わいに来ませんか？
Next.js の設計・実装を得意とするフロントエンドエンジニア募集要項
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
