In this tutorial we will see how to use text shadow in tailwind css. Also we will create text shadow style, text shadow color, text shadow effect, example with Tailwind CSS.
Example 1
Tailwind CSS text shadow using drop-shadow class.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Text Shadow Example</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="flex justify-center items-center flex-col h-screen space-y-4">
<h1 class="text-4xl font-bold drop-shadow">Tailwind CSS Text With Shadow</h1>
<h1 class="text-4xl font-bold drop-shadow-md">Tailwind CSS Text With Shadow md</h1>
<h1 class="text-4xl font-bold drop-shadow-lg">Tailwind CSS Text With Shadow lg</h1>
<h1 class="text-4xl font-bold drop-shadow-xl">Tailwind CSS Text With Shadow xl</h1>
<h1 class="text-4xl font-bold drop-shadow-2xl">Tailwind CSS Text With Shadow 2xl</h1>
</div>
</body>
</html>
text shadow in tailwind css
Tailwind CSS responsive text shadow.
<h1 class="text-3xl lg:text-5xl text-white drop-shadow lg:drop-shadow-lg">Tailwind CSS Responsive Text Shadow</h1>
responsive text shadow in tailwind css
Example 2
Tailwind CSS text shadow with color.
<h1 class="text-3xl text-white drop-shadow-lg">Tailwind CSS Text Shadow Color</h1>
<h1 class="text-3xl text-black drop-shadow-lg">Tailwind CSS Text Shadow Color</h1>
<h1 class="text-3xl text-green-600 drop-shadow-lg">Tailwind CSS Text Shadow Color</h1>
<h1 class="text-3xl text-red-600 drop-shadow-lg">Tailwind CSS Text Shadow Color</h1>
<h1 class="text-3xl text-blue-600 drop-shadow-lg">Tailwind CSS Text Shadow Color</h1>
tailwind text shadow with color
Tailwind CSS custom style text shadow with color.
<h1 class="text-4xl font-bold text-gray-600 drop-shadow-[0_50px_40px_rgba(0,0,0,0.25)]">Tailwind Custom Text Shadow </h1>
