How to add multiple box shadows using Tailwind css?-CodePudding

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 > Hello World! </button>

CodePudding user response：

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.