tw-fade — CSS‑плагин для плавного затемнения краёв при прокрутке

Плагин tw-fade расширяет Tailwind CSS v4 набором утилит, которые создают плавное затухание содержимого у краёв прокручиваемого контейнера. Всё реализовано чистым CSS, JavaScript не нужен. Плагин уже популярен: более 475 тыс. загрузок в npm в неделю.

Как подключить и использовать?

Подключить плагин можно через npm: npm i tw-fade. После добавления в tailwind.config.js появляются новые классы:

• fade-x — горизонтальное затухание;
• fade-y — вертикальное затухание. Для более тонкой настройки доступны модификаторы fade-size-*, fade-range-* и fade-t (затухание только сверху). Пример: <div class="overflow-y-auto fade-y fade-size-2xl fade-range-md">…</div>.

Что происходит при прокрутке?

Эффекты появляются только когда в контейнере есть скрытый контент. При достижении верхнего или нижнего края градиент плавно исчезает, создавая ощущение «размытия» вместо резкой обрезки. Плагин использует CSS‑градиенты с изменяющейся альфа‑прозрачностью, поэтому переход выглядит естественно.

Какие варианты затухания доступны?

Помимо базовых fade-x и fade-y есть готовые наборы стилей:

• Dissolve – резкое исчезновение;
• Recede – отступление к краю;
• Soften – мягкое размытие;
• Vanish – полное исчезновение;
• Fade Blur – размытый переход;
• Ghost, Diffuse, Eclipse, Ebb – стилизованные градиенты. Каждый набор можно комбинировать с размерами (fade-size-2xl) и диапазонами (fade-range-md).

Нужно ли добавлять обёртки?

Нет. Достаточно применить класс к самому элементу, который скроллится. При этом верхнее и нижнее затухание будет работать независимо от того, используется ли отдельный «rail» для скролл‑баров.

Как изменить ширину или высоту затухания?

Увеличьте диапазон с помощью fade-range-<size> (например, fade-range-2xl) или задайте более крупный размер градиента через fade-size-<size>. Чем больше значение, тем шире зона плавного перехода.

Что это значит для бизнеса

С помощью tw-fade можно оформить ленты новостей, чат‑окна или каталоги товаров без лишних скриптов, экономя загрузку страницы на ~5 кБ и ускоряя рендеринг на мобильных устройствах. Это особенно ценно для сервисов, где важна быстрая первая загрузка и плавный пользовательский опыт.