TailwindCSSと一緒に使える便利なサービスをブックマークしていたら、いつの間にか結構な数になっていたので共有します。
ツール系
Tailwind CSS Cheat Sheet
https://nerdcave.com/tailwind-cheat-sheet
チートシート。「このスタイルTailwindでどうやって書くんだっけ?」を解決します。
Tailwind Ink | AI color palette generator for Tailwindcss
https://tailwind.ink/
Tailwindに用意されている色のカラーコード一覧です。
Tailwind CSS IntelliSense - Visual Studio Marketplace
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
VSCodeの拡張機能。ブックマークじゃないけど便利なので共有。クラス名の補完がいい感じになります。
Playground
Playground系は以下の2つ。違いはよくわからないけど、たぶん元々Tailwind.run()があって、後から公式がTaliwind Playをリリースしたと予想。
Tailwind Play
Tailwind.run()
コンポーネント、ページテンプレート
上からおすすめ順です。
Tailwind CSS Components
https://tailwindcomponents.com/
おそらく公式。Tailwindの作者も投稿してます。種類が多くてかなり使えます。
tailblocks
https://mertjf.github.io/tailblocks/
レイアウト中心。プレビューで色を変更できます。使いやすいし種類も多いしかなりおすすめ。
Component Examples - Tailwind CSS
https://tailwindcss.com/components/
Tailwind公式ドキュメントの中にも、いくつかテンプレートがあります。
Alerts、Buttons、Cards、Forms、Grids、Navigationのサンプルです。
Collection of Tailwindcss
https://tailwindtemplates.io/
カードや検索ボックスなど、比較的小さいコンポーネントが多め。種類は少なめですが、サイトが綺麗で使いやすいです。
Tailwind Toolbox
https://www.tailwindtoolbox.com/
Pageテンプレートとコンポーネントがありますが、使うのはほとんどコンポーネントの方。他のサイトで良いコンポーネントが見つからなかった時に。
Tailwind Starter Kit by Creative Tim
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/presentation
4種類(2020/10/13現在)のページテンプレートをHTML、Vue、React、Angular等様々な用途に合わせてダウンロードできます。実際使ったことはないですが、パパッとプロトタイプを作りたい時などに使えそうです。
codepen
https://codepen.io/search/pens?q=tailwind
codepenでtailwindで検索すると、tailwindを使って作られたコンポーネントやページが色々と出てきます。
SVG
heroicons
https://heroicons.dev/
Tailwind CSSの作者が公開してます。web上で使いたいアイコンのSVGを簡単にコピペしたい時用。Tailwindのクラスで幅や高さ等を調整することを想定して作られているので、Tailwindとの相性抜群。
zondicons
http://www.zondicons.com/
こちらもTailwindの作者が公開してます。SVGファイルのセットを一括ダウンロードできます。内容はheroiconsと同じかと思いきや、heroiconsよりアイコンの種類が豊富です。
有料
Tailwind UI
https://tailwindui.com/components
Tailwind CSSの作者が公開している有料テンプレートです。
$249と少し高いですがクオリティは期待できそうです。(無料でも少しだけ使えます)
Tailwind Builder
https://tailwind.build/
コメントにて教えていただきました。studioのように既存のコンポーネントをドラッグアンドドロップで配置してページを作れます。使いたいコンポーネントのHTMLをブラウザでコピーすることができるだけでなく、複数ページ作成して一括エクスポートすることもできるみたいです。
エクスポートしたプロジェクトのディレクトリに移動してnpm install→npm run browsersyncとすると、ローカルサーバーを立ち上げて編集することも。これはすごい。
今はβですが、TailwindUIのコンポーネントを取り込む機能もあるとのこと。
Wicked Templates
https://www.wickedtemplates.com/tailwind-templates
記事執筆時点では数も少なく、無料のものとさほどクオリティが変わらないので微妙です。今後改良されていくかもしれないので、一応共有。
おまけ
https://tailwindcss.com/resources
Tailwindのドキュメント内に、おすすめツールの紹介ページがあるとの報告をいただいたので共有します。
フリー画像素材のUnsplashなど、Tailwindに関係なく使えるサービスが多い印象です。
(Refactoring UI買いたい。)