Tailwind CSSを本気でカスタマイズする方法
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
1.Tooltip こちらは定番ですね！ 特に、何か注釈などの追加情報をユーザーに知らせる時はよく利用します。要素のホバー時だけ表示できるので、エリアの狭い箇所でも利用できるUIです。ただ、警告などの内容には非推奨な点やモバイルユーザーの考慮を必要とする点はデメリットですかね。 // page.tsx <div className="mt-10 mx-auto text-center"> <Tooltip label="ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。ここに説明が入ります。"> <span className="p-2 bg-gray-100 rounded-full">🗑️</span> </Tooltip> </div> // Tooltip.tsx import { ReactNode } from "react" type TooltipProp
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
個人的によく使う、省スペースで表示できて雑然としないUI with TailwindCSS