Tailwind CSSを使って、要素に色をつける方法について書いています。
テキストと背景に色をつけるときのそれぞれのクラスをまとめました。
公式のサイトの下記ページにもしっかりまとまってます。
・Text Color – Tailwind CSS
・Background Color – Tailwind CSS
Tailwind CSSを使って色をつける方法
Tailwind CSSのクラスを使って、テキストや背景に色をつける方法についてです。
それぞれのクラスの色の名前を使って、「text-[色の名前]-[数値]
」でテキストに色をつけることができます。
「bg-[色の名前]-[数値]
」で背景に色をつけることができます。
数値が大きい方が濃い色になって、少ない方が薄い色になります。
例えば、bg-red-300
とすれば、背景が薄めの赤色になります。
bg-red-900
とすると、背景が濃いめの赤色になります。
Tailwind CSSの色のクラス・数値一覧
Tailwind CSSで使える色の名前と数値の一覧です。
クラス | 数値 | プロパティ | 色 |
---|---|---|---|
slate | 50 | background-color: rgb(248 250 252) | |
slate | 100 | background-color: rgb(241 245 249) | |
slate | 200 | background-color: rgb(226 232 240) | |
slate | 300 | background-color: rgb(203 213 225) | |
slate | 400 | background-color: rgb(148 163 184) | |
slate | 500 | background-color: rgb(100 116 139) | |
slate | 600 | background-color: rgb(71 85 105) | |
slate | 700 | background-color: rgb(51 65 85) | |
slate | 800 | background-color: rgb(30 41 59) | |
slate | 900 | background-color: rgb(15 23 42) | |
slate | 950 | background-color: rgb(2 6 23) | |
gray | 50 | background-color: rgb(249 250 251) | |
gray | 100 | background-color: rgb(243 244 246) | |
gray | 200 | background-color: rgb(229 231 235) | |
gray | 300 | background-color: rgb(209 213 219) | |
gray | 400 | background-color: rgb(156 163 175) | |
gray | 500 | background-color: rgb(107 114 128) | |
gray | 600 | background-color: rgb(75 85 99) | |
gray | 700 | background-color: rgb(55 65 81) | |
gray | 800 | background-color: rgb(31 41 55) | |
gray | 900 | background-color: rgb(17 24 39) | |
gray | 950 | background-color: rgb(3 7 18) | |
zinc | 50 | background-color: rgb(250 250 250) | |
zinc | 100 | background-color: rgb(244 244 245) | |
zinc | 200 | background-color: rgb(228 228 231) | |
zinc | 300 | background-color: rgb(212 212 216) | |
zinc | 400 | background-color: rgb(161 161 170) | |
zinc | 500 | background-color: rgb(113 113 122) | |
zinc | 600 | background-color: rgb(82 82 91) | |
zinc | 700 | background-color: rgb(63 63 70) | |
zinc | 800 | background-color: rgb(39 39 42) | |
zinc | 900 | background-color: rgb(24 24 27) | |
zinc | 950 | background-color: rgb(9 9 11) | |
neutral | 50 | background-color: rgb(250 250 250) | |
neutral | 100 | background-color: rgb(245 245 245) | |
neutral | 200 | background-color: rgb(229 229 229) | |
neutral | 300 | background-color: rgb(212 212 212) | |
neutral | 400 | background-color: rgb(163 163 163) | |
neutral | 500 | background-color: rgb(115 115 115) | |
neutral | 600 | background-color: rgb(82 82 82) | |
neutral | 700 | background-color: rgb(64 64 64) | |
neutral | 800 | background-color: rgb(38 38 38) | |
neutral | 900 | background-color: rgb(23 23 23) | |
neutral | 950 | background-color: rgb(10 10 10) | |
stone | 50 | background-color: rgb(250 250 249) | |
stone | 100 | background-color: rgb(245 245 244) | |
stone | 200 | background-color: rgb(231 229 228) | |
stone | 300 | background-color: rgb(214 211 209) | |
stone | 400 | background-color: rgb(168 162 158) | |
stone | 500 | background-color: rgb(120 113 108) | |
stone | 600 | background-color: rgb(87 83 78) | |
stone | 700 | background-color: rgb(68 64 60) | |
stone | 800 | background-color: rgb(41 37 36) | |
stone | 900 | background-color: rgb(28 25 23) | |
stone | 950 | background-color: rgb(12 10 9) | |
red | 50 | background-color: rgb(254 242 242) | |
red | 100 | background-color: rgb(254 226 226) | |
red | 200 | background-color: rgb(254 202 202) | |
red | 300 | background-color: rgb(252 165 165) | |
red | 400 | background-color: rgb(248 113 113) | |
red | 500 | background-color: rgb(239 68 68) | |
red | 600 | background-color: rgb(220 38 38) | |
red | 700 | background-color: rgb(185 28 28) | |
red | 800 | background-color: rgb(153 27 27) | |
red | 900 | background-color: rgb(127 29 29) | |
red | 950 | background-color: rgb(69 10 10) | |
orange | 50 | background-color: rgb(255 247 237) | |
orange | 100 | background-color: rgb(255 237 213) | |
orange | 200 | background-color: rgb(254 215 170) | |
orange | 300 | background-color: rgb(253 186 116) | |
orange | 400 | background-color: rgb(251 146 60) | |
orange | 500 | background-color: rgb(249 115 22) | |
orange | 600 | background-color: rgb(234 88 12) | |
orange | 700 | background-color: rgb(194 65 12) | |
orange | 800 | background-color: rgb(154 52 18) | |
orange | 900 | background-color: rgb(124 45 18) | |
orange | 950 | background-color: rgb(67 20 7) | |
amber | 50 | background-color: rgb(255 251 235) | |
amber | 100 | background-color: rgb(254 243 199) | |
amber | 200 | background-color: rgb(253 230 138) | |
amber | 300 | background-color: rgb(252 211 77) | |
amber | 400 | background-color: rgb(251 191 36) | |
amber | 500 | background-color: rgb(245 158 11) | |
amber | 600 | background-color: rgb(217 119 6) | |
amber | 700 | background-color: rgb(180 83 9) | |
amber | 800 | background-color: rgb(146 64 14) | |
amber | 900 | background-color: rgb(120 53 15) | |
amber | 950 | background-color: rgb(69 26 3) | |
yellow | 50 | background-color: rgb(254 252 232) | |
yellow | 100 | background-color: rgb(254 249 195) | |
yellow | 200 | background-color: rgb(254 240 138) | |
yellow | 300 | background-color: rgb(253 224 71) | |
yellow | 400 | background-color: rgb(250 204 21) | |
yellow | 500 | background-color: rgb(234 179 8) | |
yellow | 600 | background-color: rgb(202 138 4) | |
yellow | 700 | background-color: rgb(161 98 7) | |
yellow | 800 | background-color: rgb(133 77 14) | |
yellow | 900 | background-color: rgb(113 63 18) | |
yellow | 950 | background-color: rgb(66 32 6) | |
lime | 50 | background-color: rgb(247 254 231) | |
lime | 100 | background-color: rgb(236 252 203) | |
lime | 200 | background-color: rgb(217 249 157) | |
lime | 300 | background-color: rgb(190 242 100) | |
lime | 400 | background-color: rgb(163 230 53) | |
lime | 500 | background-color: rgb(132 204 22) | |
lime | 600 | background-color: rgb(101 163 13) | |
lime | 700 | background-color: rgb(77 124 15) | |
lime | 800 | background-color: rgb(63 98 18) | |
lime | 900 | background-color: rgb(54 83 20) | |
lime | 950 | background-color: rgb(26 46 5) | |
green | 50 | background-color: rgb(240 253 244) | |
green | 100 | background-color: rgb(220 252 231) | |
green | 200 | background-color: rgb(187 247 208) | |
green | 300 | background-color: rgb(134 239 172) | |
green | 400 | background-color: rgb(74 222 128) | |
green | 500 | background-color: rgb(34 197 94) | |
green | 600 | background-color: rgb(22 163 74) | |
green | 700 | background-color: rgb(21 128 61) | |
green | 800 | background-color: rgb(22 101 52) | |
green | 900 | background-color: rgb(20 83 45) | |
green | 950 | background-color: rgb(5 46 22) | |
emerald | 50 | background-color: rgb(236 253 245) | |
emerald | 100 | background-color: rgb(209 250 229) | |
emerald | 200 | background-color: rgb(167 243 208) | |
emerald | 300 | background-color: rgb(110 231 183) | |
emerald | 400 | background-color: rgb(52 211 153) | |
emerald | 500 | background-color: rgb(16 185 129) | |
emerald | 600 | background-color: rgb(5 150 105) | |
emerald | 700 | background-color: rgb(4 120 87) | |
emerald | 800 | background-color: rgb(6 95 70) | |
emerald | 900 | background-color: rgb(6 78 59) | |
emerald | 950 | background-color: rgb(2 44 34) | |
teal | 50 | background-color: rgb(240 253 250) | |
teal | 100 | background-color: rgb(204 251 241) | |
teal | 200 | background-color: rgb(153 246 228) | |
teal | 300 | background-color: rgb(94 234 212) | |
teal | 400 | background-color: rgb(45 212 191) | |
teal | 500 | background-color: rgb(20 184 166) | |
teal | 600 | background-color: rgb(13 148 136) | |
teal | 700 | background-color: rgb(15 118 110) | |
teal | 800 | background-color: rgb(17 94 89) | |
teal | 900 | background-color: rgb(19 78 74) | |
teal | 950 | background-color: rgb(4 47 46) | |
cyan | 50 | background-color: rgb(236 254 255) | |
cyan | 100 | background-color: rgb(207 250 254) | |
cyan | 200 | background-color: rgb(165 243 252) | |
cyan | 300 | background-color: rgb(103 232 249) | |
cyan | 400 | background-color: rgb(34 211 238) | |
cyan | 500 | background-color: rgb(6 182 212) | |
cyan | 600 | background-color: rgb(8 145 178) | |
cyan | 700 | background-color: rgb(14 116 144) | |
cyan | 800 | background-color: rgb(21 94 117) | |
cyan | 900 | background-color: rgb(22 78 99) | |
cyan | 950 | background-color: rgb(8 51 68) | |
sky | 50 | background-color: rgb(240 249 255) | |
sky | 100 | background-color: rgb(224 242 254) | |
sky | 200 | background-color: rgb(186 230 253) | |
sky | 300 | background-color: rgb(125 211 252) | |
sky | 400 | background-color: rgb(56 189 248) | |
sky | 500 | background-color: rgb(14 165 233) | |
sky | 600 | background-color: rgb(2 132 199) | |
sky | 700 | background-color: rgb(3 105 161) | |
sky | 800 | background-color: rgb(7 89 133) | |
sky | 900 | background-color: rgb(12 74 110) | |
sky | 950 | background-color: rgb(8 47 73) | |
blue | 50 | background-color: rgb(239 246 255) | |
blue | 100 | background-color: rgb(219 234 254) | |
blue | 200 | background-color: rgb(191 219 254) | |
blue | 300 | background-color: rgb(147 197 253) | |
blue | 400 | background-color: rgb(96 165 250) | |
blue | 500 | background-color: rgb(59 130 246) | |
blue | 600 | background-color: rgb(37 99 235) | |
blue | 700 | background-color: rgb(29 78 216) | |
blue | 800 | background-color: rgb(30 64 175) | |
blue | 900 | background-color: rgb(30 58 138) | |
blue | 950 | background-color: rgb(23 37 84) | |
indigo | 50 | background-color: rgb(238 242 255) | |
indigo | 100 | background-color: rgb(224 231 255) | |
indigo | 200 | background-color: rgb(199 210 254) | |
indigo | 300 | background-color: rgb(165 180 252) | |
indigo | 400 | background-color: rgb(129 140 248) | |
indigo | 500 | background-color: rgb(99 102 241) | |
indigo | 600 | background-color: rgb(79 70 229) | |
indigo | 700 | background-color: rgb(67 56 202) | |
indigo | 800 | background-color: rgb(55 48 163) | |
indigo | 900 | background-color: rgb(49 46 129) | |
indigo | 950 | background-color: rgb(30 27 75) | |
violet | 50 | background-color: rgb(245 243 255) | |
violet | 100 | background-color: rgb(237 233 254) | |
violet | 200 | background-color: rgb(221 214 254) | |
violet | 300 | background-color: rgb(196 181 253) | |
violet | 400 | background-color: rgb(167 139 250) | |
violet | 500 | background-color: rgb(139 92 246) | |
violet | 600 | background-color: rgb(124 58 237) | |
violet | 700 | background-color: rgb(109 40 217) | |
violet | 800 | background-color: rgb(91 33 182) | |
violet | 900 | background-color: rgb(76 29 149) | |
violet | 950 | background-color: rgb(46 16 101) | |
purple | 50 | background-color: rgb(250 245 255) | |
purple | 100 | background-color: rgb(243 232 255) | |
purple | 200 | background-color: rgb(233 213 255) | |
purple | 300 | background-color: rgb(216 180 254) | |
purple | 400 | background-color: rgb(192 132 252) | |
purple | 500 | background-color: rgb(168 85 247) | |
purple | 600 | background-color: rgb(147 51 234) | |
purple | 700 | background-color: rgb(126 34 206) | |
purple | 800 | background-color: rgb(107 33 168) | |
purple | 900 | background-color: rgb(88 28 135) | |
purple | 950 | background-color: rgb(59 7 100) | |
fuchsia | 50 | background-color: rgb(253 244 255) | |
fuchsia | 100 | background-color: rgb(250 232 255) | |
fuchsia | 200 | background-color: rgb(245 208 254) | |
fuchsia | 300 | background-color: rgb(240 171 252) | |
fuchsia | 400 | background-color: rgb(232 121 249) | |
fuchsia | 500 | background-color: rgb(217 70 239) | |
fuchsia | 600 | background-color: rgb(192 38 211) | |
fuchsia | 700 | background-color: rgb(162 28 175) | |
fuchsia | 800 | background-color: rgb(134 25 143) | |
fuchsia | 900 | background-color: rgb(112 26 117) | |
fuchsia | 950 | background-color: rgb(74 4 78) | |
pink | 50 | background-color: rgb(253 242 248) | |
pink | 100 | background-color: rgb(252 231 243) | |
pink | 200 | background-color: rgb(251 207 232) | |
pink | 300 | background-color: rgb(249 168 212) | |
pink | 400 | background-color: rgb(244 114 182) | |
pink | 500 | background-color: rgb(236 72 153) | |
pink | 600 | background-color: rgb(219 39 119) | |
pink | 700 | background-color: rgb(190 24 93) | |
pink | 800 | background-color: rgb(157 23 77) | |
pink | 900 | background-color: rgb(131 24 67) | |
pink | 950 | background-color: rgb(80 7 36) | |
rose | 50 | background-color: rgb(255 241 242) | |
rose | 100 | background-color: rgb(255 228 230) | |
rose | 200 | background-color: rgb(254 205 211) | |
rose | 300 | background-color: rgb(253 164 175) | |
rose | 400 | background-color: rgb(251 113 133) | |
rose | 500 | background-color: rgb(244 63 94) | |
rose | 600 | background-color: rgb(225 29 72) | |
rose | 700 | background-color: rgb(190 18 60) | |
rose | 800 | background-color: rgb(159 18 57) | |
rose | 900 | background-color: rgb(136 19 55) | |
rose | 950 | background-color: rgb(76 5 25) |
テキスト(文字列)に色をつける
text-[色の名前]-[数値]
でテキストに色をつけれます。
3つほど試してみます。
緑(green)を指定する
text-green-[数値]
で緑色になります。
下記が使用したHTML全文です。(次項から省略します)
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<script src="https://cdn.tailwindcss.com"></script>
<title>text color test</title>
</head>
<body>
<p class="text-green-500">文字に色をつけるテスト</p>
</body>
</html>
bodyタグのpタグのクラスにtext-green-500
をつけることで、緑色にしています。
確認すると、下記のように表示されました。
空色(sky)を指定する
<p class="text-sky-500">文字に色をつけるテスト</p>
bodyタグのpタグのクラスにtext-sky-500
をつけることで、空色にしています。
確認すると、下記のように表示されました。
ピンク色(pink)を指定する
<p class="text-pink-500">文字に色をつけるテスト</p>
bodyタグのpタグのクラスにtext-pink-500
をつけることで、ピンク色にしています。
確認すると、下記のように表示されました。
背景に色をつける
bg-[色の名前]-[数値]
でテキストに色をつけれます。
3つほど試してみます。
黄色(yellow)を指定する
<div class="bg-yellow-500">背景に色をつけるテスト</div>
divタグのクラスにbg-yellow-500
をつけることで、背景を黄色にしています。
確認すると、下記のように表示されました。
青色(blue)を指定する
<div class="bg-blue-500">背景に色をつけるテスト</div>
divタグのクラスにbg-blue-500
をつけることで、背景を青色にしています。
確認すると、下記のように表示されました。
紫色(purple)を指定する
<div class="bg-purple-500">背景に色をつけるテスト</div>
divタグのクラスにbg-purple-500
をつけることで、背景を紫色にしています。
確認すると、下記のように表示されました。
終わりに
Tailwind CSSでテキストや背景に色をつける方法について書きました。
[text or bg]-[色名]-[数値]
でテキストや背景に色をつけることができました。
数値を変えることで、色の濃さも簡単に調整できて便利ですね。
コメント