Next.js + TailwindCSS + Storybookプロジェクトセットアップ

はじめに

Next.js + TailwindCSS + Storybook を組み合わせたプロジェクトをセットアップする際、有志によって作成された記事ではPostCSS 7やNext.jsのexampleを使用する方法などが紹介されていますが、2021年4月現在では公式ページに記載されている情報だけでかなり簡単にセットアップできるので紹介します。

• Next.js (TypeScript & Webpack 5)
• TailwindCSS (JIT)
• Storybook (PostCSS 8 & Webpack 5)

上記の設定を適用したプロジェクトを、公式で紹介されているページへのリンクを記載しながらセットアップします。

Next.js (TypeScript & Webpack 5)

create-next-appを使ってプロジェクトを作成します。
https://nextjs.org/docs/api-reference/create-next-app

$ yarn create next-app --typescript

srcディレクトリを使用する場合はこの時点で設定しておきましょう。
https://nextjs.org/docs/advanced-features/src-directory

TailwindCSS (JIT)

公式を参考に、Next.jsに導入していきます。
https://tailwindcss.com/docs/guides/nextjs

$ yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest
$ npx tailwindcss init -p

PurgeCSSの設定とJITモードの有効化をします。ここではsrcディレクトリを指定しています。
https://tailwindcss.com/docs/just-in-time-mode

tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ["./src/**/*.{js,ts,jsx,tsx}"],
  // ...
};

_app.tsxからTailwindCSSを読み込みます。

_app.tsx

import "tailwindcss/tailwind.css";

Storybook (PostCSS 8 & Webpack 5)

StorybookをWebpack 5で導入し、PostCSS 8のための公式アドオンを追加します。
https://storybook.js.org/blog/storybook-for-webpack-5
https://storybook.js.org/blog/storybook-6-2

$ npx sb init --builder webpack5
$ yarn add -D @storybook/addon-postcss

PostCSS 8を使用するように設定します。
https://storybook.js.org/addons/@storybook/addon-postcss

.storybook/main.js

module.exports = {
  addons: [
    // ...
    {
      name: "@storybook/addon-postcss",
      options: {
        postcssLoaderOptions: {
          implementation: require("postcss"),
        },
      },
    },
  ],
  // ...
};

ちゃんとセットアップできているか確認したら終了です！

$ yarn storybook

おわりに

• Next.jsのwebpack 5
• TailwindCSSのJITモード
• StorybookのWebpack 5

こういったものがこれからデフォルトで組み込まれていくと思われるので、この記事をみなさんが読んでいる頃にはもしかしたらより簡単にセットアップできるようになっているかもしれません。

結論：公式サイトがベスト！