HTMLを入力するとTailwind.cssが適応された状態でプレビューし、そのまま編集できるエディタ・「TailEdits」
TailEditsはHTMLを入力するとTailwind.cssが適応された状態でプレビューし、そのまま編集できるユニークでシンプルなオンラインエディタです。 編集、というのはHTMLの方ではなく、プレビューを直接編集できるビジュアルエディターとなっています。Tailwind Playのようにプレビューペインとエディターペインに分割されているタイプではなく、プレビューペインでも直接編集出来るようになっています。 また、タグに問題がある場合はエラーも出すようになっています。コンポーネントを作る際には良いかもしれませんが、これくらいの機能なら正直OSSで欲しいかも。利用の際に特にユーザー登録は必要なく、誰でも無料で利用可能です。 TailEdits
これは便利！ Tailwind CSSのチートシート、v3対応、すべてのクラスとプロパティ・値を参照および検索もできる優れもの
Tailwind CSS v3がリリースされ、ますます注目されているTailwind CSSのチートシートを紹介します。 Tailwind CSSに使用されているすべてのクラスとそのプロパティ・値を参照および検索もでき、非常に便利なチートシートです。 Tailwind CSS Cheat Sheet Tailwind CSSとは Tailwind CSSのチートシート Tailwind CSSとは Tailwind CSS（Tailwind CSS -GitHub）はユーティリティファーストのCSSのフレームワークで、汎用的なクラスを組み合わせてWebサイトやスマホアプリのレイアウト・コンポーネントを実装します。 たとえば、メールの入力欄だと下記のように記述します。 <input class="block appearance-none bg-white placeholder-gray-
便利なのが登場！ 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のユーティリティ
Tailwind CSS製UIデザインのHTMLコードをコピペできるFlowrift（便利ツールまとめも公開）
Tailwind CSSという言葉、最近よく耳にするようになっています。 カードやボタンなどUIデザインを基本としたCSSスタイリングが特長のBootstrapなどのフレームワークに比べ、Tailwind.cssはHTMLに直接スタイリングを行ってしまおうという考えで、今までのCSS設計のアプローチと全く真逆とも言えます。 そのため、ひとつの要素に追加された膨大なクラス名を見ると、カスタマイズしにくいと感じるひとも多いようです。 そんなときは、Tailwind.cssで利用可能なUIデザインのHTMLスニペットを集めた便利ライブラリFlowriftを活用してみましょう。 ヘッダーやフッター、ナビメニューといった基本から、ヒーローイメージ、CTA、サービス、お問い合わせフォーム、値段表、ギャラリー、404ページといったホームページ制作でよく利用するUIコンポーネントのコードをボタンひとつでコ
Tailwind CSSからクラス名覚えにくさを消したらどうなる？ こうなった
Tailwind CSSはCSSフレームワークの一つで、あらかじめ用意されたクラス名を組み合わせてデザインを構成するというUtility-Firstというコンセプトが特徴です。 筆者は、Tailwind CSSの利点を活かしつつ、「Tailwind CSS特有のクラス名を覚えなければいけない」という問題を解消できないか試してみました。この記事では、その結果としてできたLightwind CSSを紹介します。 Tailwind CSSの利点と欠点 Tailwind CSSの公式サイトのサンプルを次に引用しますが、Tailwind CSSでは次のようにスタイルを記述します。 <figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0"> ... </figure> これらのクラスは次のような意味です。 md:flex → @media (m
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Tailwind CSSで実装されたUIコンポーネント・ページテンプレート、商用プロジェクトで無料のものをまとめました
Tailwind UI KIT – 250 components and templates for React, VueJS and Angular.