「Meguro.css #10 @ oRo」に参加してきました

勉強会メモ

VSCodeの拡張機能開発でTailwind CSSを使う

VSCode拡張でTailwind導入

  • VSCodeの中にSlackをWebViewで埋め込む拡張を作った
    • React + Tailwind
  • HTMLをテンプレートリテラルで書かないといけないから見通しが悪い
  • 導入は普通にtailwindのセットアップで動く

本当Awesome！

  • Teppeiさん

webでアイコン

  • imgタグ
  • svgタグ
  • background-image
  • base64化
  • Webアイコンフォント

Webアイコンフォント

  • フォントにアイコンデータが入ってる
  • 文字としてアイコンを表示
  • 単色
    • 2色ならbefore/after使ってできる
  • 拡大しても荒くならない
  • svgのようなベクターデータが文字コードにマッピングされている
  • 1つのフォントファイルに入ってるので追加や差し替えが大変

CSS Anchor Positioningのきほん！

CSS Anchor Positionin

  • ある要素をAnchorを基準に固定できる機能
  • Anchorの定義
    • id属性をanchor属性と紐づける
    • CSSでanhcor-nameをつける
  • positionの基準位置を指定する感じ
  • anchorの位置に合わせていい感じに表示場所を調整してくれる
    • 画面の端に行った時の位置調整
      • 表示が見切れる時に適用するフォールバックを定義できる
      • position-try-options
      • @position-try
  • ツールチップとかで使える
  • まだ新しいChromeでしか使えない

Mesonryレイアウトの今までとこれから

Masonryレイアウト

  • 石畳
  • レイアウトを指す
  • 高さの違うカードをgridみたいに並べられたUI
  • Pinterestみたいな

実装方法

  • gridだとdrid-template-rowsにmasonryを指定できる
    • 要素が横に流れて表示できる
    • flexとかだと縦に並んじゃう
    • ただしサポートされてないブラウザも多い

Masonryの標準化

  • appleはgridの一部として
  • chromeとしてはgridではないものとして
    • display: masonry
    • gridはレイアウト処理前にアイテムを配置するがmasonryは動的に変化する
  • まだ議論中

CSS Functions & MixinsはCSS設計の福音となりうるのか

  • takanoripさん

CSS FunctionsとMixins

  • Sassでやってたようなfunctionとmixinを標準に入れようという提案
  • mixin
    • 複数のCSSの指定をまとめて管理できる
    • font-sizeとline-heightをまとめて管理とか
  • @layer/@scopeとの関係性で議論になっている

使えるようになったとして

  • コンポーネント化するかmixinにするのかの判断が難しい
  • レイアウトの計算をFunctionsでやるかJSでやるか

TailwindCSSでUIライブラリを作る際のハマりどころ

UIの共通化

  • Reactつかって管理画面作ってる
  • UIはSDKとして提供している
  • MUIとNextUIを使ってた
    • NextUI v2になってブレイキングチェンジが多くて移行できなかった
    • Tailwindにした
  • TailwindのPreflightが衝突
    • nomalizeする定義
    • サービス側でのCSSとぶつかって負けると適用されない
  • TaillwindとUIライブラリをあわせて使うとclassNameが衝突
    • コード書くのがFEの人じゃないのでtailwindのドキュメントを超えたことはさせたくない

CSS3D ライブコーディング

  • Yusuke Nakayaさん

CSSで3D表現

  • translateZ使ってくとサイコロできるデモ