シナプス技術者ブログ

シナプスの技術者公式ブログ。インターネットで、鹿児島の毎日を笑顔にします。

Tailwind CSSを導入した話

技術 CSS

こんにちは、システム開発課の田畑です。 今回は社内システムへTailwind CSSを導入した話を書きたいと思います。

シナプスでは顧客情報などを社内システムで管理しています。 この度社内システムを新しい環境へ移行することになりました。 それに合わせて、現状のデザインはそのままで、CSSフレームワークを導入を検討しようということになりました。 いくつかCSSフレームワークを検討した中からTailwind CSSを導入することになりました。

Tailwind CSSとは

Tailwind CSSの公式サイトは以下です。 tailwindcss.com

Tailwind CSSはユーティリティファーストCSSと言われる物になります。 ユーティリティ ファーストCSSは細かなクラスがフレームワークとしてひと通り準備されており、新しくCSSを記述しなくてもHTML上でクラスを組み合わせていくだけでスタイルを調整することができます。 そのためCSSに触れたことがない人でも簡単にデザインの追加や変更を行うことができます。

インストール手順は以下に載っています。

tailwindcss.com

試しに使ってみたい方はPlay CDN を使用して、ブラウザでTailwind CSSを試してください。

tailwindcss.com

Tailwind CSSの記述方法

<button type="button" class="mb-3 mt-3 border”>button</button>

上記のようにmb-3と書くとTailwind CSSで指定されているmargin-bottom: 0.75rem;が適用されます。後ろのmt-3もborderも同様にTailwind CSS内で指定されています。 このように細かいクラス指定を組み合わせていくことで様々なデザインにすることができます。

この書き方はある意味インラインCSSと同じように見えますが、Tailwind CSSを使うと下記のように各スタイル宣言の値がある程度制限されるという利点があります。選択肢が多いと自由度は上がりますが、管理が複雑になります。特に複数人で扱う場合、ある程度制限された方が管理しやすいです。 2px間隔になっているため奇数pxにしたい場合は別途指定する必要があります。（※Tailwind CSSはfont-size: 16pxなのでそれを1remとした場合）

  • mb-1 margin-bottom: 0.25rem; / 4px /
  • mb-1.5 margin-bottom: 0.375rem; / 6px /
  • mb-2 margin-bottom: 0.5rem; / 8px /
  • mb-2.5 margin-bottom: 0.625rem; / 10px /
  • mb-3 margin-bottom: 0.75rem; / 12px /
  • 以下略

利点

  • 各スタイル宣言の値がある程度制限される（管理がしやすい）
  • インラインstyle属性では使うことができないメディアクエリや擬似クラスが用意されている

デメリット

  • デザイン側の細かい数字や色と合わせたい場合、上の書き方では対応できない。
    Tailwind CSSにない数値を使いたい場合、別の書き方（mb-[13px] など。）をするため、CSSの知識が必要になってくる。

以前ご紹介したBEMとは違うアプローチ方法になります。

tech.synapse.jp

Bootstrapとの違い

CSSフレームワークといえばBootstrapが有名ですが、Tailwind CSSはBootstrapと何が違うかというと決められたデザインの完成形がないということです。

例えばBootstrapのボタンはいろいろ指定を入れなくても整った良い感じのボタンをさっと作ることができます。既にボタンの完成形が用意されているからです。 ただみんな同じデザインのボタンになるため、Bootstrapっぽいなと感じることがあると思います。

今回は「現在の社内システムのデザインをできるだけ継承すること」という目的があったため、Bootstrapは検討対象からは除外しました。

メニュー部分を実際に調整してみる

menu部分のデザインをTailwind CSSで調整した場合以下のようになりました。（メニュー名称とリンクは仮のものです）

