これがあればよかった！Tailwind CSSリソース

背景ストーリー

今週、Tailwind CSSを見てみることにして、シンプルなeコマースウェブサイトを作ってみました。まず気づいたのは、ドキュメントの書き方が本当によかったってことです。Tailwindが初めてのCSSフレームワークでも、色々なセクションをすんなりと見れるようになっています😉。例えばナビゲーションのエリアは、動画チュートリアルをいくつかアップして、ナビをラクに作れるようにしてくれてるんです。すべてのセクションには、コードの断片と対話型のウィジェットがあり、UIコンポーネントが異なる画面サイズでどのように見えるかを見せてくれます。さらに、カスタマイズセクションでは、特定のrems、colors、font-size、insets などのカスタムスタイルをどう適用するかを示しています。このドキュメントのおかげで、コードを速く書けるようになりました。一番いいのは、このフレームワークが限定しないことです。人々は、あなたがウェブサイトをゼロから作ったのかどうか、Tailwindフレームワークを使ったのかどうかが分からない。デザインや実装されたユーティリティクラスに応じて、どのサイトにも独自の特徴があります。
さらに、Tailwindはモバイルファーストのブレイクポイントシステムを使用していて、max-widthの代わりにmin-widthだけを使用します。小さいブレイクポイントで追加したクラスは、大きなブレイクポイントでも使用されます。最初はmax-widthを常用していたので慣れるのに時間がかかりましたが、今ではとても気に入っています。
HTMLファイルをキレイで整理された状態にするのに役立つ最も便利な方法は、@applyメソッドの使用です。HTMLファイル全体にユーティリティクラスを散らばらせる代わりに、それらをstyle.cssファイルで使用しました。SASSのmixinを使用するみたいなものです。

PS: Tailwind CSSを始める前に、まずHtmlとCSSを理解していることを確認してください。そうすれば、ユーティリティクラスの使い方や適用方法に混乱しないで済むからです。ドキュメントを通じて学ぶのがあまり好きでなく、もっと視覚的な人なら、Net NinjaのTailwind CSSクラッシュコースをお勧めします。Shaunが、Tailwindを使ってゼロからシンプルなウェブサイトを作る方法を教えてくれます。（彼のYouTubeチャンネルの大ファンで、彼のコンテンツが無料だなんて信じられない。🤗）

Tailwind Cssリソース

学んでいた際に便利だったリソースをいくつかリストします。あなたのリストに追加したり、すでに使っていれば使い続けていただければと思います。

1) TailwindInk

これは、ブランドカラーを選ぶときに補色を提供してくれるカラージェネレーターのウェブサイトです。色コードを簡単にコピーして、tailwind config jsファイルに追加できます。

こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/tracycss/tailwind-css-resources-you-wish-you-had-3i18