個人的によく使う、省スペースで表示できて雑然としないUI with TailwindCSS
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
便利なのが登場！ Tailwind CSSで実装されたOSSのUIコンポーネント集 -FlowBite
Webサイトやスマホアプリでよく使用されるUIコンポーネントをTailwind CSSのユーティリティクラスで実装したオープンソースのライブラリを紹介します。 Tailwind CSSには、コンポーネントの基本セットがありません。FlowBiteではナビゲーションバー、カード、ボタン、ページネーション、フォームなど基本的なコンポーネントがすべて揃っています FlowBite FlowBite -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました FlowBiteの特徴 FlowBiteの使い方 FlowBiteのコンポーネント FlowBiteの特徴 FlowBiteは、Tailwind CSSのユーティリティ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『Tailwind CSS実践入門』 出版記念基調講演
TailwindCSSで、最近のWebサイトでよく見かけるUI要素をデザインするCSSの実装テクニックのまとめ
