Tailwind CSSでのスタイリング方法、独自クラス（コンポーネント）作成をサクッと習得！

by TAKADA

｜ 11027 PV ｜ 2023.10.03

favorite_border

TailwindCSSではデザイン装飾まで、用意されているユーティリティクラスのみでスタイリングが出来ます。ホバーアニメーションなども、自由度の高い指定が出来ますよ。

今回は手を広げ、デザイン的なスタイリングに役立つクラスを見ていきましょう。一度しか使わない背景画像の指定、使い回せるように独自クラス（コンポーネント）の作成方法など、TailwindCSSを便利に活用する方法も紹介します。

今回やること
ヒーロー部分を作る

1.Tailwind CSSでの背景指定
2.ヒーローのタイトル部分

Tailwind CSSのタイポグラフィ

フォントサイズと太さ
文字の揃え位置
文字色と装飾（text-decoration）
Tailwind CSSにカスタムCSSを追加する
表示する行数の制御
4つ横並びのdivをアレンジ

Tailwind CSSでの擬似クラスとトランジション

擬似クラスを使った指定
トランジション
他3つにもデザインを反映する

今回やること

前回の記事でFlexレイアウトを作成したHTMLファイルを、よりWebページらしいビジュアルに変えていきます。様々なTailwindCSSのユーティリティを使用しながら、TailwindCSSドキュメントでのクラスの探し方・使い方に慣れていきましょう。

↓

【前回までに書いたHTML】

<body class="bg-zinc-400">
  <div class="container mx-auto px-5 py-10">
    <h1 class="text-3xl font-bold underline text-orange-500">
      Hello world!
    </h1>
  </div>
  <div class="container bg-white mx-auto px-5 py-20">
    <div class="md:flex gap-x-10">
      <div class="md:w-2/5">
        <img src="img/vince-lee-p6KMIFzWwy8-unsplash.jpg" alt="">
      </div>
      <div class="md:w-3/5 md:order-first">
        <h2>
          ここに見出しがはいります。
        </h2>
        <p>
          ここは説明の文章が入ります。<br>
          sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
      </div>
    </div>
    <div class="flex flex-col md:flex-row gap-10 mt-20">
      <div class="md:w-1/2 md:px-5 xl:w-1/4">
        <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
        <h3>Sample Tomato</h3>
        <p>
          sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
      </div>
      <! -- /// div.md:w-1/2 をあと３つコピペで複製 /// -->
    </div>
  </div>
</body>

【使用画像について】

画像は、以下のUnsplashのフリー画像を使用させていただいています。
お手持ちの画像があれば、そちらを使われても構いません。

素材	URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/dcNHyPAVD8E DL Size：L（2400 × 1502）
	URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/p6KMIFzWwy8 DL Size：中間（1920 × 1280）
	URL：https://unsplash.com/ja/%E5%86%99%E7%9C%9F/fhuPrCwAzaw DL Size：中間（1920 × 1439）

まずは無料の14講座から受講してみましょう。わかりやすくて目からウロコですよ。
» 今すぐ無料講座をチェックする

ヒーロー部分を作る

ページ上部、ファーストビューやヒーローと呼ばれる部分を作成します。

1.Tailwind CSSでの背景指定

最初に背景画像を設定するためのdivタグを追加します。
bodyで背景色を指定しているクラスも不要なので、合わせて取り除いておきましょう。

1-1.背景画像を指定

では、追加したdivに背景画像を設定していきます。
背景画像を指定できるCSSプロパティはbackgroundもしくはbackground-imageですね。

Tailwind CSSの公式ドキュメントで見てみましょう。
Background Imageのページを開くと、下図のように線形グラデーションを作るためのクラスが出てきます。

https://tailwindcss.com/docs/background-image

背景に画像を使いたい場合の方法は、もっと下に掲載されています。
右側のサイドバーから「Arbitrary values」を選択してください。

1 回限りのbackground-image値を設定するなら、角括弧を使ってダイレクトに書け、というような説明がされていますね。

