Генератор теней Tailwind
Соберите многослойную тень визуально, получите класс Tailwind shadow-[...] с
произвольным значением, а также обычный CSS.
Как это работает
Смещение по X и Y, размытие, растяжение, цвет и переключатель inset каждого слоя
собираются в один сегмент box-shadow, а несколько слоёв соединяются запятыми —
это стандартный CSS-синтаксис множественных теней. Для класса Tailwind то же самое значение
получает подчёркивания вместо пробелов, а запятые остаются как есть (парсер произвольных
значений Tailwind ожидает синтаксис вида
shadow-[0_4px_6px_rgba(0,0,0,0.1)]), после чего оборачивается в
shadow-[...]. Стилю box-shadow блока предпросмотра присваивается
именно версия обычного CSS, поэтому то, что вы видите, точно соответствует обоим вариантам
вывода.
Всё вычисляется в JavaScript этой страницы на основе заданных вами значений. Ничего не загружается.
Частые вопросы
Как работает класс тени с произвольным значением в Tailwind?
Tailwind позволяет написать shadow-[<любое-css-значение>], и это напрямую компилируется в box-shadow: <любое-css-значение>, без изменений в конфигурационном файле. Пробелы внутри значения нужно заменить на подчёркивания — этот инструмент делает это автоматически.
Можно ли наложить несколько слоёв тени?
Да, нажмите «Добавить слой», чтобы добавить ещё одну тень поверх. Настоящая box-shadow поддерживает слои через запятую, и этот инструмент строит класс с произвольным значением так же, соединяя слои запятыми.
Отправляется ли это куда-либо?
Нет, тень собирается и предпросматривается полностью в CSS-движке вашего браузера. Ничего не загружается.