TailwindCSSを使う際に参考になるサイト一覧
公式系
Tailwind公式ドキュメント
英語
日本語（公式を日本語訳してくれたもの。現在v1.9.0まで）
Tailwind Play
初期状態
Tailwind UI
Tailwind CSSの作者が公開している公式のコンポーネント集。
有償で且つすべてのコンポーネントを使用したい場合は金額が少しネックになるかもですが、300種類以上利用できる以外にもページレベルで用意されているものも利用可能になり、現時点では購入後もアップデートは無料。
ブロック・コンポーネント集
Kometa UI Kit
一番オシャレな気がする。
130種類以上のブロック・コンポーネント例が公開されており、HTMLだけでなくVueとReactで使う想定の実装コードも用意されています。
使う際は、Tailwind configからconfigファイルをコピペしないと色が反映されなかったりするので注意。（JS盛り込みなしなので自分で実装する必要がある。）
Tailwind Starter Kit
一般的に使用されるWebページでのデモが用意されています。
JavaScript込のコンポーネント
同じコンポーネントで、CSSのみ、Vue.js、React.js、Angular、プレーンのJavaScriptを使用した実装方法が解説されています。
Font Awesome使用
Tailwind UI KIT
200種類以上のコンポーネント＆デザインテンプレート
コンポーネントによってはJavascriptが必要。
また、写真は相対パスでの指定になっているのでコピペしてもそのまま表示できないので注意。
使い勝手もそこまでよくはない。
font-awesome
Tail Blocks
60種類以上のブロック・コンポーネント例が公開されており、レスポンシブやダークモード時の表示確認、7種類のカラーモードが用意されています。
カラーモード変更はコード表示時は反映されないので、プレビュー状態のときにカラー指定してから「VIEW CODE」でコード表示する必要があります。
なかなかシンプル。
Wicked Blocks
コンポーネント・一部テンプレート以外は有料
Tailwind Templates
googleのマテリアルアイコンを使っているので別途ダウンロードする必要がある。
rem converterなど、ピクセルを入力すると、remの値に変換してくれるツールなどもある。
tailwindcomponents
自由に自分が作ったコンポーネントやテンプレートを投稿できるサイト。人気順で並べ替えなどなく、良いものをみつけるのは大変。
CodePen Search
こっちのほうが人気順などできる。
便利なツール系
Tailwind Grid Generator
Grid関連の組み合わせ例を見たいときに便利なジェネレータです。
アイテム数の指定と各デバイスでのカラム数・間隔の指定をドラッグで操作すると、ページ下部で実装コードが確認できます。
grid というがコードはflex。複雑なグリッドレイアウトがしたいという場合には適していない。
Hypercolor
綺麗なグラデーションカラーを再現するのに必要なclassの組み合わせを簡単にコピーできます。
また、方向指定やダークモード時の表示確認もできます。
Tailwind Toolbox
テンプレート・コンポーネント・ジェネレータ・ツールなど、Tailwind CSSに関する様々なリソースがまとめられています。
エディタやデザインツールで使えるプラグインも紹介されているので、良さそうなものがあれば取り入れることでより楽に制作できるようになると思います。
