Next.js with Tailwind CSS 環境構築

公開：2020/09/29
更新：2020/10/022 min読了の目安（約2600字）TECH技術記事
k-logic

要約

Next.jsでTailwindCSSを使用したプロジェクトを立ち上げるために、構築方法を書いていきます。

TailwindCSSはユーティリティに特化したCSSフレームワークです。
詳しくは以下のリンクから確認してください。　　
Tailwind CSS

なお、今回使用するモジュールは以下の通りです。

"next": "9.5.3",
"react": "16.13.1",
"react-dom": "16.13.1",
"tailwindcss": "1.8.10"

next.jsプロジェクトを立ち上げる

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

// プロジェクトまで移動しておきます
$ cd nextjs-with-tailwind

Tailwind CSSを導入する

まずモジュールをインストールしましょう。

$ npm install tailwindcss --save-dev

次に設定ファイルを作成します。

$ npx tailwindcss init

すると同階層にtailwind.config.jsが作成されたと思います。

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

詳しくは説明しませんが、ここではpurgeの部分を書き加えていきます。
purgeとは、対象のファイルの使用クラス以外の未使用クラスを排除してくれる機能です。

ここでは以下の様に設定します。

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

こうすることで、componentsとpagesディレクトリ配下、.jsxファイルをみて、未使用クラスを削除してくれます。
※purgeしないとファイルサイズが膨大になりますので、ここは設定することを推奨します。

最後に、コンパイルするためのpostcss.config.jsを作成します。
まずは必要モジュールをインストールします。

$ npm install postcss-preset-env --save-dev

次にファイルを作成します。

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

これで、Tailwind CSS導入は終わりです。

Tailwind CSSを使用する

stylesの中にglobal.cssがありますので、そちらに読み込んでいきましょう。
global.cssはpages/_app.jsで読み込まれています。

試しに.btn-blueクラスを作成してみます。

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

そして、pages/index.jsxを以下の様に書き換えてみます。

import Head from 'next/head'

const Home = () => {
  return (
      <section className="h-screen w-4/5 max-w-5xl mx-auto flex items-center justify-center flex-col">
        <h1 className="mb-4 text-green-500 text-3xl">サンプル</h1>
        <p className="mb-2 text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda blanditiis consequatur eius hic ipsam nostrum omnis optio! Doloribus quaerat quis ratione? At, maiores voluptas? Eveniet odio omnis repellendus sapiente voluptatibus.</p>
        <button className="btn-blue">Let's Start!!</button>
      </section>
  )
}

export default Home

一方、UIはどうなったのかというと...

しっかり反映されています。

楽するために

個人的にcss命名で苦しむことが多くありました。
そのことから、Tailwind CSSを使用して、より開発に集中できる環境を作りたいと思い、この記事を執筆した次第です。

Tailwind CSSはユーティリティークラスを基調としたカスタマイズ性に富んでいることも大きな魅力です。
@applyだけでなく、@screenやtheme関数など便利な機能もあります。

私自身も、積極的に取り入れて開発を進めていきたいですね。

P.S

Tailwind CSS公式もいいですが、一目でクラス名を確認できるチートシートが存在します。
Tailwind CSS チートシート