掲載されているサンプルコードを参考に書いてみましょう。
コピー・アンド・ペーストして、画像パスだけ打ち替えてもOK。

<body>
  <div class="bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')]">

上書き保存して、ブラウザで背景画像が表示されるか確認します。

1-2.要素の高さを任意に設定する

背景画像を指定したdivが細いので、最低でも確保する高さ（min-height）を指定します。
height関係もwidthと同じくh-96など値が設定されているクラスが沢山用意されています。

ですが、使いたいサイズがない、vh単位で指定したい……なんて場合もありますよね。
ページ下部にあるUsing custom values > Arbitrary valuesを見てみましょう。

https://tailwindcss.com/docs/min-height#using-custom-values

先程のbackground-imageと同様に、角括弧（[]）を使うと好きな値を設定できるようです。高さの指定も1回しか使わないので、この方法でやってみましょう。

背景画像を設定したdivで、min-height: 45vhを設定してみます。

<body>
  <div class="min-h-[45vh] bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')]">

CSSとして適用されていれば成功です。

1-3.背景画像の表示基準位置・大きさ指定

背景画像の表示方法を決めましょう。

背景画像の表示開始位置を決めるbackground-position
背景画像のサイズを設定するbackground-size

それぞれのページで使えるクラスを確認して、クラス属性として追加していきます。

https://tailwindcss.com/docs/background-position

<body>
  <div  class="min-h-[45vh] bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')]  bg-center bg-cover">

指定通りになっているか、ブラウザで表示を確認します。

2.ヒーローのタイトル部分

2-1.レイアウト作成

最初に、タイトル部分の大まかなレイアウトを作ります。
やることは大きく3つ。

h1の下にキャッチコピーを入れる
文字の後ろに背景を設定するためのdivを追加
Flexboxを使って、heroの中央に追加したdivを配置

キャッチコピーは見えにくいため、ドラッグで選択して反転させています。

HTML、クラス属性部分をゴリゴリ書き足します。
練習ですので、テキストはお好きに入力してみてください。

<body>
  <div class="flex place-content-center py-10 min-h-[45vh] bg-[url('img/ricardo-gomez-angel-dcNHyPAVD8E-unsplash.jpg')] bg-center bg-cover">
    <div class="container px-5 place-self-center flex place-content-center">
      <div class="">
        <h1 class="text-3xl font-bold underline text-orange-500">
          Tailwind トマト農園
        </h1>
        <span>
          キレイな空気と水で育てた自慢のトマト
        </span>
      </div>
    </div>
  </div>

文字を囲うdivが上下左右中央にきていればOKです。

2-2.CSSフィルターを適用する

h1とspanを囲っているdivに、白いすりガラス風の背景を設定します。
Tailwind CSSではCSSフィルターのクラスまで用意されていますよ。

今回使うのはbackdrop-filterのblur。
ですので、Filters >Backdrop Blurを開きます。

https://tailwindcss.com/docs/backdrop-blur

定義されているClass一覧の下に、用例（Basic usage）があります。
サンプルコードのクラスをコピーして、作成中のHTMLに貼り付けてみましょう。
backdrop-filterのユーティリティクラスbackdrop-blur-smだけではなく、bg-white/30も一緒に追加してください。

<div class="backdrop-blur-sm bg-white/30">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園
    </h1>
    <span>
        キレイな空気と水で育てた自慢のトマト
    </span>
</div>

　↓

半透明の白い背景色が入り、かつ背景画像が少しぼやけて見えます。
ただ、文字を読みやすくするためには、もう少し白い背景色を濃くした方が良さそうです。

背景色の透明度は、色指定のクラス名末尾、/以降の部分で設定されています。
この部分を、TailwindCSSではopacity modifier(不透明度修飾子)と呼んでいます。

今回使ったbg-white/30を検証ツールで見てみると、RGBAのA（alpha）の値に30％＝0.3として反映されていることがわかります。

もう少し不透明度を上げたいので、bg-white/50に変えてみましょう。
黒色の文字が読みやすくなると思います。

※/の後に書く不透明度を示す数はopacityユーティリティと同じものがデフォルトで使用できるようです。

【バージョンによる透明度指定の差】

TailwindCSSのバージョンにより、不透明度を指定するための書き方に違いがあります。
今回使用したbg-white/50など、色名/不透明度と1つにまとめて書けるのは、v3系から導入された方法になっています。

v2系まではclass="bg-black bg-opacity-25"など、「背景色」と「背景色の不透明度」２つのクラスを使っていました。これから新しいバージョンを使う際には必要ありませんが、バージョンによって多少の差があるということは頭の片隅においておいくと良いでしょう。

TailwindCSS Documents
Upgrade Guide > New opacity modifier syntax

2-3.角を丸くする（Borders）

次は、半透明になっているdivの四隅の角を丸くします。

四隅の角を丸めるCSSプロパティはborder-radius。
検索するか、BordersのグループにあるBorder Radiusを開いて、使用可能なクラスを見てみましょう。側面ごと、角それぞれに個別指定するためのクラスがあり、かなり数が多いですね。

https://tailwindcss.com/docs/border-radius

今回は角4つどれも同じように丸めたいので、rounded-2xlを使います。
ついでにpaddingのユーティリティクラスも加えて、余白も設定しておきます。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園

2-4.シャドウを付ける（Effects）

テキストを囲うdivに、ドロップシャドウをつけます。

CSSのbox-shadowプロパティを指定してくれるクラスは、Effectsグループの中にあります。
影のサイズ・向きを決めるのが「Box Shadow」。
影の色を決めるのが「Box Shadow Color」と2ページに分かれています。

https://tailwindcss.com/docs/box-shadow

まずは、Box Shadowのページから影をつけるためのクラスを貼り付けてみましょう。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50 shadow-md">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園

「気持ち、影がついたかな」くらいの見え方ですね。

Box Shadow Colorのページに掲載されているクラスの方も使ってみましょう。
クラス名の頭がbox-shadowを示す「shadow」になっているだけで、色名や不透明度の指定方法は背景色bg-と全く同じです。お好きに設定してみてください。

見本ではデフォルトよりも黒っぽくなるようshadow-black/40を使いました。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50 shadow-md shadow-black/40">
    <h1 class="text-3xl font-bold underline text-orange-500">
        Tailwind トマト農園

これでヒーロー部分の装飾ができました。
文字部分は、次のタイポグラフィでまとめて設定していきましょう。

Tailwind CSSのタイポグラフィ

TailwindCSSはデフォルトだと“Preflight”というベーススタイルセットで、見出しのスタイル、見出しや段落に対する余白などが削除されています。リセットCSSを読み込んだような状態になっているわけです。

ですので、h2やh3でマークアップした文字も、pタグの文字も、特にスタイル指定をしていない現在は同じ大きさ。何タグで囲っているのか区別がつかないような表示です。

タイポグラフィ（文字の体裁：書体、大きさ、行間、配列など）を設定するには、以下３つの方法があります。

それぞれタグ毎にユーティリティクラスを追加する
自分で要素に対するスタイル指定を設定する
独自CSSクラスを自作して、適用する

TailwindCSSでは「まずはユーティリティを使用」「複数回使用する必要があれば、独自クラス化せよ」という進め方が推奨されていますので、文字関係のユーティリティクラスの確認からしていきましょう。

【4つのカードについて】

ページ下部にある4つのカードは、同じ設定を使います。
毎回 4つ全てにクラスを指定していくと面倒なので、1つだけ設定して、最後にコピー・アンド・ペーストで複製するのがオススメです。

（ループ処理で複数回表示させる、などの使い方が想定されるためクラス化はしません。）

フォントサイズと太さ

hタグで囲まれた、見出しの文字サイズと太さを変えていきましょう。
公式ドキュメントでは、文字に関するユーティリティが「Typography」のグループにまとめられています。

https://tailwindcss.com/docs/font-size

まずはFont Size。
text-の後に、Tailwindで定義されているサイズ名を入れたものがクラス名になります。

hタグにそれぞれクラスを指定してみましょう。

h1：text-3xl（そのまま）
h2：text-2xl
h3：text-xl

スマホ幅で見たときに大きすぎないかを確認します。

問題なければ、表示領域の幅を広げてみましょう。

タブレット幅

PCモニター幅

広い画面で見るときは、もう少し大きくても良さそうです。
Breakpoint prefixのxl:を使って、幅1280px以上で表示する場合はそれぞれワンサイズ大きくなるようにクラスを加えます。

次に、文字の太さを決めるFont Weight。
CDNのサンプルコードでは、h1のクラス属性にfont-boldクラスが使われていました。h2とh3タグにもfont-mediumクラスを加えてみます。h2だと以下のようになります。

<h2 class="text-2xl xl:text-3xl font-medium">
    ここに見出しがはいります。
</h2>

※ OS（デフォルトフォント）により見え方は異なります。

文字の揃え位置

文字の“水平方向の揃え方”を指定するtext-alignで、ヒーロー部分の文字を中央揃えにします。
ドキュメントでは Typography >Text Align で確認できます。

h1とspanを囲っているdivタグにtext-centerクラスを追加。

spanタグの文字も xl 以上でワンサイズ大きくなるよう、クラス属性を追加。
少し間を空けて読みやすくするために、h1にはmb-3クラスを加えます。

<div class="rounded-2xl p-8 backdrop-blur-sm bg-white/50 shadow-md shadow-black/40 text-center">
    <h1 class="text-3xl xl:text-4xl font-bold mb-3 underline text-orange-500">
        Tailwind トマト農園
    </h1>
    <span class="xl:text-lg">
        キレイな空気と水で育てた自慢のトマト
    </span>
</div>

文字色と装飾（text-decoration）

公式ドキュメントのメニューでは、Text Alignのすぐ下に文字色を設定するText Colorへのリンクがあります。その更に下には、テキストの装飾的な線の表示をするtext-decoration関連のユーティリティが並んでいますね。

URL：https://tailwindcss.com/docs/text-color

h1タグには、text-decoration-line: underline;を適用するためのunderlineと、文字色を変えるためのtext-orange-500クラスが指定されています。
この２つをh3タグのクラス属性の方へカット・アンド・ペーストで移します。

　　↓

文字色を青系の色に変えてみましょう。
青系なら、どのクラスを使っても良いです。

<h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline">
    Sample Tomato
</h3>

underlineの色は自動で文字色と同じになります。
別途指定してみたい方は、ドキュメントのText Decoration Colorのぺージを参考にクラスを書いてください。

Tailwind CSSにカスタムCSSを追加する

ここまで文字部分のCSSを設定してきましたが、p要素に余白が無いのはちょっと不便。

下図、赤い矢印のところに少し余白があるだけでも、見やすくなります。
ですが、毎回毎回classを書くのは大変。赤い点線で囲ったところに段落（p）を増やしたい、なんてときにも、ずっと書き続けるのは面倒ですよね。

ですので、p要素には自動的にmarginが入るように設定しておきます。
styleタグで直接書いたり、独自のCSSファイルを読み込む方法もありますが、せっかくなので今回はTailwindCSSの機能を使ってカスタムしてみましょう。

head内、CDNコードの下に以下のように書きます。

<style type="text/tailwindcss">
    @layer base {
        p {
            @apply my-3;
        }
    }
</style>

ブラウザで効いているか見てみましょう。

すべてのp要素に対して、TailwindCSSの“my-3”クラスと同じスタイル指定（上下marginそれぞれ0.75rem）が適用されました！

Documentsで参考にしたページ

TailwindCSSは、本格導入する場合はnpmやフレームワーク経由のインストールが推奨されています。そのため、CDN版でのカスタムは、そこまで詳細に紹介されていません。
上のコードも覚える必要はありません。必要時にDocumentsで調べれば良いです。

ちなみに、今回参考にしたページは以下の２つ。

