Максимальная ширина и центрирование

Фиксированная ширина — проблема на узких экранах: карточка шириной 384 пикселя не поместится на телефоне. Нам нужна карточка, которая занимает всё доступное место, но никогда не бывает шире 384 пикселей. Это свойство max-width, которое вы использовали в итоговом проекте курса CSS. В Tailwind его задают классы max-w-* с именованными размерами:

Названия размеров вам знакомы по размерам шрифта: xs — очень маленький (extra small), sm — маленький (small), lg — большой (large), xl — очень большой (extra large). Единственное новое — md, средний (medium), размер между sm и lg. Дальше идут всё более крупные, вплоть до max-w-7xl. Класс max-w-prose предназначен для текста: единица ch — это ширина цифры 0 в шрифте элемента, так что строки получаются длиной около 65 символов, и такие строки удобно читать.

На широких экранах карточку нужно поставить посередине. В курсе CSS вы писали margin: 0 auto. В Tailwind это mx-auto:

.mx-auto {
	margin-left: auto;
	margin-right: auto;
}

(Tailwind записывает это как margin-inline: auto, что в языках, которые пишутся слева направо, означает то же самое.) Браузер делит свободное место рядом с элементом поровну между его левым и правым внешними отступами. Поэтому это работает только для элемента, который уже своего родителя: с заданной шириной или максимальной шириной. И не путайте с text-center: он центрирует текст внутри блока, а mx-auto — сам блок.