Tailwind初心者あるある #CSS

みなさんこんにちは、お久しぶりの @yuuki-h です！
今回はたまたま昔の自分のコードを眺めるきっかけがあり、
「うわ、Tailwind使い慣れてないやん、、、」と思った３つの初心者あるあるを
恥ずかしながら、掲載します！

TL;DR

初めてTailwindを使うと、なぜか公式ドキュメントを見ずにググったりGPTに聞いたりしてしまうことってありますよね。
ただ、それって 「公式が有能なことを知らないだけ」 だと思うんです。
（その上、Tailwindのドキュメントは英語で書かれているのでスルーしやすい気もします）

しかし、Tailwindのドキュメントは英語がほぼ読めなくても
ぱっと見で伝わるので、これを機にDocsを読んでいただきたいです！

例えば、CSSのborder-styleであれば、こんな感じです。

ぱっと見、CSSのプロパティと一致するクラス名がわかるので
これを適用するだけです！
「英語のドキュメント、、、」と思うと読みたくなくなりますが
純粋にCSSが書いてあるだけと思えば、読める気がしてきませんか？

Tailwindを使う際、どのクラスを使えば良いか分からないことって結構ありますが、これはCSSのプロパティに慣れていない人や、TailwindとCSSのプロパティ名が若干異なることが原因です。

CSSのプロパティに不慣れな人がTailwindを使うと、どのクラスを選べば良いか戸惑うことがあります。これは悲しいことにCSSの知識不足、、、なので、検索してどんなプロパティが該当するのか見るのが正解です。

検索キーワード例：「CSS 要素　中央寄せ」など
CSSの記事はたくさんあるので、体系的に勉強するよりも時間を優先すべき場合は
上記のキーワードのような形で 「CSS 対象　やりたいこと」 と検索すれば大抵のことは解決します！（ChatGPTでもOKです）

これは、TailwindがCSSのプロパティ名をショートカットしたクラスを提供していることが原因です。しかし、これもTailwind公式でなんとかなります。

例えば、CSSのmediaってTailwindではどう実装するか知りたい場合、
公式ドキュメントの検索バーで以下のように入れます。

すると、いかにも関連がありそうなページが表示されます。
この中で確認すれば、おおよそ当たります！

個人的に、自分のコードではこれが一番多かった気がします。
TailwindではArbitrary values（任意の値）を使ってスタイリングすることができますが、使いすぎると可読性が損なわれることがあります。

ただ、Tailwindに元々用意されてるなら、使わない方がわかりやすいです。

Tailwindは基本的なスタイルが予め用意されていて、Arbitrary valuesを使う前に、公式のスタイルを利用することで、Tailwindに慣れている人やデザイナーの方などとのコミュニケーションがスムーズになりますし、実装も共通化されるので可読性も上がります。

自分のコードでよく見受けられたのは以下の感じでした。
例：w-[100%]→w-full , m-[0] →m-0 , py-[8px] →py-2
これもドキュメントを見ればよくわかります！

Tailwindは4 point grid systemを採用しています。このシステムを理解し、適切に利用することで、一貫性のあるデザインを構築できます。また、この思想は見栄えなどをよくする効果があります。
具体的には、以下の記事を読むとわかりやすいと思います！

プロジェクトで頻繁に使用するカラーやフォント、サイズなどは、Tailwindのconfigファイルに追加しておくと、一貫性を保ちやすくなります。Arbitrary valuesよりもconfigの活用を検討してみましょう！

以上がTailwind初心者あるあるでした！
このポイントを実践するだけでTailwind初心者は脱することができるのではないかと思います！
お疲れ様でした〜