Setting background colours by Tailwind background utility lessons
For controlling the background shade of net web page components, you could use the background utility lessons of Tailwind. These lessons:
- Begin with the prefix bg
- That is adopted by a splash (–)
- Then use the shade identify and its quantity
For instance:
bg-gray-50
bg-gray-500
bg-zinc-50
bg-zinc-950
bg-neutral-50
bg-neutral-950
bg-red-50
bg-red-950
bg-orange-50
bg-orange-950
and so forth.
See the entire checklist on the official web site:
https://tailwindcss.com/docs/background-color
The examples under present utilizing background shade lessons in varied HTML components.
Within the first instance of demonstrating utilization of Tailwind background shade lessons, we’ll use these in controlling the button colours.
For that, we’ve got created six buttons the place we set the Tailwind width, padding, and background colours of the buttons.
See on-line demo and code
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script> </head>
<physique>
<h1 class=“text-cyan-700 text-xl mx-10 mt-10 font-bold “>
Tailwind background shade demo
</h1>
<div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs”>
<p class=“mb-10”>
<button class=“bg-orange-400 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
bg-orange-400
</button>
</p>
<p class=“mb-10”>
<button class=“bg-amber-100 text-black py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
bg-amber-100
</button>
</p>
<p class=“mb-10”>
<button class=“bg-lime-500 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
bg-lime-500
</button>
</p>
<p class=“mb-10”>
<button class=“bg-sky-600 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
bg-sky-600
</button>
</p>
<p class=“mb-10”>
<button class=“bg-red-500 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
bg-red-500
</button>
</p>
</div>
</physique> </html> |
Output:
Utilizing background shade in a desk instance
Within the demo under, we used background shade within the HTML desk. Once more, we styled the desk by different tailwind lessons and in addition used background shade for the desk head and knowledge as proven under:
See on-line demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique>
<h1 class=“text-cyan-700 text-lg mx-10 “>
Tailwind background shade – Desk
</h1>
<div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<desk class=“border-collapse border border-slate-400 “>
<thead>
<tr class=“bg-green-600 text-white”>
<th class=“border border-yellow-300 px-10”>Identify</th>
<th class=“border border-yellow-300 px-10”>Age</th>
<th class=“border border-yellow-300 px-10”>Wage</th>
</tr>
</thead>
<tbody>
<tr class=“bg-green-100 text-center “>
<td class=“border border-yellow-300 “>Jim</td>
<td class=“border border-yellow-300 “>35</td>
<td class=“border border-yellow-300 “>$5000.00</td>
</tr>
<tr class=“bg-green-100 text-center “>
<td class=“border border-yellow-300 “>Anna</td>
<td class=“border border-yellow-300 “>24</td>
<td class=“border border-yellow-300 “>$3500.00</td>
</tr>
<tr class=“bg-green-100 text-center “>
<td class=“border border-yellow-300 “>Adams</td>
<td class=“border border-yellow-300 “>31</td>
<td class=“border border-yellow-300 “>$4000.00</td>
</tr>
</tbody>
</desk>
</div>
</div>
</physique>
</html> |
Utilizing background shade in paragraph instance
Now we’re utilizing background shade and different lessons within the paragraphs.
5 paragraphs are created the place we utilized completely different bg colours, margins, width, textual content colours and alignments as follows:
See on-line demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique>
<h1 class=“text-red-700 text-xl mx-20 font-bold “>
Tailwind bg shade – Paragraph
</h1>
<div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs w-96”>
<p class=“mb-5 h-10 w-40 bg-red-400 text-orange-100 text-center”>bg-red-400</p>
<p class=“mb-5 h-10 w-60 bg-orange-500 text-orange-100 text-center”>bg-orange-500</p>
<p class=“mb-5 h-10 w-[16rem] bg-amber-800 text-white text-center”>bg-amber-800</p>
<p class=“mb-5 h-10 w-90 bg-green-500 text-orange-100 text-center”>bg-green-500</p>
<p class=“mb-5 h-10 w-[27rem] bg-teal-300 text-black-100 text-center”>bg-teal-300</p>
</div>
</physique> </html> |
Tailwind has the power to use completely different utility lessons in varied states together with hover.
For that, you could use the variant modifiers. For instance, you could use the next for making use of the background shade on the hover state to a component like button:
hover:bg-orange-600
See the instance under the place we prolonged the above button instance and added lessons for the hover state.
After opening the demo web page, convey the mouse over any button to see how the background shade adjustments.
See on-line demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique>
<h1 class=“text-cyan-700 text-xl mx-10 mt-10 font-bold “>
Tailwind background shade: Hover State
</h1>
<div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs”>
<p class=“mb-10”>
<button class=“bg-orange-400 hover:bg-orange-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
hover:bg-orange-800
</button>
</p>
<p class=“mb-10”>
<button class=“bg-amber-400 hover:bg-amber-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
hover:bg-amber-800
</button>
</p>
<p class=“mb-10”>
<button class=“bg-lime-500 hover:bg-lime-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
hover:bg-lime-800
</button>
</p>
<p class=“mb-10”>
<button class=“bg-sky-600 hover:bg-sky-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
hover:bg-sky-800
</button>
</p>
<p class=“mb-10”>
<button class=“bg-red-500 hover:bg-red-800 text-white py-2 px-6 w-50 rounded focus:shadow-outline” kind=“button”>
hover:bg-red-800
</button>
</p>
</div>
</physique> </html> |
Hover state instance in a desk
Within the instance under, we used completely different background colours within the hover state of the desk. As you convey the mouse over the desk header or desk knowledge (th and td), the background and textual content shade change.
Click on on the demo hyperlink to take a look your self:
See on-line demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script> </head>
<physique>
<h1 class=“text-cyan-700 text-lg mx-10 “>
Tailwind background shade – Desk Hover
</h1>
<div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<desk class=“border-collapse border border-slate-400 “>
<thead>
<tr class=“bg-teal-600 hover:bg-sky-500 text-white”>
<th class=“border border-yellow-300 px-10”>Identify</th>
<th class=“border border-yellow-300 px-10”>Age</th>
<th class=“border border-yellow-300 px-10”>Wage</th>
</tr>
</thead>
<tbody>
<tr class=“bg-green-100 hover:bg-orange-800 text-center hover:text-white “>
<td class=“border border-yellow-300 “>Jim</td>
<td class=“border border-yellow-300 “>35</td>
<td class=“border border-yellow-300 “>$5000.00</td>
</tr>
<tr class=“bg-green-100 hover:bg-orange-800 text-center hover:text-white”>
<td class=“border border-yellow-300 “>Anna</td>
<td class=“border border-yellow-300 “>24</td>
<td class=“border border-yellow-300 “>$3500.00</td>
</tr>
<tr class=“bg-green-100 hover:bg-orange-800 text-center hover:text-white”>
<td class=“border border-yellow-300 “>Adams</td>
<td class=“border border-yellow-300 “>31</td>
<td class=“border border-yellow-300 “>$4000.00</td>
</tr>
</tbody>
</desk>
</div>
</div>
</physique>
</html> |
The way to use a customized background shade in Tailwind
In conditions the place it is advisable to use another shade than out there within the Tailwind pre-defined lessons whereas nonetheless utilizing Tailwind – you are able to do this as follows.
An instance of utilizing arbitrary worth:
<p class=”bg-[#408080]”>
So, you should utilize sq. brackets to generate the worth on the fly.
See an instance under we use this within the paragraph’s background colours:
See on-line demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique>
<h1 class=“text-red-700 text-xl mx-20 font-bold “>
Tailwind bg shade – Arbitrary
</h1>
<div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs w-96”>
<p class=“bg-[#408080] mb-5 h-10 w-40 text-orange-100 text-center”>bg-[#408080]</p>
<p class=“bg-[#800000] mb-5 h-10 w-60 text-orange-100 text-center”>bg-[#800000] </p>
<p class=“bg-[#CC6600] mb-5 h-10 w-[16rem] text-white text-center”>bg-[#CC6600]</p>
<p class=“bg-[#00B700] mb-5 h-10 w-90 text-orange-100 text-center”>bg-[#00B700] </p>
<p class=“bg-[#000080] mb-5 h-10 w-[27rem] text-black-100 text-center text-white”>bg-[#000080]</p>
</div>
</physique>
</html> |
Output:
Utilizing completely different background colours for varied gadgets
Tailwind additionally allows you to make the most of variant modifiers for concentrating on media queries.
For instance, you could use a special background shade for a desktop/pocket book and another for a smartphone or pill – fairly simply.
Equally, you could use completely different colours for gentle or darkish modes for a similar components.
How to do that? An instance is under:
bg-gray-600 lg:bg-red-700
Which means, utilizing purple shade for giant display screen and gray-600 in small and medium screens.
For shortly viewing a demo, click on on the hyperlink under and see the demo web page on giant display screen and resize to a small dimension to see how its shade change:
See on-line demo and code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script> </head>
<physique>
<h1 class=“text-red-700 text-xl mx-20 font-bold “>
Tailwind bg shade – Breakpoints
</h1>
<div class=“flex flex-5 mx-8 mt-10 justify-between gap-2”>
<div class=“max-w-xs w-96”>
<p class=“bg-gray-950 lg:bg-red-300 mb-5 h-10 w-50 text-white text-center”>bg-gray-950 lg:bg-red-300</p>
<p class=“bg-gray-800 lg:bg-red-800 mb-5 h-10 w-60 text-orange-100 text-center”>bg-gray-800 lg:bg-red-800</p>
<p class=“bg-gray-700 lg:bg-red-700 mb-5 h-10 w-[16rem] text-white text-center”>bg-gray-700 lg:bg-red-700</p>
<p class=“bg-gray-600 lg:bg-red-600 mb-5 h-10 w-90 text-orange-100 text-center”>bg-gray-600 lg:bg-red-600 </p>
<p class=“bg-gray-500 lg:bg-red-500 mb-5 h-10 w-[27rem] text-black-100 text-center text-white”>bg-gray-500 lg:bg-red-500</p>
</div>
</physique>
</html> |
Output:
