Tidadigi Logo

Tailwind CSS Box Shadow

Lớp này chấp nhận nhiều giá trị trong tailwind CSS. Tất cả các thuộc tính được bao phủ dưới dạng class. Sử dụng class này, ta có thể kiểm soát box-shadow của một phần tử. Trong CSS, ta thực hiện việc đó bằng CSS Shadow Effect của box-shadow.

Box Shadow classes:

  • shadow-sm: Class này tạo hiệu ứng shadow mờ hoặc nhỏ trên hộp.
  • shadow: Class này tạo hiệu ứng shadow thông thường trên hộp.
  • shadow-md: Class này tạo hiệu ứng md trên hộp.
  • shadow-lg: Class này tạo hiệu ứng shadow lg trên hộp.
  • shadow-xl: Class này tạo hiệu ứng shadow xl trên hộp.
  • shadow-2xl: Class này tạo hiệu ứng shadow 2xl trên hộp.
  • shadow-inner: Class này tạo hiệu ứng shadow bên trong hộp.
  • shadow-none: Class này làm giảm hiệu ứng shadow.

Syntax:

<element class="shadow-{shadow-depth}">...</element>

Example:

HTML 
<!DOCTYPE html>
<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-box-shadow
Tailwind CSS Box shadow class

Last Updated : 20/07/2025