メンテナブルに Tailwind CSS を使うなら #tailwindcss

Tailwind CSS をちょっと前から使っていて、気に入ったのでどんどん適用範囲を拡張していきました。数十ページくらいのサイトを Tailwind でデザインし、その出来に満足していました。
（Tailwind の魅力は、選択肢の幅がちょうどよいところだと思っています。マージンが 1px か 2px かはどうでもよい、要素同士が近い方がいいのか遠い方がいいのかで用意されたクラスから選ぶ。）
しばらく時が経った頃、Tailwind の最新版がリリースされ、メジャーバージョンが上がっていることに気づきます。いっちょ最新バージョンに対応してやるかと思いいざ進めてみると、結構な労力を必要とすることが分かりました。このポストではそこで得た気づきの話をします。

アップグレード手順はある

v0 系から v1 系へのアップグレード手順はこちらです。
https://tailwindcss.com/docs/upgrading-to-v1
順番にやっていけば良いと思いきや、まあ難しい。それぞれのクラスを使用している箇所を探すのが大変でした。似たようなクラス名ばかりなので検索で目的のクラスだけに絞り込めない。
次に、見方を変えて、アップグレードドキュメントは新旧バージョンの対応表と捉え、新バージョン Tailwind を読み込んだページを一つずつ確認し、デザイン崩れを直していこうとしました。しかし、崩れの原因がなかなか特定できません。しばらく試行錯誤した後、旧バージョンの使用に問題があるわけでもないので、アップグレードを諦めました。

どうしたら良かったのか？

ユーティリティ CSS クラスをルールなくあちこちで使っていたのがメンテナンス性を下げました。サイトの規模が小さい段階ではそれでも構わないですが、規模が大きくなると分かったら、抽象化を進めることを検討すべきタイミングです。
といった内容がちゃんと公式で言及されていることに（ついさっきまで）気づきませんでした...。
https://tailwindcss.com/docs/extracting-components
というわけで、繰り返し現れる要素を JavaScript コンポーネントや CSS コンポーネントとして抽出しましょう。

JavaScript (Vue) コンポーネント

<!-- In use -->
 <VacationCard
   img="/img/cancun.jpg"
   imgAlt="Beach in Cancun"
   eyebrow="Private Villa"
   title="Relaxing All-Inclusive Resort in Cancun"
   pricing="$299 USD per night"
   url="/vacations/cancun"
 />

 <!-- ./components/VacationCard.vue -->
 <template>
   <div>
     <img class="rounded" :src="img" :alt="imgAlt">
     <div class="mt-2">
       <div>
         <div class="text-xs text-gray-600 uppercase font-bold">{{ eyebrow }}</div>
         <div class="font-bold text-gray-700 leading-snug">
           <a :href="url" class="hover:underline">{{ title }}</a>
         </div>
         <div class="mt-2 text-sm text-gray-600">{{ pricing }}</div>
       </div>
     </div>
   </div>
 </template>

 <script>
   export default {
     props: ['img', 'imgAlt', 'eyebrow', 'title', 'pricing', 'url']
   }
 </script>

https://tailwindcss.com/docs/extracting-components より

CSS コンポーネント

JavaScript コンポーネントにするほどではない、ボタンのような、HTML の構造に依存しない、一つの要素に一つのクラスを当てるだけで完結するものなら CSS のクラスを定義していいでしょう。

<button class="btn-blue">
   Button
 </button>

 <style>
 .btn-blue {
   @apply bg-blue-500 text-white font-bold py-2 px-4 rounded;
 }
 .btn-blue:hover {
   @apply bg-blue-700;
 }
 </style>

https://tailwindcss.com/docs/extracting-components より

まとめ

愚直に入門記事どおりに Tailwind CSS を使うと、メンテナンス性を犠牲にしかねません。フレームワークの向き不向きや使い方は、プロダクトの成長時期に応じて考えておきたいですね。