<ul class="menu">
<li class="block bg-gray-200 hover:bg-gray-500 hover:text-whitemb-1 p-2 text-smno-underline hover:no-underlinerounded-smvisited:text-blue-600 active:text-blue-600 "><a href="#">取扱店一覧</a></li>
<li class="block bg-gray-200 hover:bg-gray-500 hover:text-whitemb-1 p-2 text-smno-underline hover:no-underlinerounded-smvisited:text-blue-600 active:text-blue-600 "><a href="#">取扱店登録</a></li>
<li class="block bg-gray-200 hover:bg-gray-500 hover:text-whitemb-1 p-2 text-smno-underline hover:no-underlinerounded-smvisited:text-blue-600 active:text-blue-600 "><a href="#">通期集計</a></li>
<li class="block bg-gray-200 hover:bg-gray-500 hover:text-whitemb-1 p-2 text-smno-underline hover:no-underlinerounded-smvisited:text-blue-600 active:text-blue-600 "><a href="#">担当者別集計</a></li>
（以下省略）
</ul>

liのクラス部分が流石に長い・・・・

Tailwind CSSには@applyというクラスの指定をまとめる機能があります。

@layerでどこに属するかを指定します。

@tailwind base; // デフォルトベースのスタイル
@tailwind components; // クラスベースのスタイル
@tailwind utilities; // 最優先されるユーティリティクラス　Tailwind CSSに使用できるユーティリティが含まれていない場合に利用

@layer components{
    .menu__item a {
@apply block bg-gray-200 hover:bg-gray-500 hover:text-whitemb-1 p-2 text-smno-underline hover:no-underlinerounded-smvisited:text-blue-600 active:text-blue-600;

するとhtmlは以下のような書き方になり、視認性もよくなりました。

<ul class="menu">
<li class="menu__item"><a href="#">取扱店一覧</a></li>
<li class="menu__item"><a href="#">取扱店登録</a></li>
<li class="menu__item"><a href="#">通期集計</a></li>
<li class="menu__item"><a href="#">担当者別集計</a></li>
（以下省略）
</ul>

@applyを使わない方法

公式サイトには@applyを使わなくても良いのではという提案もありました。

tailwindcss.com

※以下公式より抜粋の内容です。

Vscodeのマルチカーソル編集を使う

重複が 1 つのファイル内の要素のグループにローカライズされている場合、マルチカーソル編集を使用して、各要素のクラス リストを一度にすばやく選択して編集するのが簡単です。

ループ

コンポーネントを抽出したり、何かのカスタム クラスを作成したりする必要があると考える前に、テンプレートで実際に複数回使用していることを確認してください。

実際のマークアップはループでレンダリングされるため、多くの場合、レンダリングされたページに複数回表示されるデザイン要素は、実際には 1 回しか作成されません。

要素が以下のようなループでレンダリングされる場合、実際のクラスリストは1 回だけ書き込まれるため、実際に重複の問題を解決する必要はありません。

<navclassName="flex sm:justify-centerspace-x-4">
{[
['Home','/dashboard'],
['Team','/team'],
['Projects','/projects'],
['Reports','/reports'],
].map(([title, url])=>(
<a href={url} className="rounded-lgpx-3 py-2 text-slate-700 font-medium hover:bg-slate-100 hover:text-slate-900">{title}</a>
))}
</nav>

使ってみて感じたこと

Tailwind CSSはクラスがあらかじめ用意されているので、クラス名で悩まずすぐに作業にとりかかれます。クラス名がこれで良いのか、被っていないかなどを悩む必要がありません。CSSを触らずに直接HTMLを触るだけでいいので、システム側で気軽に調整できそうです。

一方で、仕様上どうしてもクラスの指定がとても長くなってしまいます。またTailwind CSSの書き方のパターンを覚えるまでクラス名を毎回検索するので、検索に時間がかかります。そして長くなったクラスを@layerでまとめすぎるとTailwind CSSの良さが活かせなくなります。クラスを追加することで誰でも調整ができるという利点がなくなるからです。

基本形をCSSで決定し、バリエーションをTailwind CSSでカバーするような運用が良さそうです。 ただバリエーションも個人の裁量に任せると幅が出てきそうなのである程度の縛りは必要かもしれません。運用で工夫してTailwind CSSの良さをうまく活用できればと思っています。