ブックマークしているTailwind関連のサービスを共有します

公開:2020/10/13
更新:2020/10/15
3 min読了の目安(約2700字IDEAアイデア記事
Discuss8Likes41

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

https://play.tailwindcss.com/

Tailwind.run()

https://tailwind.run/new

コンポーネント、ページテンプレート

上からおすすめ順です。

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 installnpm run browsersyncとすると、ローカルサーバーを立ち上げて編集することも。これはすごい。
今はβですが、TailwindUIのコンポーネントを取り込む機能もあるとのこと。

Wicked Templates

https://www.wickedtemplates.com/tailwind-templates
記事執筆時点では数も少なく、無料のものとさほどクオリティが変わらないので微妙です。今後改良されていくかもしれないので、一応共有。

おまけ

https://tailwindcss.com/resources
Tailwindのドキュメント内に、おすすめツールの紹介ページがあるとの報告をいただいたので共有します。
フリー画像素材のUnsplashなど、Tailwindに関係なく使えるサービスが多い印象です。
(Refactoring UI買いたい。)