「Tailwind CSS実践入門」を読んで雑にまとめる

りょた

参考

りょた

ユーティリティファースト

りょた

メリット

クラス名を考える必要がない。
HTML/CSSファイルを交互に見る必要がない。
影響範囲が明確。

りょた

カスケーディング

CSS（Cascading Style Sheets）のCascadingとは、「階段状の滝のような」「連鎖的に伝わる」という意味ですが、様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用されます。このようにスタイル指定が段階的に引き継がれて文書に適用されるのがCSSの大きな特徴です。

https://www.htmq.com/csskihon/006.shtml

りょた

常にセマンティックな方がわかりやすいと思いがちだが、CSSの歴史を見ると苦労も多い。

りょた

ヴァリアントとモディファイア

ヴァリアントは画面幅の条件づけなどの時に利用する語
モディファイアはそれを表現する修飾子を表す語。(そのものを表す概念？？)

りょた

詳細度

Tailwindのクラスを全てimportantをつけられる。

//tailwind.config.js
important: true,

りょた

VScode拡張機能

りょた

clasxやclassNamesに拡張機能の対象にしたいときtailwind.config.jsに設定。

//config.js
tailwindFunctions: ["classNames"]

りょた

真似したい使い方！便利！

りょた

z-indexの設定！これも真似したい。

tailwind.config.js 
 module.exports = {
   theme: {
     zIndex: {
       0: 0,
       1: 1,
       infinity: "calc(infinity)",
     },
   },
 };

りょた

モディファイア

りょた

focusとfocus-within

focus:はその要素自身がフォーカス中であるかを見るものでしたが、子孫要素がその状態にあることを見たいケースもあります。たとえば中に<input>を含む、入力欄のコンポーネントルートにあたる<div>要素があるとします。ここで、中の<input>がフォーカス中だったら親である<div>のほうの見た目を変えるというふうにしたい場合、focus-within:を用います

りょた

first,last,first-of-type

<div>
          <div id="div-1" className="first:bg-red-500">:first-childである（:first-of-typeでもある）</div>
          <span id="span-1" className="first-of-type:bg-blue-500">:first-of-typeである（:first-childではない）</span>
          <span id="span-2">...</span>
          <span id="span-3">...</span>
          <div id="div-2" className="last-of-type:bg-blue-500">:last-of-typeである（:last-childではない）</div>
          <span id="span-4" className="last:bg-red-500">:last-childである（:last-of-typeでもある）</span>
        </div>

りょた

has

<div className="has-[dialog[open]]:overflow-hidden">
          <dialog open>dialog</dialog>
        </div>

りょた

placeholder:

<div>
        <input type="text" className="placeholder:text-red-500" placeholder="プレイスホルダー" />
        <input type="text" className="placeholder-shown:text-blue-500" placeholder="プレイスホルダー" />
      </div>

りょた

file:

<input
          type="file"
          className="
          file:mr-4 file:py-2 file:px-4
          file:rounded-full file:border-0
          file:text-sm file:font-semibold
          file:bg-violet-50 file:text-violet-700 hover:file:bg-violet-100"
        />

りょた

first-letter: 最初の文字の装飾
first-line: 最初の行の装飾

<p className="first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:font-bold first-line:uppercase first-line:tracking-widest">

りょた

orientation
ビューポートの向きで条件分岐する。
portrait: 縦
landscape: 横

りょた

動的なスタイル


<div className="bg-red-500 h-[200px] lg:h-[var(--parent-height)]" style={{ "--parent-height": el.innerHeight }}>
        伸びる
      </div>

りょた

<div className="bg-red-500 h-[200px] lg:h-[var(--parent-height)]" style={{ ["--parent-height" as string]: "300px" }}>
        伸びる
      </div>

りょた

公式プラグイン

りょた

@tailwindcss/typography

りょた

@tailwindcss/container-queries

<div class="@container/main"
<div class="@lg/main:underline">
     <!-- `main`コンテナが`32rem`より広いときに下線が引かれる -->
   </div>
 </div>

りょた

コンポーネントの責務とインターフェース

りょた

全てのUIがコンポーネントであるわけではない。
Material UIやAtomic desighn は「ページ内の全ての要素はコンポーネントである」という思想

りょた

Tailwind CSSの「ユーティリティファースト」とは、必要に応じてあとから抽象化をする（そうと確信できない箇所はユーティリティで書く）という思想であり、最初からあらゆるUIが「下位のコンポーネント」からできていると決め込まないことです。

やりがち。

りょた

バリエーションライブラリー

https://www.tailwind-variants.org/

https://cva.style/docs

りょた

「シャッドシーエヌ・ユーアイ」と読みます。

読み方がわからなかった。スッキリ。
https://ui.shadcn.com/

りょた

HeadlessUI

https://headlessui.com/

りょた

アニメーション

https://www.framer.com/motion/

りょた

カスタマイズ

りょた

モディファイアの「:」を別の文字にできる

module.exports = {
   separator: "_",
 };

りょた

デザインシステムについて

りょた

この[]の使い方はよき。例外かどうか即時にわかる。

タブレット以上の画面では、ガイドラインから外れていることが一発でわかるマークアップ

<!-- NOTICE: 高さの合計を4の倍数にしたいので、タブレット以上では例外的に5pxのpaddingを使う -->
 <div class="leading-none text-12 py-4 tablet:text-14 tablet:py-[5px]">
   タブレット以上の画面では、ガイドラインから外れていることが一発でわかるマークアップ
 </div>

りょた

トークンの命名

色やスペーシングを命名する際の方針には大きく分けて2つあります。たとえば大きさが8pxのスペーシングに対して、そのまま8と名付けるか、あるいはsmallやsのように名付けるかです。本書では、前者を「リテラル」な命名、後者を「セマンティック」な命名と呼びます。

りょた

デザイントークンの参考書

https://www.refactoringui.com/

りょた

背景素材

https://heropatterns.com/