Tailwind CSS Field Shadow
CSS has field shadow property which is used so as to add shadows across the body of a component.
By utilizing Tailwind CSS, it’s possible you’ll use the utility courses for controlling the field shadow of a component.
Lessons for field shadow in Tailwind CSS
The next courses can be found in Tailwind for box-shadow:
- shadow-sm
- shadow
- shadow-md
- shadow-lg
- shadow-xl
- shadow-2xl
- shadow-inner
- shadow-none
The primary six shadow utility courses are for outer shadow. Whereas .shadow-inner is for interior shadow (because the identify displays).
The final, shadow-none is for eradicating present shadows.
The part beneath exhibits utilizing these courses for creating field shadow in HTML parts.
An instance of utilizing outer shadow utilities
Within the instance beneath, we created a field of 200px width and 150px peak. Then we utilized numerous Tailwind courses of field shadow to that field component. We used all outer shadow courses for that:
Take a look.
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
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=“stylesheet”>
<model>
.field {
width: 200px;
peak: 150px;
background-color: #FFF; }
</model>
</head>
<physique class=“text-center mx-4 space-y-2”>
<h1 class=“text-red-400 text-5xl font-bold “>
Tailwind Field Shadow Demo
</h1>
<div class=“flex flex-1 flex-wrap justify-between gap-2 darkish:text-neutral-800”>
<div class=“p-6 shadow-sm text-green-300 field” >shadow-sm</div>
<div class=“p-6 shadow text-green-300 field” >shadow</div>
<div class=“p-6 shadow-md text-green-300 field” >shadow-md</div>
</div>
<div class=“flex flex-1 flex-wrap justify-between gap-2 darkish:text-neutral-800”>
<div class=“p-6 shadow-lg text-green-300 field” >shadow-lg</div>
<div class=“p-6 shadow-xl text-green-300 field” >shadow-xl</div>
<div class=“p-6 shadow-2xl text-green-300 field” >shadow-2xl</div>
</div>
</physique> </html> |
Output:
An instance of making use of interior shadow (shadow-inner) utility
Within the instance beneath, we used the one interior shadow utility class for a similar sized field.
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
|
<!DOCTYPE html> <html>
<head> <hyperlink href=“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=“stylesheet”>
<model>
.field {
width: 200px;
peak: 150px;
background-color: #FFF;
}
</model>
</head>
<physique class=“text-center mx-4 space-y-2”>
<h1 class=“text-red-400 text-5xl font-bold “>
Inside Field Shadow
</h1>
<div class=“flex flex-1 flex-wrap justify-between gap-2 darkish:text-neutral-800”>
<div class=“p-6 shadow-inner text-green-500 field” >shadow-inner</div>
</div>
</div>
</physique> </html> |
Output:
Including shadow in hover state instance
As such, Tailwind consists of modifiers for pseudo-classes together with hover state. For the hover pseudo-class, use the hover modifier.
You may additionally use the shadow courses within the hover state.
Within the instance beneath, we added a traditional outer class (shadow) to 3 packing containers.
In every field, we added a distinct utility for the shadow field as you hover the mouse over that field component. Within the first field, we utilized:
hover:shadow-lg
Within the second field:
hover:shadow-xl
Within the third field:
hover:shadow-2xl
See the code and output by clicking the hyperlink beneath. Hover the mouse over any field and see the shadow in place.
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
|
<!DOCTYPE html>
<html>
<head>
<hyperlink href=“https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css” rel=“stylesheet”>
<model>
.field {
width: 200px;
peak: 150px;
background-color: #FFF;
}
</model>
</head>
<physique class=“text-center mx-4 space-y-2”>
<h1 class=“text-red-400 text-2xl font-bold “>
Hover Field Shadow Demo
</h1>
<div class=“flex flex-1 flex-wrap justify-between gap-2 darkish:text-neutral-800”>
<div class=“p-6 shadow hover:shadow-lg text-green-300 field” >hover:shadow-lg</div>
<div class=“p-6 shadow hover:shadow-xl text-green-300 field” >hover:shadow-xl</div>
<div class=“p-6 shadow hover:shadow-2xl text-green-300 field” >hover:shadow-2xl</div>
</div>
</div>
</physique> </html> |
Output:
Colorizing the outer shadow instance
To be able to use another colour than the default (as within the above examples), it’s possible you’ll use the utilities for controlling the field shadow colour.
Just a few courses are:
- shadow-black
- shadow-white
- shadow-slate-50
- shadow-slate-100
- —
- shadow-slate-950
- shadow-zinc-50
- shadow-zinc-100
- —
- shadow-zinc-950
- shadow-red-50
- shadow-red-100
- —
- shadow-red-100
Within the demo beneath, we now have used a couple of of those courses in our field shadows. Take a look:
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
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script>
<model>
.field {
width: 200px;
peak: 150px;
background-color: #FFF;
}
</model>
</head>
<physique class=“text-center mx-4 space-y-2”>
<h1 class=“text-red-400 text-2xl font-bold “>
Field Shadow Shade
</h1>
<div class=“flex flex-1 flex-wrap justify-between gap-2”>
<div class=“p-6 shadow shadow-lg shadow-orange-100 text-red-400 “ >shadow-orange-100</div>
<div class=“p-6 shadow shadow-lg shadow-amber-700 text-red-400 “ >shadow-amber-700</div>
<div class=“p-6 shadow shadow-lg shadow-cyan-500/50 text-red-400 “ >shadow-cyan-500/50</div>
<div class=“p-6 shadow shadow-lg shadow-lime-200 text-red-400” >shadow-lime-200</div>
<div class=“p-6 shadow shadow-lg shadow-green-950 text-red-400” >shadow-green-950</div>
<div class=“p-6 shadow shadow-lg shadow-teal-500 text-red-400” >shadow-teal-500 </div>
</div>
</physique>
</html> |
Output:
See the entire obtainable listing right here.
Within the instance beneath, we created three buttons by utilizing the utility courses of Tailwind.
There, we additionally utilized field shadow courses to the button parts. Together with utilizing completely different field shadow utilities for measurement, we additionally used shadow colours.
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
|
<!DOCTYPE html>
<html>
<head>
<script src=“https://cdn.tailwindcss.com”></script>
</head>
<physique class=“text-center mx-4 space-y-2”>
<h1 class=“text-red-400 text-2xl font-bold “>
Button Field Shadow Demo
</h1>
<div class=“flex flex-1 flex-wrap justify-between gap-2”>
<button class=“bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg shadow-indigo-500/50”>Submit Information</button>
<button class=“bg-red-700 hover:bg-red-400 text-white py-2 px-4 rounded shadow-xl shadow-red-500/50”>Create Account</button>
<button class=“bg-green-950 hover:bg-green-300 text-white py-2 px-4 rounded shadow-2xl shadow-green-500/50”>Create Account</button>
</div>
</physique>
</html> |
Output:
