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 <a21 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 started25 </a>26 </div>27 <div class="ml-3 inline-flex rounded-md shadow">28 <a29 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 more33 </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 が必要になります。
1module.exports = {2 plugins: {3 tailwindcss: {},4 autoprefixer: {},5 },6}
tailwind.config.js は,Tailwind CSS の生成ファイルです。PurgeCSS が実行されるように設定しています。
1module.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 を使用するユーザーの参考になれば幸いです。