Library. Tailwind. Custom box-shadow | LETUNOFF DOCS

🧱 Суть

Tailwind имеет готовые классы теней (shadow-sm, shadow-lg), но для нестандартных случаев можно использовать arbitrary values.

Например, внутренняя тень только сверху:

<div className="shadow-[inset_0_6px_6px_-4px_rgba(0,0,0,0.1)]">

Это напрямую задаёт CSS:

box-shadow: inset 0 6px 6px -4px rgba(0,0,0,0.1);

📦 Проблема

1. Стандартных Tailwind-классов недостаточно

Например:

shadow-md

Создаёт обычную внешнюю тень.

Но нельзя стандартным классом получить:

внутреннюю тень (inset)
тень только с одной стороны
нестандартное размытие

2. Непонятный синтаксис arbitrary values

shadow-[inset_0_6px_6px_-4px_rgba(0,0,0,0.1)]

Выглядит непривычно, но это просто CSS внутри Tailwind.

✅ Решение

Использовать:

utility-[custom-value]

Для теней:

shadow-[box-shadow-value]

💻 Код

Внутренняя тень сверху:

<div className="shadow-[inset_0_6px_6px_-4px_rgba(0,0,0,0.1)]">

Разбор:

inset 0 6px 6px -4px rgba(0,0,0,0.1)

inset → внутренняя тень
0 → смещение по X
6px → смещение по Y вниз (тень появляется сверху внутри блока)
6px → blur (размытие)
-4px → spread (сужение области тени)
rgba(...) → цвет и прозрачность

Изменение эффекта

Сильнее:

rgba(0,0,0,0.2)

Мягче:

rgba(0,0,0,0.05)

Больше размытие:

inset 0 8px 12px -4px rgba(...)

🎯 Вывод

Tailwind позволяет писать чистый CSS через arbitrary values
shadow-[...] используется для нестандартных теней
inset создаёт внутреннюю тень
положительное значение Y создаёт эффект тени сверху внутри элемента
сложные стили лучше понимать через исходный CSS

🔗 Связано