Netlify 上で Tailwind CSS をビルドする

1. はじめに#

Tailwind CSS では，PurgeCSS を設定することで，本番環境にデプロイした際に生成される CSS ファイルのサイズを最適化することが出来ます。本記事では，静的ウェブサイトホスティングサービスである Netlify にデプロイした際に，Tailwind CSS を最適化した状態でビルドする手順について記述します。

また，本記事では Netlify と GitHub を活用します。そのため，Netlify と GitHub のアカウント作成し，連携する必要があります。以降，これらの作業は完了済みの前提で記述しており，手順なども割愛していることを，ご了承下さい。

2. 環境構築#

以下のファイルを任意の同一ディレクトリ内に作成します。

index.html：動作確認用の HTML ファイル
package.json：npm の生成ファイル
netlify.toml：Netlify の生成ファイル
postcss.config.js：PostCSS の生成ファイル
tailwind.config.js：Tailwind CSS の生成ファイル

index.html は，Tailwind CSS が正常に動作しているのかを確認することが目的のファイルです。また，7 行目で tailwind.css を読み込んでいますが，この CSS ファイルは Netlify にデプロイした際にビルドされるため，ローカルで index.html を開いても正常に動作しません。

1
<!doctype html>
2
<html lang="en">
3
  <head>
4
    <link rel="stylesheet" href="tailwind.css" />
5
    <meta charset="UTF-8" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>Netlify + Tailwind CSS</title>
8
  </head>
9

10
  <body>
11
    <!-- This example requires Tailwind CSS v2.0+ -->
12
    <div class="bg-gray-50">
13
      <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-16">
14
        <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
15
          <span class="block">Ready to dive in?</span>
16
          <span class="block text-indigo-600">Start your free trial today.</span>
17
        </h2>
18
        <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0">
19
          <div class="inline-flex rounded-md shadow">
20
            <a
21
              href="#"
22
              class="inline-flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white hover:bg-indigo-700"
23
            >
24
              Get started
25
            </a>
26
          </div>
27
          <div class="ml-3 inline-flex rounded-md shadow">
28
            <a
29
              href="#"
30
              class="inline-flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600 hover:bg-indigo-50"
31
            >
32
              Learn more
33
            </a>
34
          </div>
35
        </div>
36
      </div>
37
    </div>
38
  </body>
39
</html>

package.json は，npm の生成ファイルです。npm start で tailwind.css がビルドされるように設定しています。また，Tailwind CSS が正常に動作するために必要なパッケージである autoprefixer と postcss，tailwindcss が npm install でインストールされるように設定しています。

1
{
2
  "scripts": {
3
    "start": "tailwindcss build -o tailwind.css"
4
  },
5
  "dependencies": {
6
    "autoprefixer": "^10.2.4",
7
    "postcss": "^8.2.4",
8
    "tailwindcss": "^2.0.2"
9
  }
10
}

netlify.toml は，Netlify の生成ファイルです。Netlify にデプロイした際に，npm start が実行されるように設定しています。また，Tailwind CSS の PurgeCSS が動作するように NODE_ENV に production を設定しています。7 行目を記述しないと Tailwind CSS の PurgeCSS が実行されず，非常に巨大な CSS ファイルが生成されるため注意が必要です。

1
[build]
2
  command = "npm start"
3

4
[context.production.environment]
5
  NODE_ENV = "production"

postcss.config.js は，PostCSS の生成ファイルです。Tailwind CSS は，PostCSS のプラグインとして実行されるため，PostCSS の生成ファイルである postcss.config.js が必要になります。

1
module.exports = {
2
  plugins: {
3
    tailwindcss: {},
4
    autoprefixer: {},
5
  },
6
}

tailwind.config.js は，Tailwind CSS の生成ファイルです。PurgeCSS が実行されるように設定しています。

1
module.exports = {
2
  purge: ['*.html'],
3
  darkMode: false, // or 'media' or 'class'
4
  theme: {
5
    extend: {},
6
  },
7
  variants: {
8
    extend: {},
9
  },
10
  plugins: [],
11
}

3. 動作確認#

上記のファイルを GitHub にコミットし，Netlify デプロイします。発行されたリンクにアクセスし，以下のような実行結果になれば正常に動作しています。

実行結果

4. おわりに#

ここまで，静的ウェブサイトホスティングサービスである Netlify にデプロイした際に，Tailwind CSS を最適化した状態でビルドする手順について記述してきました。本記事が Netlify と Tailwind CSS を使用するユーザーの参考になれば幸いです。