How to add multiple box shadows using Tailwind css?

Question

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>

Answer 1

To use multiple box-shadows you can use comma separated box-shadow's values inside square brackets.

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

Answer 2

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.