CDN版でのカスタムCSSの追加方法は、Installation >Get startedページ、play CDNタブ。
3の「Try adding some custom CSS」で紹介されています。

https://tailwindcss.com/docs/installation/play-cdn

以下２つはCore Concepts > Functions & Directives のページで解説されています。

CSSがどのレイヤーに属するか、@layerで指定できるレイヤー
既存のユーティリティクラスを、独自カスタムCSSに反映する@apply機能

https://tailwindcss.com/docs/functions-and-directives#layer

@layerで指定するレイヤーは、以下のように分かれいるとイメージすると良いです。

@layer base ：デフォルトのスタイル調整
@layer components ：コンポーネントベースのスタイル用
@layer utilities ：ユーティリティクラス（最優先）

表示する行数の制御

ページ下部、4つ並んでいるdivタグのところ。
例えば、保存されている情報をループ処理で表示したりする場合、以下のように表示が汚くなってしまうかもしれません。

Line Clamp（-webkit-line-clamp）を設定しておくと、こうした状態が予防できます。

https://tailwindcss.com/docs/line-clamp

h3タグは1行、pタグは2行までに制限します。

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
    <h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
        Sample Tomato
    </h3>
    <p class="line-clamp-2">
        sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
    </p>
</div>

4つ横並びのdivをアレンジ

TailwindCSSのクラスで、以下のようなカード風のデザインにアレンジします。
ここまでの復習にもなりますね。

やることは、主に4つ。

全体を線で囲う
4つ角を丸くする
うっすらドロップシャドウを追加
右下に作成日時を追加

1~3：カード風枠組みの設定

まず、カード風に見せるための枠を作ります。

アイテムの幅を指定しているdivの直下に、もう一つdivを加えます。
img、h3、pタグを囲む形です。

追加したdivタグに、TailwindCSSのクラスを設定していきます。

全体を線で囲う→border
4つ角を丸くする→rounded-md
うっすらドロップシャドウを追加→shadow-sm

roundedやshadowのサイズは、お好みに合わせて変えてください。

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <div class="border rounded-md shadow-sm">
        <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
        <h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
            Sample Tomato
        </h3>
        <p class="line-clamp-2">
            sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
        </p>
    </div>
</div>

文字の部分（h3、p）が、縁にピッタリと張り付いてしまわないように余白を入れます。
pタグのテキストの下に日時も入れたいので、文字部分全体を囲うdivを作ってしまったほうが楽ですね。

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <div class="border rounded-md shadow-sm">
        <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
        <div class="p-4">
            <h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
                Sample Tomato
            </h3>
            <p class="line-clamp-2">
                sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
            </p>
        </div>
    </div>
</div>

4：作成日時を追加

line-clamp-2を指定したpタグの下に、作成日時を追加します。
下記のスタイリングができるTailwindCSSのクラスを指定してください。

右寄せ
文字サイズはデフォルト（p）より小さめ
文字色はデフォルト（p）より薄め

pを使う場合は、mb-0クラスも入れると余白のバランスが良いです。

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <div class="border rounded-md shadow-sm">
        <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
        <div class="p-4">
            <h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
                Sample Tomato
            </h3>
            <p class="line-clamp-2">
                sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
            </p>
            <p class="text-right text-sm text-slate-400 mb-0">
                2023/10/10
            </p>
        </div>
    </div>
</div>

それっぽい見た目になったのではないでしょうか。

Tailwind CSSでの擬似クラスとトランジション

Tailwind CSSでは、擬似クラスなどを使ったスタイリングもできます。
以下の「マウスカーソルが重なったときに影が濃くなる（浮き上がって見える）」ホバーアニメーションも、用意されているクラスを使うだけで設定できますよ。

擬似クラスを使った指定

擬似クラス (pseudo-classes)は、特定の状態にのみスタイルを当てたいときに使います。
マウスカーソルが重なったときの表示を作る:hover以外に、決まった位置の子要素だけにスタイルを当てる:first-childや:nth-child(n)なんかもよく使いますね。

TailwindCSSで設定できる擬似クラスについては、以下のページで詳しく解説されています。
擬似クラスだけではなく、疑似要素（Pseudo-elements）や属性セレクター (Attribute selectors) も用意されている、と紹介されていますね。これは、かなり便利。

https://tailwindcss.com/docs/hover-focus-and-other-states

ともあれ、今回は擬似クラス:hoverを使います。
レスポンシブな表示にするためにクラス名の頭にmd:などブレイクポイントを意味するワード（modifier）を付け足しましたね。それと同じで、マウスホバー時に適用したいスタイルのクラス名を探して、頭にhover:と付けるだけでOK。

クラス名の冒頭で「～なら適用する」という条件を付けているイメージです。

作成中のHTMLファイルに、TailwindCSSのクラスを追加します。
shadow-smクラスを指定しているdivタグに、マウスホバー状態だと影が大きくなるようにhover:shadow-lgクラスを追加。

何もないのにホバーで変化するのも妙なので、ついでにaタグで囲っておきます。

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <a href="#">
        <div class="border rounded-md shadow-sm hover:shadow-lg">
            <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
            <div class="p-4">
                <h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
                    Sample Tomato
                </h3>
                <p class="line-clamp-2">
                    sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
                </p>
                <p class="text-right text-sm text-slate-400 mb-0">
                    2023/10/10
                </p>
            </div>
        </div>
    </a>
</div>

ブラウザで、変化を確認します。

トランジション

ホバーアクションが実装できましたが、今の状態だとON/OFFがカクついています。
CSSトランジションを設定して、滑らかな動きになるようにしましょう。

TailwindCSSの公式ドキュメントでは、CSSアニメーションの設定関連ユーティリティはTransitions & Animationのグループにまとめられています。

https://tailwindcss.com/docs/transition-property

トランジション効果を適用するCSSプロパティ別に、クラスが分けられていますね。
今回の場合は、全プロパティに適用するtransition-allクラス、もしくはボックスシャドウにだけ変化を適用するtransition-shadowクラスが良いでしょう。

また、transition-**クラスでは、アニメーション速度（transition-duration）が150msと短めに設定されています。変化をわかりやすくするためにduration-500クラスを追加し、アニメーション速度を変えてみます。

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <a href="#">
        <div class="border rounded-md shadow-sm hover:shadow-lg transition-all duration-500">
            <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">
            <div class="p-4">
                <h3 class="text-xl xl:text-2xl font-medium text-blue-700 underline line-clamp-1">
                    Sample Tomato
                </h3>
                <p class="line-clamp-2">
                    sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS sample texts SAMPLE TEXTS
                </p>
                <p class="text-right text-sm text-slate-400 mb-0">
                    2023/10/10
                </p>
            </div>
        </div>
    </a>
</div>

ゆっくり影が大きくなり、カードが浮き上がるようなアニメーションになりました。
今回のようにマウスホバー時にシャドウを変えたり、背景色を変えたりするのは、ボタンを作るときにもよく使います。

他3つにもデザインを反映する

ここまで作ってきたカード風デザインを、2つ目以降のアイテムにも適用しましょう。

部分テンプレートをレンダーする、ループで使うなど、実質一回しか書かないコード（完成見本としてHTMLで4つ入れてあるだけ）の場合は、作ったものを丸ごとコピペして増やせばOKです。

他の場所でも使いたい、一部のスタイルは再利用可能なようまとめておきたいという場合は、独自クラス（コンポーネント）を作ることもできます。例えば、カードの枠組みのデザインを「card-simple」クラスにまとめる場合は、以下のように書きます。

<style type="text/tailwindcss">
    @layer base {
        p {
            @apply my-3;
        }
    }
    @layer components {
        .card-simple {
            @apply border rounded-md shadow-sm hover:shadow-lg transition-all duration-500;
        }
    }
</style>

<div class="md:w-1/2 md:px-5 xl:w-1/4">
    <a href="#">
        <div class="card-simple">
            <img src="img/grooveland-designs-fhuPrCwAzaw-unsplash.jpg" alt="">