こんにちは！一番タイピングしやすい色はorangeだと思うMizutani(@sirycity)です。(マークアップの時確認で一時的に色付けたりするよね？自分だけ？)

Webデザインに使う色、ある程度最初から絞られてた方がスムーズにいくなー😛最近はtailwindの色だけ使うようにしてる。 #css #tailwindcss

— Mizutani@フロントエンドエンジニア (@sirycity) June 9, 2020

今日はtailwind.cssの色を扱う際の気をつけるポイントみたいなのをざっと書きます。

超基本の文字と背景とボーダー

• text-[色]-[番号] で文字の色
• bg-[色]-[番号] で背景の色
• border--[色]-[番号] でボーダーの色

基本はこのようなクラス名を指定すればokです。例えば赤文字は text-red-500 とか。青い背景は bg-blue-500 とか。

tailwindはクラス名が色を表します。赤ならred。超シンプル。

他のCSSフレームワークとかだとクラス名が用途を表すものが多いです。successだと成功だから緑とか。errorだとエラーだから赤とか。

個人的にはtailwindの方がわかりやすいし、ちょっと明度落としたりとかしやすいので大好き。

後ろの番号について

番号は100から900の9種類です。これはどの色もいっしょ。また、

数字が小さいほど明るく大きいほど暗いです。分かりやすく言うと、大きいほど濃くなる(厳密には違うけど)。

カラーコードだと大きいほど明るくなるので逆です。注意。まあ逆にしてもすぐ気づくけど。

一例として、 gray-100 はほぼ白、 gray-900 はほぼ黒です。この2つを全体の背景と文字色にしてもいいかもね。

色の種類について

基本的な色は全部ある。赤(red)とか青(blue)とか。ただ主要な色だとこの2つがない。

• 茶色
• 赤紫

逆にマイナーだけどある(日本人的に見慣れないだけ？)のはこの2つ。覚えよう！

• teal(ティール)は青と緑の中間っぽい色、tailwindのロゴっぽい色。
• indigo(インディゴ)は青と紫の中間っぽい色、今このブログBenQのモニターで見てる人いたらBenQのロゴみたいな色。

白黒灰色について

白と黒は番号がない。text-whiteはok。text-white-300とかはダメ。白と黒はほんっっとに真っ白と真っ黒だから、まあまず使わない。gray-100と gray-900使おう。

grayは G R A Y しかダメ。 G R E Y はダメ。

透明度

背景は半透明にできる。背景しかできないし、背景もできるのはバージョン1.4以降。

bg-opacity-[番号] を bg-[色]-[番号]と併せて付けよう。こんな感じ。

<div class='bg-blue-500 bg-opacity-50'>
  僕は半透明の青色だよ！
</div>

opacityの数字は5種類。 0 25 50 75 100。これはCSSのopacityと一緒だから覚えやすいね。

さいごに

簡単すぎてつまづきポイント探すのに苦労した。

tailwindは似た色大量にあるし、一度使った色とかはメモっておくと後が楽だよ！使ってみてね。