Text Shadows in Tailwind CSS

In recent versions of Tailwind CSS, you can add drop shadows to text by using the drop-shadow-{amount} utilities (you can also use these classes for div elements to create box shadows). {amount} can be one of the following:

• md: Medium
• lg: Large
• xl: Extra large
• 2xl: Double extra large

To set the colors of shadows, you can use shadow-{color} utility classes.

Example

Screenshot:

The code:

<div class="m-20">
        <h1 class="text-7xl font-extrabold text-amber-300 drop-shadow-lg ">Hello World</h1>
        <h1 class="text-7xl font-extrabold text-blue-600 drop-shadow-md shadow-blue-600/50">KindaCode.com</h1>
        <h1 class="text-7xl font-bold text-white drop-shadow-lg shadow-black">Tailwind Is Awesome</h1>
</div>

That’s it. Further reading:

• How to Use Tailwind CSS in React
• Tailwind CSS: How to Create a Fixed Top Menu Bar
• How to create cut-out text effect with Tailwind CSS
• How to Zoom on Hover with Tailwind CSS (the easiest approach)
• Tailwind CSS: How to Create Gradient Text
• Tailwind CSS: Make a Div 100% Height & Width of the Viewport

You can also check out our CSS category page for the latest tutorials and examples.