Tailwind CSS で開発する際に役に立つサイトとオススメな使い方

この記事の対象

• TailwindCSSを使ってみたい人
• TailwindCSSを使ってどうやって開発しているのか知りたい人
• TailwindCSSに関する役立つ情報を知りたい人

公式ドキュメント

言わずもがなですが公式ドキュメントは読んでおきましょう。

特に以下のLayout以下は使う前にさらっと流し目程度に見ておきましょう。

PCの人は左のスクロールバーのところです。

スマホの人は右下のメニューボタンを開いたら出てきます。

---

以下は個人的に使ってみた所感です。

公式ドキュメントの良いところ

• どういったUIになるのかが一目で分かりやすい。
• 各ページの下にカスタマイズの方法が載っているのが親切。
• ctrl+Kでの検索機能が分かりやすい。

公式ドキュメントの不便なところ

• 機能ごとのまとまりが分かりにくい。
• ページを移動しないと詳細が分からないので情報へのアクセスに時間がかかる。

次は以上のような公式ドキュメントの不便さを取り除いたものを紹介します。

チートシート

Tailwind CheatSheetというサイトです。

使い方は簡単です。
CSSでいじりたいプロパティを検索するだけです。

※余談ですが、CSSについて全く知らないよという方はまずはCSSの基本を押さえて、どんなプロパティを使うべきなのかをいろんなサイトを見ながら学ぶといいかもしれません。

すると以下の画像のように該当するプロパティに関するものだけを表示してくれます。
しかも、必要最低限のClassに実際に指定する値（text-〇〇,flex-colみたいな）だけ表示されるので開発効率が上がりまくます。

しかもDOCSを押すとドキュメントの該当ページに飛べるので、カスタマイズしたい時とか見てみるといいかもしれません。

Tailwind Components

みんなが Tailwind CSS で作ったコンポーネントを公開しているサイトです。
ちなみに、先ほどのチートシートもこのサイトのツールの中の一つです。

Tailwind CSS Components は、一般的なWebサイトにあるナビゲーションバーとかフォームとかを一から自分で作らずに、人のをパクッて自分の好みにカスタマイズできる点が非常に良いです。

試しにformsを調べてみましょう。

※ちなみに、トップページでは最近投稿されたコンポーネントや人気のコンポーネントが表示されているので、「そもそもどんなものがあるのか分からん」という方は一度見てみるのもいいかもしれません。

検索結果はこんな感じです。

実際に見てみると、レスポンシブの設定もしてあったりShow Codeを押すとコードが表示されているので、そのままコピペしていじっていくのいいですし、構造やプロパティなどを参考に自分で組み上げていくのも面白いです！

※ただ一つ注意点としては中にはコードの中にフォントを取得しているものやAlpine.jsで書かれているものなど、特定のフレームワークやライブラリで書いているものも一定数存在しているということです。

自分がよく目にしたのはAlpine.jsでしたね。x-dataとかx-○○が入っているのは基本Alpine.jsなので使わない人は消しましょう。なので、当たり前ですがコピペする際はコードをよく読んで不必要なものは削除しておきましょう。

多分、Tailwind CSSを初めて触ったり他のJavaScriptのライブラリに触れていない人は気づくのに時間がかかるかもしれませんが、使っていくうちに、これTailwind CSSとは関係ないやつやんっていうのが自然と分かるようになります(笑)。

Icons for Tailwind CSS

Icons for Tailwind CSSは Tailwind Toolboxというサイトの中にある一つの機能です。ボタンとかに使用できるアイコンをsvgで提供してくれます。

色や大きさは自由に選択できます。ただ、若干数が少ないので欲しいアイコンがない場合もあります。

このサイトは他にも役に立つ情報が結構いっぱい乗っているので気になる方はぜひ見てみてください。

※ぶっちゃけTailwind CSSってClassに指定すれば動くので、SVGのIconを提供しているところならどこでもいい気がしてきました。

CSS.gg
Heroicons

こういう普通のSVGライブラリでもいいと思いますね。

※念のためですが、Tailwind ToolboxにはTailwind関係の有益な情報がたくさんあるので優先して紹介させていただきました。また、SVGを勧めているのはサイズを変化させてもキレイに描画されるからですね。SVGサイコー。

オススメの開発手順

1. BootstrapとかMaterialUIのドキュメントのコンポーネントで実現したいコンポーネントの名前を知る。
2. Tailwind Components で1で学んだコンポーネントを検索してコピペ。
3. チートシートを使って自分好みにアレンジ！

Tooltip,Toasts,Accordion,Modalとか見たことあるけど名前知らないやつがあるので、他のUIライブラリーのドキュメントのコンポーネントを学ぶと、けっこう参考になることが多いです。

Tailwind CSS の良いところはやっぱり全部がClassで指定されているので痒い所に手が届くというか、既存のUIライブラリーでは「もっとここをこうしたいのに・・・(*´Д｀)」というのがTailwind CSSの場合は柔軟に変更できところですね。

ただ、コードが冗長になってしまったりとかすることが多いので、「本当にそのプロパティ必要？」「コンポーネント化できないかな？」という視点は常に持ち続けた方がよさそうです。

最後に

この記事を読んでTailwind CSS試してみたいと思った方、ぜひ LGTM おなしゃす！
あと最近、個人開発で初めてWebアプリケーション作ったので、その記事も近日公開しますので、機会があれば読んでやってください！