The shadow-xl class belongs to the box shadow group within the effects category.
Here is an example of how to use shadow-xl:
<div class="bg-gray-300 w-48 h-48 flex items-center justify-center"> <div class="shadow-xl shadow-gray-500/80 p-4 w-32 h-32 rounded-lg bg-white"></div> </div>
--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
The absolute must-have tool for anyone using Tailwind CSS.
Scan, Edit, Export any tailwind site in browser to create the perfect UI - download the chrome extension!