Tailwind CSSの便利なツール集。コンポーネント、テンプレートを使って作業時間が半分に。

ハウツー
コロのicon
コロ

公式ドキュメント

書き方がわからない、忘れた時は公式検索が便利でした!
💡
ドキュメント階層でスラッシュ `/` or `Shift + K` をタイピングすると、検索モーダルが開きます。
An image from Notion

ジェネレーター

tailwind.config用のカラージェネレーターサイトです。
左上のカラーパネルで色を選ぶと、カラーコード一覧を生成してくれます。
tailwind css用カラーコード生成サイト
CSSグラデーションのジェネレーターです。
色、グラデーション方向が指定できて、tailwind用にclassを生成してくれます。

使い方

FROM, VIA, TOでグラデーションを変更
画面右のコードアイコン <> をクリックするとtailwind classとCSSでの書き方が生成されます。
Gradient Designerスクリーンショット
グラデーションclass生成
レスポンシブにも対応している、グリッドレイアウトのclassを生成してくれます。
tailwind grids
tailwind grids class生成
ドラッグ&ドロップでTailwind cssを使ったテンプレートをジェネレートできるサイトです。
使いたいブロックを左から選んで右にドロップして組み立てていくとサイトフレームが簡単に作成できます。
Stitchesでテンプレート作成

コンポーネント、テンプレート集

Tailwind css制作チームによるUIコンポーネント集。
高品質なコンポーネントが無料で使えます。(有料もあり)
An image from Notion
フリーで使用できるコンポーネント一覧はこちら
高品質なTailwindのスターターキット、コンポーネント、テンプレートが無料で公開されています。
Tailwind関係のツールやジェネレーター、プラグインの紹介もあるのでこのサイトをチェックすれば一通りTailwindまわりの便利ツールのことがわかりそうです。
Amrit Nagiさんによって制作、運営されています。
tailwind toolbox
コピー・ペーストで様々なレイアウト関連のブロックが使えます。
ログイン画面や、フォームなどのパーツもありました。
An image from Notion
An image from Notion
コミュニティ型のTailwind Components集です。
Buttons, Cards, Tables, Froms 様々なコンポーネントが投稿されています。
アカウントを作って自分で投稿することもできます。
An image from Notion
サイトでよく使うコンポーネントが無料で公開されています。
シンプルなつくりで、必要最低限のブロックが用意されているので、迷わずいい感じのコンポーネントが探せました。
An image from Notion

番外編

bootstrapでもuppercase, lowercaseは使えるらしいのですが、はじめて知りました。
便利ですね、cssフレームワーク。

uppercase, lowercase

CSS
Tailwind CSS
コロのicon
コロ
飼い猫と食べ物のことを考えてたら1日が終わってます。Reactでいろいろ作りたい