UIキットやブロック・コンポーネント集など、「Tailwind CSS」を使用する際に参考になるリソースのまとめです。
既にTailwind CSSを使い慣れている人は活用することでよりスピーディに且つ楽に制作できるようになりますし、これからTailwind CSSを使う予定だけど公式のドキュメントだけだといまいちピンとこない人は、紹介するものをいくつか眺めてみると「こんな見栄えも表現できるのか」とか「この見栄えはこの組み合わせ方で再現できるか」など把握するのに役立つと思います。
Tailwind UI
Tailwind CSSの作者が公開している公式のコンポーネント集です。
有償で且つすべてのコンポーネントを使用したい場合は金額が少しネックになるかもですが、300種類以上利用できる以外にもページレベルで用意されているものも利用可能になり、現時点では購入後もアップデートは無料とアナウンスされているので、Tailwind CSSを多用するようであれば購入を検討してみてもいいかもしれません。
Tailwind UI KIT
コンポーネントによってはJavaScriptや設定を別途追加する必要がありますが、200種類以上のコンポーネントが公開されていて実装コードをコピーできます。
また、サンプルによってはダークモード対応した状態で用意されています。
Kometa UI Kit
130種類以上のブロック・コンポーネント例が公開されており、HTMLだけでなくVueとReactで使う想定の実装コードも用意されています。
Tailblocks
60種類以上のブロック・コンポーネント例が公開されており、レスポンシブやダークモード時の表示確認、7種類のカラーモードが用意されています。
カラーモード変更はコード表示時は反映されないので、プレビュー状態のときにカラー指定してから「VIEW CODE」でコード表示する必要があります。
Wicked Blocks
Tailwind Templates
tailwindcomponents
こちらは上で紹介してきたものとは違い、様々なユーザーが作成したブロックやコンポーネントがまとめられています。
CodePen Search
様々なユーザーがHTML/CSS/JavaScriptを使ったコードを投稿するCodePenでも、Tailwind CSSを使ったサンプルを多数見ることができます。
Tailwind Grid Generator
Grid関連の組み合わせ例を見たいときに便利なジェネレータです。
アイテム数の指定と各デバイスでのカラム数・間隔の指定をドラッグで操作すると、ページ下部で実装コードが確認できます。
Hypercolor
綺麗なグラデーションカラーを再現するのに必要なclassの組み合わせを簡単にコピーできます。
また、方向指定やダークモード時の表示確認もできます。
Tailwind Toolbox
テンプレート・コンポーネント・ジェネレータ・ツールなど、Tailwind CSSに関する様々なリソースがまとめられています。
エディタやデザインツールで使えるプラグインも紹介されているので、良さそうなものがあれば取り入れることでより楽に制作できるようになると思います。
Tailwind Play
最後はブラウザ上で表示確認できるTailwind CSS専用のオンラインエディタです。
レスポンシブ表示・ダークモード表示の切り替えが可能で、HTMLとCSSだけでなくConfig（tailwind.config.js）の内容も編集することができます。