Tailwind CSSを始めてみる

はじめに

この記事はTailwind CSSをこれから始める方向けた概要や基本的な使い方をご紹介していきます。

Tailwind CSSとは？

ユーティリティファーストをコンセプトにしたCSSフレームワークです。
Tailwind CSSではユーティリティクラスと呼ばれる予め用意されたclassを組み合わせることで、デザインに沿ったスタイルを当てていくことができます。

インラインスタイルとの比較

<div style="background-color: #fafafa; padding: 16px; color: #15803d;">周囲に16pxの余白と白背景と緑文字</div>

上記のようにstyle=''の中にCSSを書き込めるインラインスタイルというものがあります。
ブラウザで表示した場合

Tailwind CSSで書き換えてみると

<div class="bg-neutral-50 p-4 text-green-700">周囲に16pxの余白と白背景と緑文字</div>

と表すことができます。
一見長さの違い程度でインラインスタイルと変わらないように見えますが、違いは大きく分けると3つあります。

• UIに統一感を出しやすい
  CSSでは余白（margin/paddingなど）を空けたい場合に数値を自由に決めて使用しますが、Tailwind CSSでは数字を絞って定義してあるため、ズレが生じにくくUIに統一感を出しやすくなります。
• レスポンシブデザインに対応できる
  インラインスタイルではメディアクエリごとにスタイルを分けることができません。
• ホバー、フォーカス、その他の状態にスタイルを当てることができる
  インラインスタイルで対応しようとするとイベントのonmouseoverやonmouseoutを使用することになり、さらにHTMLが長くなります。

Bootstrapとの比較

BootstrapではUIが用意されているため、デザインがない場合にも組み合わせて制作することができます。
Tailwind CSSではコンポーネント単位でのclassは用意されておらず、基本的にはデザインが必要なためBootstrapよりもCSSとデザインの知識を要しますが、実現できるデザインの幅は広いです。

インストール方法

Tailwind CSSを使用するには3つの方法があります。簡単にご紹介します。

• Tailwind CLI
  ゼロから立ち上げる場合に非常にシンプルで手軽に始めやすくおすすめです。ドキュメントに記載されている方法ですぐに開始できます。
• PostCSSプラグイン
  他にビルドツールを使用したい場合、Next.js/Laravel/Viteなどに慣れている場合に向いています。
• CDN
  全機能を使用することはできませんがローカルへのインストールが不要で気軽に試すことができます。
  headタグ内で https://cdn.tailwindcss.com を読み込むだけでTailwind CSSのユーティリティクラスを使用することができます。

headタグ内に下記を追加することでカスタマイズもできます。

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          clifford: '#da373d',
        }
      }
    }
  }
</script>

基本的な使い方

ホバーやフォーカス等状態ごとのスタイル適用

<div class="bg-neutral-50 p-4 text-green-700 hover:text-blue-700">周囲に16pxの余白がある白背景の中に赤い文字はホバーすると青い文字</div>

上記のように状態:クラス名でスタイルを当てることができます。
ブラウザ表示した画像

最初や最後の要素、何番目の要素へのスタイル適用

最初もしくは最後の要素、指定した番目の要素にスタイルを当てたい場合
first:やlast:など簡単に設定することができます。
偶数/奇数の場合にもodd:, even:などが用意されており、3の倍数だけにスタイルを当てたいなどの場合も[&:nth-child(2n+1)]:のように指定ができます。ここで使用した[]はTailwind CSSでクラスが用意されていない場合に使用します。

<ul class="flex flex-col m-4">
    <li class="p-4 border-green-500 border-b last:border-0">最後の一つ以外は下にボーダーあり</li>
    <li class="p-4 border-green-500 border-b last:border-0">最後の一つ以外は下にボーダーあり</li>
    <li class="p-4 border-green-500 border-b last:border-0">最後の一つ以外は下にボーダーあり</li>
</ul>

ブラウザ表示した画像

親要素の状態による子孫要素へのスタイル適用

また、親要素の状態（:hover, :focus等）に基づいて要素のスタイルを変更したい場合

parent-element:hover {
child-element { //スタイルを当てたい要素
color: white;
}
}

とCSSファイルに記述しますが、これをTailwindCSSに置き換えると下記のようになります。

<div class="flex items-center">
<p class="text-slate-900 group-hover:text-white">親要素のホバーに反応して文字色が白になります。</p>

