Новый инструмент: tailwind-prefix-migrator — как изолировать Tailwind и shadcn в виджетах без регексов и боли
Всем привет! Продолжаю делиться своими open-source инструментами, которые родились из реальных производственных задач.
Когда вы делаете встраиваемый виджет, личный кабинет, калькулятор или микрофронтенд на стеке React + Tailwind CSS + shadcn/ui, всё работает прекрасно — ровно до того момента, пока вам не нужно встроить его скриптом на рабочий сайт клиента (например, на WordPress, Bitrix или самописную CMS).
И тут начинается хаос со стилями:
1. Чужие глобальные стили ломают ваш виджет (например, базовые правила для div, p или button).
2. Ваши классы вроде `flex`, `p-4`, `bg-white` или стили сброса (preflight) ломают вёрстку сайта клиента.
Обычно разработчики пробуют три пути, и у всех есть фатальные минусы:
→ iframe: тяжело масштабировать под контент, неудобный скролл, на мобильных устройствах страдает UX, а модальные окна зажаты рамками фрейма.
→ Shadow DOM: моментально ломает портальные компоненты (модалки Radix/shadcn, тултипы, селекты и дропдауны рендерятся в <body> за пределами Shadow Root).
→ Автозамена классов регулярками / find-and-replace: лотерея, которая почти всегда ломает кастомные BEM-классы, иконки Lucide (`lucide-`), ключи вариантов в CVA (`cva()`) или переменные в JavaScript.
Поэтому я написал и опубликовал tailwind-prefix-migrator (CLI-команда `tpm`).
Это инструмент, который безопасно расставляет, обновляет или полностью снимает префиксы Tailwind по всей кодовой базе за пару секунд.
tailwindcss
react
typescript
shadcn
frontend
opensource
webdev
javascript
programming