ブックマークしている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()
コンポーネント、ページテンプレート
上からおすすめ順です。
Tailwind CSS Components
おそらく公式。Tailwindの作者も投稿してます。種類が多くてかなり使えます。tailblocks
レイアウト中心。プレビューで色を変更できます。使いやすいし種類も多いしかなりおすすめ。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
記事執筆時点では数も少なく、無料のものとさほどクオリティが変わらないので微妙です。今後改良されていくかもしれないので、一応共有。おまけ
Tailwindのドキュメント内に、おすすめツールの紹介ページがあるとの報告をいただいたので共有します。フリー画像素材のUnsplashなど、Tailwindに関係なく使えるサービスが多い印象です。
(Refactoring UI買いたい。)