【CSS】tailwind.cssの色の指定方法を抑えよう
こんにちは!一番タイピングしやすい色は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は似た色大量にあるし、一度使った色とかはメモっておくと後が楽だよ!使ってみてね。
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介