Friday, March 1, 2024
HomejQueryTailwind CSS Field Shadow

Tailwind CSS Field Shadow


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



Output:

tailwind-shadow

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:



Output:

tailwind-shadow-inner

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:



Output:

tailwind-shadow-hover

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:



Output:

See the entire obtainable listing right here.

Making use of shadow to button component

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:



Output:

tailwind-shadow-buttons

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments