Tailwind CSSでホバーなどの設定を行う

Tailwind CSSでリンクのホバー時やボタンの非活性など、状態を変えるスタイルの設定をいくつか試してみます。
使用環境はAastro 5.16.0 / Tailwind CSS 4.1.17になります。

サンプルコード

まずはhoverやfocusといった、リンクなどに対する設定を試してみます。
設定したいclassの前にhover:やfocus:のような形で付与します。

<a
  href=""
  class="
    text-blue-700
    hover:text-red-700
  "
>hover</a>

<a
  href=""
  class="
    text-blue-700
    focus:text-red-700
  "
>focus</a>

<a
  href=""
  class="
    text-blue-700
    focus-visible:text-red-700
  "
>focus-visible</a>

<a
  href=""
  class="
    text-blue-700
    active:text-red-700
  "
>active</a>

<div
  class="
    focus-within:text-red-700
  "
>focus-within <a href="" class="text-blue-700">inner-link</a></div>

hoverやfocusのデモページ

次にフォーム関連の設定をいくつか試してみます。
まずはbuttonのdisabledです。

<button
  class="
    disabled:text-gray-400
  "
>ボタン</button>
<button
  class="
    disabled:text-gray-400
  "
  disabled
>disabledボタン</button>

disabledのデモページ

次にinputのplaceholderとreadonlyの設定です。

<input
  type="text"
  placeholder="placeholder"
  class="
    border
    placeholder:text-red-700
  "
>
<input
  type="text"
  value="value"
  readonly
  class="
    border
    read-only:text-gray-400
  "
>

placeholderとreadonlyのデモページ

最後にチェックボックスのcheckedです。

<input
  type="checkbox"
  class="
    appearance-none
    w-4
    h-4
    bg-blue-700
    checked:bg-red-700
  "
>not check
<input
  type="checkbox"
  class="
    appearance-none
    w-4
    h-4
    bg-blue-700
    checked:bg-red-700
  "
  checked
>checked

checkedのデモページ