Adding custom boxShadow

[eduardonwa]

Hello there, maybe you can help me with this, im having trouble rendering a custom property for shadow, I wanted to add a higher/custom value to boxShadow, but right now this doesn't produce any changes:

    theme: {
        extend: {
            fontFamily: {
                sans: ['Nunito', ...defaultTheme.fontFamily.sans],
            },
            boxShadow: {
                boldershadow: '0 20px 25px -5px rgba(0, 0, 0, 0.8), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
            }
        },
    },

Since I am on a Laravel 8 project I ran npm run watch so it would compile. I don't see any changes after.. this is how im implementing it inside the element:

<a 
                href="#" 
                class="bg-gray-800 h-32 flex justify-center items-center rounded-lg p-4 
                hover:bg-gray-900 border border-gray-700 transition ease-in-out ```boldershadow```"
            >

Thanks!

[olets]

The box-shadow class names are the key prefixed by shadow-.

And I don't write a lot of Blade but the backticks surprise me. Unless you're doing other processing they should not be there.

[eduardonwa]

Okay so like this?

html

<div class="w-24 fixed min-h-screen flex text-gray-500 bg-gray-900 justify-center items-center shadow-boldershadow">

tailwind.config.js

boxShadow: {
    boldershadow: '0 35px 60px -15px rgba(0, 0, 0, 0.8)',
}

About the backticks, they're only there to highlight where the class is being utilized, to be found quickly in this same question I do not have those backticks in my file. Still getting the same results as before.

[dance2die]

You can also test on Tailwind CSS Playground.
https://play.tailwindcss.com/

Here is the example for bolder shadow.
https://play.tailwindcss.com/HurBtiDUDS?file=config