Tailwind позволяет создавать тень, оборачивающую контур фигуры для файлов в формате png c прозрачным фоном.

Так выглядит эффект отбрасываемой тени для Tailwind CSS:

На изображении, приведенном выше: слева находится дефолтное изображение png, справа — изображение с эффектом тени.

Эффект тени для фигуры

Чтобы создать эффект тени, необходимо использовать изображение в формате png с прозрачным фоном.

Все, что остаётся сделать - применить к картинке класс drop-shadow:

<img src="https://i.imgur.com/q3SXJQf.png" class="filter drop-shadow-lg">

Можно выбрать любой из вариантов, соответствующий необходимым контрольные точки (breakpoint):

1. drop-shadow-sm
2. drop-shadow
3. drop-shadow-md
4. drop-shadow-lg
5. drop-shadow-xl
6. drop-shadow-2xl

Такой трюк не сработает в Tailwind CSS 2ой версии

###Эффект тени для контура

Также, эффект тени можно создать с помощью класса shadow. В этом случае тень будет следовать не контурам фигуры, а обтекать рамку изображения.

На изображении можно увидеть тень вокру фигуры drop-shadow справа и вокруг рамки box-shadow слева.

<img src="https://i.imgur.com/q3SXJQf.png" class="filter shadow-lg">

Для создания тени вокруг рамки изображения можно выбрать любой из вариантов, соответствующий необходимым контрольные точки (breakpoint):

1. shadow-sm
2. shadow
3. shadow-md
4. shadow-lg
5. shadow-xl
6. shadow-2xl

Спасибо за внимание.

Написано по материалам статьи Chris Bongers “Tailwind CSS drop shadow effect for PNG images”