🍃
ブックマークしているTailwind関連のサービスを共有します
TailwindCSSと一緒に使える便利なサービスをブックマークしていたら、いつの間にか結構な数になっていたので共有します。
ツール系
Tailwind CSS Cheat Sheet
チートシート。「このスタイルTailwindでどうやって書くんだっけ?」を解決します。Tailwind Ink | AI color palette generator for Tailwindcss
Tailwindに用意されている色のカラーコード一覧です。Tailwind CSS IntelliSense - Visual Studio Marketplace
VSCodeの拡張機能。ブックマークじゃないけど便利なので共有。クラス名の補完がいい感じになります。Playground
Playground系は以下の2つ。違いはよくわからないけど、たぶん元々Tailwind.run()があって、後から公式がTaliwind Playをリリースしたと予想。
Tailwind Play
Tailwind.run()
コンポーネント、ページテンプレート
上からおすすめ順です。
HyperUI
種類が豊富だし探しやすい。Tailwind CSS Components
おそらく公式。Tailwindの作者も投稿してます。種類が多くてかなり使えます。Tail-kit
コンポーネントもページテンプレートも色々揃ってます。Meraki UI Components
比較的小さめのコンポーネントが多いです。個人的に好みなUIが多いかも。Lofi UI
コンポーネントが40個くらいまとめられています。それぞれcode.penへのリンクになっています。tailblocks
レイアウト中心。プレビューで色を変更できます。使いやすいし種類も多いしかなりおすすめ。Kometa UI Kit
埋め込んですぐにページが出来上がるような、大きなコンポーネントが多め。Component Examples - Tailwind CSS
Tailwind公式ドキュメントの中にも、いくつかテンプレートがあります。Alerts、Buttons、Cards、Forms、Grids、Navigationのサンプルです。
Collection of Tailwindcss
カードや検索ボックスなど、比較的小さいコンポーネントが多め。種類は少なめですが、サイトが綺麗で使いやすいです。Tailwind Toolbox
Pageテンプレートとコンポーネントがありますが、使うのはほとんどコンポーネントの方。他のサイトで良いコンポーネントが見つからなかった時に。Tailwind Starter Kit by Creative Tim
4種類(2020/10/13現在)のページテンプレートをHTML、Vue、React、Angular等様々な用途に合わせてダウンロードできます。実際使ったことはないですが、パパッとプロトタイプを作りたい時などに使えそうです。codepen
codepenでtailwindで検索すると、tailwindを使って作られたコンポーネントやページが色々と出てきます。
ドラッグ&ドロップでデザイン
Tailwind Builder
コメントにて教えていただきました。studioのように既存のコンポーネントをドラッグアンドドロップで配置してページを作れます。使いたいコンポーネントのHTMLをブラウザでコピーすることができるだけでなく、複数ページ作成して一括エクスポートすることもできるみたいです。エクスポートしたプロジェクトのディレクトリに移動して
npm install→npm run browsersyncとすると、ローカルサーバーを立ち上げて編集することも。これはすごい。今はβですが、TailwindUIのコンポーネントを取り込む機能もあるとのこと。
tails
最近(2020年1月)出てきたやつ。ある程度まで無料で使えます。SVG
heroicons
Tailwind CSSの作者が公開してます。web上で使いたいアイコンのSVGを簡単にコピペしたい時用。Tailwindのクラスで幅や高さ等を調整することを想定して作られているので、Tailwindとの相性抜群。zondicons
こちらもTailwindの作者が公開してます。SVGファイルのセットを一括ダウンロードできます。内容はheroiconsと同じかと思いきや、heroiconsよりアイコンの種類が豊富です。有料
Tailwind UI
Tailwind CSSの作者が公開している有料テンプレートです。$249と少し高いですがクオリティは期待できそうです。(無料でも少しだけ使えます)
Wicked Templates
記事執筆時点では数も少なく、無料のものとさほどクオリティが変わらないので微妙です。今後改良されていくかもしれないので、一応共有。その他
daisyUI
Tailwind CSSを使って、Bootstrap的なことができる。うまく使えばかなり有用そう。おまけ
Tailwindのドキュメント内に、おすすめツールの紹介ページがあるとの報告をいただいたので共有します。フリー画像素材のUnsplashなど、Tailwindに関係なく使えるサービスが多い印象です。
(Refactoring UI買いたい。)
Discussion
Tailwind Builder
https://tailwind.build/の追加もお願いします
これイカついですね。
追加します。ありがとうございます！
追加ありがとうございます！
https://tailwind.run/Tailwind.run() と言うサイトもありますよ
たびたびありがとうございます！追記しました😊
Tailwind.runとTaliwind Playの違いがよく分かっていないので、もしご存知でしたら教えていただけると嬉しいです。
機能的には変わらなそうですね
多分こちらであっていると思います。Tailwind.run()のTailwindのバージョンが古いので
Taliwind Playは、画面のリサイズで確認できるのに対して、Tailwind.runは、決まった画面サイズでの確認ができるくらいの違いですかね？
なるほど、ありがとうございます！
良いドキュメントですね！tailwindCSSは私も気に入ってるので盛り上がると良いなと思っています。とりあえずせっかくなのでtailwindCSSとJSを組み合わせたコンポーネントライブラリを紹介しておきます。
コメントありがとうございます！
Tailwindまじで良いですよね。
ライブラリのご紹介もありがとうございます。
自分の用途だとすぐに使いそうに無いですが、ハマる人にはすごくハマりそうですね。
この記事を書いてからTailwindの知見がさらに深まった感あります。
Tailwind Builderと似ているものですがこちらも是非！
https://devdojo.com/tailsコメントありがとうございます！
https://devdojo.com/tails、Tailwind Builderの下に書いていたんですが、
リンク先が
になっていたので、お送りいただいた
https://devdojo.com/tails
に修正します。
助かります🙏