underline・listの色

underline：decoration

<div className="underline decoration-violet-400 underline-offset-4">

list : marker

<ul className="marker:text-red-500 list-disc list-inside">

odd / even

CSS：

.box:nth-child(even){
  transform: translateX(-400%);
}

.box:nth-child(odd){
  transform: translateX(400%);
}

Tailwind：

      {Array.from({ length: 10 }).map((_, i) => (
        <div key={i} className="size-4 even:bg-red-300"></div>
      ))}

初期レイアウト

上から header / main / footerがあり、mainの高さを最低でも100dvh - (header + footer) にするレイアウト

flex-grow

     <div className="min-h-dvh w-4/5 mx-auto justify-between flex flex-col">
       <Header />
         <main className="flex-grow">{children}</main>
       <Footer />
     </div>

flex-1

    <div className="min-h-dvh flex flex-col">
      <Header />
      <main className="flex-1">{children}</main>
      <Footer />
    </div>

min-h-[calc()]

<main class="min-h-[calc(100dvh-4rem-4rem)]">
  Main content
</main>

• HeaderとFooterの固定値を把握している場合

>とhas

p > code：

• <p> タグの直下にある <code> タグにスタイルが適用

p:has(code)：

• <p> タグの中に少なくとも1つの <code> タグが含まれている場合、該当する<p> タグにスタイルが適用

prose

tailwindのtypographyプラグインを使うと"prose"というクラス名を付けるだけでHTMLタグに応じてスタイルが整えられる。

<article className="prose prose-a:no-underline prose-p:text-xs"

• proseのデフォルトスタイルは上書きできる。

proseの注意点：

• ブレークポイントがXL以上だとw-1/2くらいにデフォルト値が設定されている。

  • 対策：max-w-noneでproseのwidthをリセット

<article class="prose max-w-none">{{ markdown }}</article>

• レスポンシブ時にaタグのテキストがスクリーンサイズを超える

  • 対策：prose-a:break-words

• proseを使用するとダークモード時にほぼ全てのテキストが薄いグレーになる。

  • 対策：dark:prose-p:text-whiteのように各タグのスタイルを上書きしても良いが、以下のクラスを付けるのが簡単

// 推奨
dark:prose-invert

hidden / opacity / invisible

要素そのものが消える：

• hidden

  • DOMからは消えないがレイアウトから消える

要素は見えないが消えない：

• opacity-0

  • 背後のbutton等はクリックが効く

• invisible

  • button等はクリックが効かなくなる

アニメーション：

• アニメーションが必要な場合hidden には効かないのでopacity-0かinvisibleでクリックイベントを避けつつアニメーションを実装する

<div
  className={cn(
    "transition-opacity duration-300",
    open ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
  )}
/>

dvh

min-h-screenだと検証ツールで確かめたモバイルの表示と実際の表示が違う事が多い。min-h-dvh を使えば検証ツールと似た感じになる。

状態共有

focus-within:

子 -> 親：

<div className="focus-within:ring-2 focus-within:ring-green-500">
  <Search />
  <input />
  <button />
</div>

• 子の操作状態を親で表現

group-hover

親 -> 子：

<div className="group flex flex-wrap gap-2">
  <span className="group-hover:bg-gray-200">Text</span>
  <span className="group-hover:bg-gray-200">Text2/span>
</div>

• 親の操作状態を子に伝播

• 親に group をつける必要がある

transition

• transition-[]はデフォルト値（150ms）があるので、必ずしもduration-[]を書く必要はない。