How to add multiple box shadows using Tailwind css?

Issue

I want to give 2 box shadows using tailwind css

CSS:

button{
     box-shadow: inset 0px 0px 0px 1px var(--primary-500), inset 0px 0px 0px 2px red;
      }

This is what I’m able to achieve using tailwind css:

<button class="shadow-[inset_0_0_0_1px_var(--primary-500)]"> Hello World! </button>

Solution

The shadow classes that come with Tailwind use multiple shadows, e.g. the class shadow translates to box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); in CSS.

If you need to add additional shadows or customise these values, you can do so by editing theme.boxShadow or theme.extend.boxShadow in your tailwind.config.js file.

If a DEFAULT shadow is provided, it will be used for the non-suffixed shadow utility. Any other keys will be used as suffixes, for example the key '2' will create a corresponding shadow-2 utility.

Answered By – Luke

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published