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