Как при рефакторинге понять какие классы больше не используются?

Так бы и написали.
Иначе ваше «вы» в контексте чата читается как обращение к собеседнику

Да, это и есть обращение

Вот статья об этом от автора тейлвинда
https://adamwathan.me/css-utility-classes-and-separation-of-concerns/

Это не осуждение, а позиция. Я не говорю что это плохо или хорошо

Я говорю "с вами я бы поработал" или "с вами нет". Это не делает человека хорошим или плохим

почему тогда бем не использовать?

Потому что у нас не все есть компоненты :) да и контролировать с бэм соответствие дизайн-системе сложнее

В случае с atomic css классов не соответствующих дизайн системе просто нет

Надо почитать за тейлвинд. У нас на проектах реакт + scss + bem и я пока не вижу проблем

Кроме tailwind есть же встроенное в реакт сss-in-js решение через задание style-аттриубута <div style={{background: ..., border: ..., width: ..., height: ...}}>...</div> которое также прекрасно решает проблему мертвого css. Ну а то что нужно больше писать то это вообще не аргумент так как прекрасно работает автокомплит более того не нужно учить синтаксис всех этих сокращений и уменьшается порог входа.
Да, там нет поддержки стилей для псевдо-элементов (ховер, фокус) но это решается написанием простого компонента (например <Hover children={isHover => <div style={{border: isHover ? ... : ...}}></div>}/>) который подпишется на соотвествующие события (например ховера-мышки или фокуса-блюра) и будет менять флаг в состоянии и пробрасывать children-пропу - в общем это дело пары десятков строк кода.

Во-первых не все пишут реакт и даже не все пишут js-first приложения

Во вторых стили а раетайме это очень дорого

не дорого, я мерял

Мы тоже

И не только мы

это какой-то изврат

Использование CSS-в-JS с рантаймом (например, Styled Components) оказывает заметное негативное влияние на метрики Lighthouse.

Например, переход со Styled Components на Linaria (один из CSS-в-JS без рантайна) уменьшает «фриз» UI при загрузке на 800 мс.

https://t.co/dpzzqRtoEd https://t.co/2iukky1lPH

когда мы пишем стили задавая их инлайном - то есть атомарные компоненты вроде Frame будут возвращать React.createElement({"div", {style: {background: ..., width: ... height: ...}}}) то тут нет тормозных операций генерации классов и stylesheets в рантайме как у styled-components - во первых если стили не изменились реакт вообще не будет трогать дом и не будет вызывать никаких дом-апишек (за счет виртуального дома и реконсайлинга) а если изменились то он будет менять их через вызов el.style.someProperty = someNewValue что обрабатывается браузером очень быстро не вызывая никаких тормозов даже для анимаций на 60fps

я неоднократно мерял в разных браузерах а также разбирался как это работает изнутри - браузеры все эти стили которые задаются через классы/селекторы/stylesheets все равно в итоге сводят к инлайн-стилям на своем внутреннем представлении дом-дерева в движке браузере. То есть задавая стили инлайном мы наоборот скипаем весь тот программный слой который парсит и обрабатывает стили через селекторы и сразу меняем стили коротким путем. Единственный оверхед в чуть большем интеропе js с с++ кодом (установка стиля на системном объекте -  el.style.someStyle = ...) но это ничтожная разница и у тебя быстрее начнет тормозить лейаут или отрисовка дом-дерева (которые не зависят от способа задания стилей) чем ты получишь боттлнек от интеропа js и с++