Zenn
Open2

Tailwindの手触り

Tailwind CSS
ゆうてんゆうてん
<button className="py-1 px-2 font-semibold rounded-sm shadow-md text-white bg-blue-600 hover:bg-blue-800">ボタン</button>

と

<style>
.btn {
  @apply py-1;
  @apply px-2;
  @apply font-semibold;
  @apply rounded-sm;
  @apply shadow-md;
  @apply text-white;
  @apply bg-blue-600;
}
.btn:hover {
  @apply bg-blue-800;
}
</style>
<button className="btn">ボタン</button>

と2パターン書けるので、方針に迷う。

ゆうてんゆうてん
let pressed: boolean;
<button className={`bg-blue-600 ${pressed ? "bg-blue-800" : ""}`} aria-pressed={pressed}>ボタン</button>

を

let pressed: boolean;
<button className="bg-blue-600 pressed:bg-blue-800" aria-pressed={pressed}>ボタン</button>

と書けると嬉しいんだけどなぁ。