リセットCSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

このスタイルは、ブラウザ間のデフォルトスタイルの違いを統一し、一貫したレイアウトを実現するために非常に有用です。特にプロジェクトの初期段階でこれを設定しておくことで、後々のスタイリング作業がスムーズになり、予期せぬレイアウトの崩れを防ぐことができます。

*TailwindはすでにリセットCSSが入っているので不要

カラフルなunderline：decoration

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

背景

1 . gradiant

<div className="bg-linear-to-br from-violet-400 to-yellow-300">

bg-linear-to-方向 from 色 to 色
- Tawilwind4まではbg-gradient-to-方向

Tailwindのgradiantパターン：https://hypercolor.dev/

2 . 画像

<div className="-z-10 inset-0 absolute bg-[url('/wallpaper-thumb.jpg')]" />

画像が見えなければh-full w-full を追加
-z-10 で階層を下げる
画像をリピート無しで表示したいならbg-cover を追加
*画像名にスペースがあると（例：Screenshot from 11 11）表示されないのでリネームする

インライン要素 / ブロック要素

ブロック要素: 通常、要素はそれぞれ新しい行に表示されます。例えば、<div> や <p> などがブロック要素です。
インライン要素: 要素は行の中に表示され、他のインライン要素と横に並びます。例えば、<span> や <a> などがインライン要素です。

ほとんどの要素はブロック要素
- flex , grid も親はブロック要素
テキストの中にアイコンを入れたいような場合はアイコンをインライン化する

odd / even

CSS：

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

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

Tailwind：

        <div className="group">
          <div className="size-8 m-2 p-2 shadow-xl bg-sky-50 even:ring-4" />
          <div className="size-8 m-2 p-2 shadow-xl bg-sky-50 even:ring-4" />
          <div className="size-8 m-2 p-2 shadow-xl bg-sky-50 even:ring-4" />
          <div className="size-8 m-2 p-2 shadow-xl bg-sky-50 even:ring-4" />
        </div>

@media screen and ：andの右側に半角スペースが必要

無いとエラーが出る

Parsing css source code failed

@media screen and (max-width: 1024px) {
  .links {
    gap: 50px;
  }
}

screen and の部分は無くても良い

@media (max-width: 1024px) {
  .links {
    gap: 50px;
  }
}

初期レイアウトパターン

上部から [ header / main / footer ]があるとして、mainの高さはコンテンツ量に関わらず[ 100dvh - (header + footer) ] が理想

1 . 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>

2 . flex-1

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

3 . min-h-[calc()]

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

HeaderとFooterの固定値を把握している場合
*注意：() 内は半角スペースがあると反映されない

4. grid-rows-[auto_1fr_auto]

      <div className="grid grid-rows-[auto_1fr_auto] min-h-dvh">
        <Header />
          <main className="flex-grow">{children}</main>
        <Footer />
      </div>

growやflex-1と同じ仕組み
*注意：最上位レイアウトにgapは使わない
- gapによるスペースの影響でレスポンシブレイアウトが崩れる

p > code / p:has(code)

p > code：

<p> タグの直下にある <code> タグにスタイルが適用
直下の子要素だけにスタイルを適用。再帰的では無い

p:has(code)：

<p> タグの中に少なくとも1つの <code> タグが含まれている場合、<p> タグにスタイルが適用
子要素の状態に応じて親にスタイルを付与

文章コンテンツ用のクラス名：prose

"prose"というクラス名を付けるだけでHTMLタグに応じたスタイルを整えてくれる

https://github.com/tailwindlabs/tailwindcss-typography

npm install -D @tailwindcss/typography

Tailwind v4以前：

// tailwind.config.ts
  
plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],

Tailwind v4以降：

// globals.cssに以下を追加

@plugin "@tailwindcss/typography";

*proseの注意点

ブレークポイントがXL以上だとw-1/2くらいにデフォルト値が設定されている
- 対策：max-w-noneでproseのwidthをリセット

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

レスポンシブ時にaタグのテキストがスクリーンサイズを超える
- 対策：prose-a:break-words

proseのスタイルを変更するには

要素に対して個別にスタイルをあてることでproseの内容を上書きする

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

要素を隠す：hidden / opacity / invisible

要素そのものが消える：

hidden

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

opacity-0 ：背後のbutton等はクリックが効く
invisible ：button等はクリックが効かなくなる

アニメーションと組み合わせたい場合

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

// 初期の透明状態
opacity-0 pointer-event-none or invisible

これをduration-300 transform などのアニメーションと組み合わることで（透明状態での）クリックイベントを避けつつアニメーションできる

動的なTailwindクラス

1 . テンプレートリテラル

className={`flex items-center justify-center gap-2 rounded-md bg-gray-50 p-3 ${pathname === link.href ? 'bg-sky-100 text-blue-600' : ''}`}

${} 内に式を埋め込む

2 . cn

可読性が高いのでほとんどのケースでcnを使う

    <div
      className={cn(
        "flex items-center justify-center gap-2 rounded-md bg-gray-50 p-3",
        {
          "bg-sky-100 text-blue-600": pathname === link.href,
        }
      )}
    >

const CodeDisplay = ({ code, className }: props) => {
  return (
    <div className={cn("text-sm relative", className)}>

3 . 変数として追加

let baseClass = "flex items-center justify-center gap-2 rounded-md bg-gray-50 p-3";
let activeClass = "";

if (pathname === link.href) {
  activeClass = "bg-sky-100 text-blue-600";
}

return (
  <div className={baseClass + " " + activeClass}></div>
);

cn で書けるのであまり使わない
コンポーネント外で定義して共通化する場合は有り

文字が２行目にいかない

「スペースを含まない長すぎる１つの英単語」の場合、次の行へと折りたたまれないことがある

対策：

break-all

縦方向の折返し：columns-2

<div className="columns-2 gap-2 p-2">

Tailwind：（フォント追加後に）font-thinやfont-lightが効かない

原因：フォントを追加する際にweightを追加していないから

export const noto_sans_jp = Noto_Sans_JP({
  weight: ["400", "700"],
  subsets: ["latin"],
});

対策：weightを追加

const noto_sans_jp = Noto_Sans_JP({
  weight: ["100", "200", "300", "400", "500", "600", "700"],
  subsets: ["latin"],
});

それぞれのweightが font-thin (100) ~ font-black (900)に対応している

重要：dvh

検証ツールで確かめたモバイルの表示と実際の表示が違うのはmin-h-screenが原因

対策：dvh

min-h-dvh を使えばスマホのURLバーなどのUI部分が含まれず検証ツールと似た感じになるので、min-h-screen をトップレベルで使う習慣は辞めた方が良い

タグの塊

focus-within:

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

子孫のどれかがフォーカスされた時
divタグをinputボックスとして使うような場合に使う
input / buttonが「操作中」であることを表現

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>

タグの塊に対するhover連動
親に group をつける必要がある

CSS / Tailwind :