Верстка сайта из Figma на Tailwind CSS

Верстка макета из Figma на Tailwind CSS 3 версии:
1) Адаптивность обязательна – сейчас в Figma вместо адаптивного макета сделаны макеты для разных разрешений
2) Соблюдение принципа "Mobile first" – все кастомные CSS-правила пишем прежде всего для мобильных разрешений, медиа-запросы только для бОльших экранов
3) "Pixel Perfect" вёрстка – полное соответствие макету, даже в мельчайших деталях (проверяем с помощью браузерного дополнения "PerfectPixel by WellDoneCode (pixel perfect)" на тех разрешениях, которые реализованы в Figma)
4) "Тянущаяся" вёрстка, а не несколько наборов фиксированной ширины для разных разрешений
5) Разрешения в ширину: 1920, 1280, 1180, 1024, 820, 768, 540, 414, 390, 375
6) Кастомные CSS-правила разделить по компонентам/элементам страниц (так как в будущем проект будет работать на React/Next JS)
7) Только вёрстка – компоненты с JS пока не делаем
8) Картинки пережать