Next.jsにTailwind CSSを導入する

Next.jsでTailwind CSSを使えるようにする

**Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。

**また、Tailwind CSSとはユーティリティファーストのCSSフレームワークです。**その特徴は、Tailwind CSSによって提供されるクラスを組み合わせてコンポーネントを作り、サイトをデザインしていくところにあります。さらにCSSフレームワークなので、CSSに慣れていない人でも簡単に使うことができます。

関連記事: Tailwind CSSでのフロントエンド開発で素晴らしい開発体験を得よう

**この記事は、Next.jsにTailwind CSSを導入する方法を紹介するものです。**Next.jsもTailwind CSSもフロントエンド界隈でにわかに話題になっていますね。

設定内容はNext.js公式のwith-tailwindcss Exampleを参考にしています。

今回利用するバージョンは以下の通りです。

{
 "dependencies": {
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "tailwindcss": "1.4.6"
  }
}

Next.jsのプロジェクトを作成する

まずはNext.jsのプロジェクトを作成しましょう。

$ npx create-next-app nextjs-with-tailwindcss

コマンドを実行すると、まっさらなプロジェクトかExampleを利用するか選択肢が提示されます。

? Pick a template › - Use arrow-keys. Return to submit.
❯  Default starter app
   Example from the Next.js repo

今回はDefault starter appを選びます。

$ npx create-next-app nextjs-with-tailwindcss
✔ Pick a template › Default starter app
Creating a new Next.js app in /Users/panda/next/nextjs-with-tailwindcss.

Installing react, react-dom, and next using yarn...

yarn add v1.13.0

# ...

Success! Created nextjs-with-tailwindcss at /Users/panda/next/nextjs-with-tailwindcss

Tailwind CSSの設定を解説します

Tailwind CSSをインストールする

プロジェクトが作成できたので、プロジェクトルートに移動します。

$ cd nextjs-with-tailwindcss

Tailwind CSSをインストールしましょう。

$ npm install -D tailwindcss

これでTailwind CSSを導入できました。

tailwind.config.jsを作成する

次にTailwind CSSの設定ファイルtailwind.config.jsを作成します。

$ npx tailwindcss init

tailwindcss 1.4.6

✅ Created Tailwind config file: tailwind.config.js

バージョン1.4からtailwind.config.jsにpurgeが追加されました。これはPurgeCSSをデフォルトで利用するための項目です。

module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

PurgeCssで不要なCSSを削除する設定をする

PurgeCSSは、コンテンツから使われていないCSSを削除するためのPostCSS製のツールです。

PurgeCSSはHTMLのclassやReactコンポーネントのclassNameで指定されていないCSSを削除します。つまり、実際に使われているCSSしかファイルにバンドルしないのです。

Tailwind CSSのファイルサイズは1996.1kbであり、Gzipで圧縮しても144.6kbもあるので、使わないCSSまで配信してしまうとサイトパフォーマンスに影響してしまいます。

そこで、Reactコンポーネント内で利用しているクラスのみをCSSのビルド対象に含めましょう。

module.exports = {
purge: ['./components/**/*.jsx', './pages/**/*.jsx'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

また、postcss-preset-envをインストールしてpostcss.config.jsファイルを作成します。

$ npm i -D postcss-preset-env

module.exports = {
  plugins: ['tailwindcss', 'postcss-preset-env'],
}

これでPurgeCSSの設定ができました。

なお、Tailwind CSSのバージョン1.3以前は自分でPurgeCSSを導入する必要がありました。かつてpostcss.config.jsに以下のように記述していました。

const purgecss = require('@fullhuman/postcss-purgecss')({
  content: ['./components/**/*.jsx', './pages/**/*.jsx'],
  defaultExtractor: content => {
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || []
    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || []
    return broadMatches.concat(innerMatches)
  }
})

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

以前と比べるとv1.4から設定が楽になりましたね。

pages/style.cssでTailwind CSSのユーティリティを読み込む

次はReactコンポーネント内でTailwind CSSを使えるように設定をしていきます。pages/styles.cssを作成しましょう。

@tailwind base;
@tailwind components;

.btn-blue {
  @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
}

.hero {
  @apply py-20;
}

.title {
  @apply text-5xl text-center;
  color: #333;
  line-height: 1.15;
}

@tailwind utilities;

カスタマイズしたクラスは、@tailwind componentsと@tailwind utilitiesの間に記述します。

pages/_app.jsxでstyle.cssを読み込む

**Next.jsは_app.jsxでグローバルなCSSを読み込みます。**ファイルの先頭でCSSファイルをimportしましょう。

import './styles.css'

function App({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default App

これで、全てのコンポーネントでTailwind CSSのクラスを使うことができます。

pages/index.jsxを作成して試してみましょう。

export default function Index() {
  return (
    <div>
      <div className="hero">
        <h1 className="title">Next.js + Tailwind CSS 🐼</h1>
        <p className="text-center text-teal-500 text-2xl py-4">This is an Example.</p>
      </div>
    </div>
  )
}

開発サーバーを立ち上げ、http://localhost:3000にアクセスします。

$ npm run dev
> [email protected] dev /Users/panda/next/nextjs-with-tailwindcss
> next "-p" "3000"

ready - started server on http://localhost:3000

Next.jsでTailwind CSSを導入できました 🎉

まとめ

Next.jsとTailwind CSSの組み合わせは開発体験がとてもいいです。個人開発でCreepy Nutsのファンサイトを作ったときもこの技術スタックでした。

**ユーティリティを組み合わせることでスタイルを作るTailwind CSSと、コンポーネントを組み合わせることでページを作るReact。**CSSをJavaScriptで分野は異なるものの、互いに思想がリンクするようでとても面白いですね。

以上、Next.jsにTailwind CSSを導入する方法でした。