XENEXE

Netlify 上で Tailwind CSS をビルドする


heroImage

1. はじめに

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

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

2. 環境構築

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

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

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 starttailwind.css がビルドされるように設定しています。また,Tailwind CSS が正常に動作するために必要なパッケージである autoprefixerpostcsstailwindcssnpm install でインストールされるように設定しています。

package.json
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_ENVproduction を設定しています。7 行目を記述しないと Tailwind CSS の PurgeCSS が実行されず,非常に巨大な CSS ファイルが生成されるため注意が必要です。

netlify.toml
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 が必要になります。

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

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

tailwind.config.js
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 を使用するユーザーの参考になれば幸いです。