【React】daisyUIを触ってみた！かなり楽しいw
daisyUIとは The most popular, free and open-source Tailwind CSS component library Tailwind CSSをベースとしたCSSライブラリで、No JavaScriptでかわいくて機能的な見た目を実現できるスグレモノ。 Bootstrapのような使い勝手でいろんなコンポーネントを実現できる。実態はTailwind CSSなので拡張も簡単。 今回はこちらのライブラリをReact（Next.js）で色々触ってみましたので、感想などをお伝えします。 なぜ興味を持ったか 最近プロジェクトでChakra UIを触っている。かなり便利なのだが、機能もスタイリングも提供されたものを使っているゆえにロックインされている感じが少し怖い。 特に機能（ロジック）面の実装においては思うところが色々あって、 慣れていないときにあらゆるコンポ
Tailwind CSS の一歩進んだ書き方
-## CSS カスタムプロパティ +## CSS カスタムプロパティの宣言 +## CSS カスタムプロパティの利用 + +```html:html +<h1 class="px-[--gutter]"> + Hello world! +</h1> +``` + +`px-[var(--gutter)]` のように記述することもできますが、`var()` は省略可能です。 -<h1 class="text-[length:var(--title-size)] text-[color:var(--title-color)]"> +<h1 class="text-[length:--title-size] text-[color:--title-color]"> +## フォントサイズと一緒に行の高さを指定するショートハンド + +```html:html +<h1 class="text-
Tailwind CSSで親要素や兄弟要素の状態変化を簡単にスタイリングする
こんにちは、 Gaji-Labo 横田です。Tailwind CSS には親要素や兄弟要素の状態をスタイリングしたり制御できるクラスが用意されています。今回はこのクラスを簡単に紹介します。 親要素を制御できる group クラス親要素に group クラスのマークを付け、子要素に group-* 接頭辞クラスを使用することで親の状態に基づいたスタイリングが可能になります。 以下は公式ドキュメントから引用したコード例です。 <a href="#" class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"> <div class="flex items-center spa
Tailwind CSS のテンプレート & UI キット集【まとめ】 - Qiita
Tailwind CSS のテンプレートサイトを使えば Web サイトを効率よく作成できます。簡単ではありますが個人的に素敵だと思った Tailwind CSS のテンプレートサイトをまとめてみました。 Tailwind CSS テンプレート＆ UI キットサイト Tailwind UI（有料） https://tailwindui.com/ すべてのテンプレートを使用するにはライセンス購入が必要 シンプルなデザインはとても汎用的 React や Vue を使用したテンプレートも有 Headless UI https://headlessui.com/ ドロップダウンやダイアログ等の「機能」をメインとした UI コンポーネント集 サンプルコードは React か Vue.js の2種類から選択できる。 MIT ライセンス Preline UI https://preline.co/ 無料で
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
Tailwind CSSの入門に！ コピペで簡単に実装できるUIコンポーネントとページレイアウトのまとめ -Preline UI
Webサイトでよく使用されるさまざまなUIコンポーネントとページレイアウトをTailwind CSSで実装したコンポーネント集を紹介します。 Tailwind CSSをこれから始めるという人にも簡単で、デフォルト構成のまま機能し、各UIコンポーネントとページレイアウトはHTMLをコピペするだけで簡単に実装できます。 Preline UI Preline UI -GitHub 他にも、Tailwind CSSで実装されたUIコンポーネントを探している人は下記もご覧ください。 Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました Preline UIの特徴 Preline UIのUIコンポーネントとページレイアウト Preline UIの使い方 Preline UIの特徴 Preline UIは、ユーティリティファーストのTai
Tailwind CSS製UIデザインのHTMLコードをコピペできるFlowrift（便利ツールまとめも公開）
Tailwind CSSという言葉、最近よく耳にするようになっています。 カードやボタンなどUIデザインを基本としたCSSスタイリングが特長のBootstrapなどのフレームワークに比べ、Tailwind.cssはHTMLに直接スタイリングを行ってしまおうという考えで、今までのCSS設計のアプローチと全く真逆とも言えます。 そのため、ひとつの要素に追加された膨大なクラス名を見ると、カスタマイズしにくいと感じるひとも多いようです。 そんなときは、Tailwind.cssで利用可能なUIデザインのHTMLスニペットを集めた便利ライブラリFlowriftを活用してみましょう。 ヘッダーやフッター、ナビメニューといった基本から、ヒーローイメージ、CTA、サービス、お問い合わせフォーム、値段表、ギャラリー、404ページといったホームページ制作でよく利用するUIコンポーネントのコードをボタンひとつでコ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ravixUI
daisyUI — Tailwind CSS Components ( version 4 update is here )
今すぐTailwindでの開発を楽にするお手軽2ステップ
Tailwind CSS CheatSheet for Beginners and Not Only
Headless UI
next.js/examples/with-tailwindcss at canary · vercel/next.js
Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
Unknown at rule @tailwind CSS in reactjs