Tailwind CSSという言葉、最近よく耳にするようになっています。
カードやボタンなどUIデザインを基本としたCSSスタイリングが特長のBootstrapなどのフレームワークに比べ、Tailwind.cssはHTMLに直接スタイリングを行ってしまおうという考えで、今までのCSS設計のアプローチと全く真逆とも言えます。
そのため、ひとつの要素に追加された膨大なクラス名を見ると、カスタマイズしにくいと感じるひとも多いようです。
そんなときは、Tailwind.cssで利用可能なUIデザインのHTMLスニペットを集めた便利ライブラリFlowriftを活用してみましょう。
ヘッダーやフッター、ナビメニューといった基本から、ヒーローイメージ、CTA、サービス、お問い合わせフォーム、値段表、ギャラリー、404ページといったホームページ制作でよく利用するUIコンポーネントのコードをボタンひとつでコピペできます。
Tailwind CSSで使える便利ツールも後半で一緒にまとめています。
Tailwind.cssでできたUIデザインのHTMLコードをコピペできる便利サイトFlowrift
Flowriftの使い方はとても簡単です。まずは左サイドバーに並べられたカテゴリから目的のUIデザインを探しましょう。
バナーやブログ、CTA、FAQ、フッター、入力フォーム、ヒーロー、ロゴショーケース、チーム紹介、404ページなど細かく分類されています。
UIデザインが決まったら、サムネイルの目アイコンをクリック。プレビュー画面が開かれ、画面上よりコードのコピペ、リンク共有できます。
たとえばCTAには、4つのUIテンプレートが用意されています。矢印キーでまとめて確認できます。
デザインを悩みがちなフッターには8スタイルが用意されています。コピペでそのまま利用できるのは、とても便利。
画面右上からダークモードで切り替えることも可能。UIデザインの見え方を確認するときに。
サイコロアイコンをクリックすると、ランダムでUIデザインが表示されます。アイデアが浮かばないときにどうぞ。
細かくカテゴリ分けされたUIデザインのプレビューを確認しながら、クリックひとつでHTMLコードをコピペ、利用できるので、ウェブ制作時間の短縮にもおすすめのツールです。
Tailwind.cssで使える便利ツールまとめ
Tailwind.cssの人気が高まるにつれて、Tailwind専用の便利ツールやライブラリなどが数多く公開されています。ここでは、Tailwind.cssをつかったウェブ制作で検討したいものをリストアップしています。
フレームワークTailwind CSSで作成されたブロックやコンポーネントを集めたコレクションで、コードをコピペするだけで利用できるお手軽さ。
コピー＆ペーストで利用できるTailwindフレームワーク対応のボタン素材コレクション。
Tailwind CSSフレームワークに対応した無料コンポーネント集で、あらゆる要素が揃っているだけでなく、右上ボタンより配色テーマを切り替えることも可能。
Tailwind.CSSで作成された、２００を超えるコンポーネントがセットに。どんな案件にも対応できる汎用性の高いコンポーネントが揃い、どれもオープンソースで公開中。
デザイン性の高いランディングページ用HTMLファイルを丸ごと無料ダウンロードできます。Bootstrapや話題のTailwindフレームワークを利用しているので、柔軟なカスタマイズが可能。
Tailwindで構築されたモバイル向けUIコンポーネント。iOSとMaterial Designのコンポーネントが収録されています。
TailwindフレームワークでデザインされたUIブロックを組み合わせ、自分だけのショッピングサイトを作成できるUIキット。TRY DEMOで実際にツールを利用できます。
人気の軽量CSSフレームワークTailwindをベースに、UIコンポーネントで組まれたブロック要素を多数揃えたHTML/CSSビルダーツール。ソースコードのコピペはもちろん、カラースキン変更やレスポンシブレイアウトによる確認、話題のダークモードにも対応。
BootstrapやTailwind、Material UIなど人気フレームワークを選択でき、ドラッグ＆ドロップでウィジェットを追加していくだけでテンプレートを数分で作成できます。デベロッパーの開発をより手早く行うことが可能に。
ドラッグ＆ドロップで直感的にウェブサイトを作成できる、Tailwind.CSSをベースにしたオンラインHTMLページビルダー。2021年に入り、Tailwind.cssの勢いがすごいです。
このノーコードWebページビルダーアプリには、120以上の編集可能なブロックが用意されており、ドラッグ＆ドロップの操作のみで完成です。
FlowBite – Tailwind Figma Design Kit (Free Edition)
2020年末ごろから急速に人気が広がっているTailwind CSSに対応したデザインをFigmaで作成できるキット。
より新しいツールとしては以下リストより。
- Pollen – ピッドプロトタイピング、一貫したスタイリング、ユーティリティーファーストなデザインシステムの基盤となるCSS変数のライブラリ
- Knights of the Flexbox Table – Tailwind.cssをつかったCSS Flexboxについてゲーム形式で学ぶことができるサイト
- Material Tailwind Kit React – Tailwind.cssとReactベースで構築された、マテリアルデザイン対応のUIキット
- Material Tailwind Kit – Tailwind CSSとマテリアルデザインをつかったコンポーネント集
- Hypercolor – Tailwind CSSで使える専用グラデーションーコレクション。向きや色などのカスタマイズもでき、HTMLコードもコピペ可能
- Color Theming with CSS Custom Properties and Tailwind – Tailwind CSSをつかったウェブ制作で活用できる、CSS カスタムプロパティをつかったテクニックを紹介
- A Look at Tailwind CSS – 詳しい考察で知られるAshmad Shadeed氏によるTailwind CSSのメリットとデメリットの解説
