В случае необходимости расширить функционал TailwindCSS новые стили необходимо писать в отдельном .css / .scss (на ваш выбор) файле, который подключается к системе сборки. Необходимо избегать собственных изобретений "велосипедов" и по максимуму использовать возможности Tailwind. Директиву @apply можно применять только в этих css-файлах. Инлайн-включения стилей допускаются только в исключительных случаях (к примеру, внедрение динамического фона в переиспользуемый компонент).
Требуется использовать семантические теги стандарта HTML 5. Допустимо добавлять семантические классы для удобства навигации. Желательно использовать комментарии, отделяющие крупные логические блоки от соседей. Подписывать каждый input не нужно.
Интерактивные элементы должны поддерживать состояния: hover, focus, active. Желательно использование transition.
Иконки и изображения
Приоритетность: svg для иконок, webp для изображений. Изображения должны быть сжаты.
Видео
Блоки вставки видео должны корректно адаптироваться по ширине без хардкода.
Переключатель отображения мобильного меню необходимо сделать либо на нативном js, либо на alpine.js – на выбор исполнителя.
Поддержка современных браузеров
Chrome, Yandex Browser, Firefox, Edge, Safari, Android Browser версий от января 2022 года включительно (см. caniuse.com).
Структура проекта
Вход
Ошибка входа
Регистрация
Подтверждение регистрации
Сброс пароля
Подтверждение сброса пароля
Подтверждение1
Подтверждение2
Главная
Покупка карты1
Покупка карты2
Покупка карты3
Работа с картами
Проверка баланса
Пополнить карту
Карта не существует или еще не активирована
Приложение1
Приложение2
Приложение3
Справка и поддержка1
Справка и поддержка2
Справка и поддержка3
Личный кабинет
Редактирование данных
Карта
Также в макете есть вариации этих страниц с отображенными состояниями (состояние формы при загрузке, отображение ошибок валидации). Эти варианты тоже необходимо отобразить в вёрстке / вариантах использования компонентов.
В случае необходимости, пожалуйста, задайте уточняющие вопросы.
При отклике прикрепите пару своих проектов, разработанных на TailwindCSS v3 и опишите свой опыт работы с php для разбивки макета на блоки.