🍃

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

2020/10/13に公開
14

TailwindCSSと一緒に使える便利なサービスをブックマークしていたら、いつの間にか結構な数になっていたので共有します。

ツール系

Tailwind CSS Cheat Sheet

https://nerdcave.com/tailwind-cheat-sheet
チートシート。「このスタイルTailwindでどうやって書くんだっけ?」を解決します。

CSS TAILWIND CONVERTER

https://tailwind-converter.netlify.app/
既存のCSSをTaliwindのclassに変換するツール。

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

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

上からおすすめ順です。

HyperUI

https://www.hyperui.dev/
種類が豊富だし探しやすい。

Flowbite

https://flowbite.com/
コンポーネントの種類が多くて、使いやすい。
課金すると、ページテンプレートとか、Figmaのテンプレートとかも使えるようになる。

Tailwind CSS Components

https://tailwindcomponents.com/
おそらく公式。Tailwindの作者も投稿してます。種類が多くてかなり使えます。

Tail-kit

https://www.tailwind-kit.com/
コンポーネントもページテンプレートも色々揃ってます。

Meraki UI Components

https://merakiui.com/
比較的小さめのコンポーネントが多いです。個人的に好みなUIが多いかも。

tailblocks

https://mertjf.github.io/tailblocks/
レイアウト中心。プレビューで色を変更できます。使いやすいし種類も多いしかなりおすすめ。

Kometa UI Kit

https://kitwind.io/products/kometa/components
埋め込んですぐにページが出来上がるような、大きなコンポーネントが多め。

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を使って作られたコンポーネントやページが色々と出てきます。

ドラッグ&ドロップでデザイン

Tailwind Builder

https://tailwind.build/
コメントにて教えていただきました。studioのように既存のコンポーネントをドラッグアンドドロップで配置してページを作れます。使いたいコンポーネントのHTMLをブラウザでコピーすることができるだけでなく、複数ページ作成して一括エクスポートすることもできるみたいです。
エクスポートしたプロジェクトのディレクトリに移動してnpm installnpm run browsersyncとすると、ローカルサーバーを立ち上げて編集することも。これはすごい。
今はβですが、TailwindUIのコンポーネントを取り込む機能もあるとのこと。

tails

https://devdojo.com/tails
最近(2020年1月)出てきたやつ。ある程度まで無料で使えます。

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と少し高いですがクオリティは期待できそうです。(無料でも少しだけ使えます)

Wicked Templates

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

その他

daisyUI

https://daisyui.com/
Tailwind CSSを使って、Bootstrap的なことができる。うまく使えばかなり有用そう。

おまけ

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

Discussion

シロシロ

Tailwind Builder
https://tailwind.build/
の追加もお願いします

ダン@HyperFormダン@HyperForm

たびたびありがとうございます!追記しました😊
Tailwind.runとTaliwind Playの違いがよく分かっていないので、もしご存知でしたら教えていただけると嬉しいです。

シロシロ

機能的には変わらなそうですね

たぶん元々Tailwind.run()があって、後から公式がTaliwind Playをリリースしたと予想。

多分こちらであっていると思います。Tailwind.run()のTailwindのバージョンが古いので

Taliwind Playは、画面のリサイズで確認できるのに対して、Tailwind.runは、決まった画面サイズでの確認ができるくらいの違いですかね?

imahimah

良いドキュメントですね!tailwindCSSは私も気に入ってるので盛り上がると良いなと思っています。とりあえずせっかくなのでtailwindCSSとJSを組み合わせたコンポーネントライブラリを紹介しておきます。

ダン@HyperFormダン@HyperForm

コメントありがとうございます!
Tailwindまじで良いですよね。

ライブラリのご紹介もありがとうございます。
自分の用途だとすぐに使いそうに無いですが、ハマる人にはすごくハマりそうですね。
この記事を書いてからTailwindの知見がさらに深まった感あります。

Takuma TateishiTakuma Tateishi

Lofi UIなのですが、現在アクセスすると詐欺サイトに飛ぶようになっていました。
一応リンクを記事から削除した方がいいかもしれません。