In this lesson we will take some time to learn the theory behind the shadows.
As in Material Design, shadows play a big role in Material Minimal (TW Elements design system). However, they are definitely more subtle here - they have brighter colors and are often more extensive.
Unlike Material Design, Material Minimal is not afraid to use colored shadows, which can be seen in the example of our buttons. However, these are always delicate accents, as Material Minimal values subtlety and avoids exaggeration.
The shadows are undoubtedly one of the most distinctive features of Material Minimal and give it a special flavor.
Default shadows in Tailwind CSS
Tailwind CSS provides utilities for adding box-shadows to elements. They create the illusion of depth and are useful for adding subtle visual distinction between different elements on the screen.
The syntax for applying shadows in Tailwind CSS is very straightforward. You
simply apply the
shadow utility at its various strengths to an
.shadow-none removes shadows.
<div class="... shadow-none"></div> <div class="... shadow-sm"></div> <div class="... shadow"></div> <div class="... shadow-md"></div> <div class="... shadow-lg"></div> <div class="... shadow-xl"></div> <div class="... shadow-2xl"></div>
Add shadows to the carousel images
Just like the class for rounded corners, we also need to add a class for shadows to the Carousel items part.
So let's add
<!--Carousel items--> <div class="relative w-full overflow-hidden rounded-2xl shadow-2xl after:clear-both after:block after:content-['']"> [...] </div>
After saving the file and refreshing the browser you should see the shadow added to the carousel.
However, because the graphics in the carousel are quite dark, the shadow is
hardly visible. We can increase its intensity by adding the
How exactly does it work? It's simple:
shadow-black: This part of the class is setting the shadow color to black
/50: This part of the class is setting the opacity of the shadow to 50%.
This combination allows you to have a very diffused (because of
.shadow-2xl) black shadow with 50% opacity. This would give a
soft, semi-transparent black shadow.
So let's add this to the carousel:
<!--Carousel items--> <div class="relative w-full overflow-hidden rounded-2xl shadow-2xl shadow-black/50 after:clear-both after:block after:content-['']"> [...] </div>
Now the shadow is much more visible.
Co Founder at TW Elements and MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.
Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.