Skip to content
Related Articles

Related Articles

Tailwind CSS Effects Complete Reference

Improve Article
Save Article
  • Last Updated : 28 Mar, 2022
Improve Article
Save Article

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the buildings blocks that you need. Tailwind CSS Effects control the effects on elements. that provide classes to apply effects on elements like box-shadow, opacity/transparency.

Below example will give you a brief idea about the Effects of Tailwind CSS:

Example:

HTML




<!DOCTYPE html>
<head>
    <link href=
"https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
          rel="stylesheet">
</head>
  
<body class="text-center mx-4 space-y-2">
    <h1 class="text-green-600 text-5xl font-bold">
        GeeksforGeeks
    </h1>
    <b>Tailwind CSS Box Shadow Class</b>
    <div class="grid grid-flow-col text-center p-2">
        <div class="shadow-sm w-24 h-24 bg-green-200
                    rounded-lg">shadow-sm
        </div>
        <div class="shadow w-24 h-24 bg-green-200
                    rounded-lg">shadow
        </div>
        <div class="shadow-md w-24 h-24 bg-green-200
                    rounded-lg">shadow-md
        </div>
        <div class="shadow-lg w-24 h-24 bg-green-200
                    rounded-lg">shadow-lg
        </div>
        <div class="shadow-xl w-24 h-24 bg-green-200
                    rounded-lg">shadow-xl
        </div>
        <div class="shadow-2xl w-24 h-24 bg-green-200
                    rounded-lg">shadow-2xl
        </div>
    </div>
</body>
  
</html>


Output:

Tailwind CSS Effects

Tailwind CSS Effects


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!