</div>

ブラウザ表示した画像
通常時

ホバー時

Tailwind CSSにはgroupというclassが用意されています。
親要素にgroupクラスを付与して親要素がスタイルを変更したい子孫要素にgroup-*修飾子（例：group-hover、group-focus、group-active、あるいはgroup-oddなど）を使用したクラスを追加すると、親要素にホバーした際にスタイルが当たるようになります。

隣接要素の状態による隣接要素へのスタイル適用

他にも入力フォームにエラーのスタイルを当てたい場合に便利なpeer-*修飾子もあります。
こちらは隣り合う要素（兄弟要素）、例えばinputタグでエラーがでた際にエラー文言を表示させたい場合などに便利です。
下記のようにinputタグにpeerクラスを、エラー文言にpeer-invalid:visibleを使用するとエラーの場合にエラー文言が表示されます。

<label class="block text-md">ラベル</label>
<input class="peer border px-4" required="" type="text" />
<p class="mt-2 invisible peer-invalid:visible text-pink-600 text-sm">通常は非表示ですが入力エラーが出た際に表示されます。</p>

ブラウザ表示した画像
通常時

エラー時

他にも:focus, :first-child, :required , :before, :after, :placeholder, :selectionなどに対応して豊富に用意されています。
詳しくは公式サイトに一覧が掲載されています。
https://tailwindcss.com/docs/hover-focus-and-other-states#quick-reference

カスタマイズ

擬似要素やアイコン、背景画像を入れたい場合

途中で説明した[]を使用してbg-[url('/logo.png')]など指定することもできますが、何回も使用する場合にtailwind.confg.jsで定義して使用することができます。

/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
content: {
dot: '"・"',
},
backgroundImage: {
'arrow': "url('/img/icon/arrow.svg')"
},
}
}
}

上記のように定義するとcontent-dotやbg-arrowというクラスを擬似要素や背景画像の表示に使用することができます。

<div class="relative pl-4 before:content-dot before:absolute before:left-0 after:block after:w-2 after:h-2 after:bg-arrow">要素の先頭にドットが付き後ろに矢印のアイコンが付きます</div>

他にも定義できるものが数多く用意されていますので詳しくは公式サイトをご確認ください。
https://tailwindcss.com/docs/configuration#core-plugins

カスタムコンポーネントを作成してみる

Tailwind CSSを使用するとHTMLへの記述が長くなり見づらい場合があると思います。
そういった場合にCSSファイルで定義しておくと独自のコンポーネントを定義できるため、長くなったclassを一つのclassにまとめることができます。

Tailwind CSSではCSSの優先順位を管理するために生成するスタイルを3つの異なる「レイヤー」に下記のように整理しています。

baseレイヤーは、リセットルールやプレーンなHTML要素に適用されるデフォルトスタイルなどのためのものです。
componentsレイヤーは、ユーティリティで上書きしたいbaseクラスのスタイル用です。
utilitiesレイヤーは、他のどのスタイルよりも常に優先されるべき、小さな単一目的のクラス用です。
また、@layerディレクティブを使用することで、最終的な宣言順序を制御しながら、実際のコードを好きなように整理することができます。

引用元：https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer

この3種類あるレイヤーのうち独自コンポーネントとして定義する場合は大体conponentsレイヤーになるかと思います。
下記はユーティリティクラスを再利用する形で定義した場合です。@applyに続けて書き一つのclassにして使用できるようにしています。

  @layer components {
  .select2-dropdown {
  @apply rounded-b-lg shadow-md;
  }
  .select2-search {
  @apply border border-gray-300 rounded;
  }
  .select2-results__group {
  @apply text-lg font-bold text-gray-900;
  }
  /* ... */
  }
  

引用元：https://tailwindcss.com/docs/adding-custom-styles

下記のようにthemeで定義した変数を使用して指定することもできます。

  @layer components {
  .card {
  background-color: theme('colors.white');
  border-radius: theme('borderRadius.lg');
  padding: theme('spacing.6');
  box-shadow: theme('boxShadow.xl');
  }
  /* ... */
  }
  

引用元：https://tailwindcss.com/docs/adding-custom-styles

まとめ

今回初めて触ってみましたがTailwind CSSはできる幅が広く、ユーティリティクラスを単純に書いていくだけでなく豊富な機能を理解して使いこなしていきたいです。