Контрольные точки

Ширина, начиная с которой действует класс с префиксом, называется контрольной точкой (по-английски breakpoint): на ней макет страницы меняется. В Tailwind пять контрольных точек, у каждой свой префикс:

Названия пришли от размеров одежды: small, medium, large и extra large, то есть «маленький», «средний», «большой» и «очень большой». Ширины заданы в rem, поэтому они подстраиваются под размер текста, который посетитель выбрал в браузере: при крупном тексте страница переключается на широкий макет позже, когда места для него действительно хватает.

Каждый префикс действует начиная со своей ширины, то есть и на всех более широких экранах. На картинке видно, какие префиксы действуют при ширинах из панели над предпросмотром: при 375 px — ни один, при 768 px — sm: и md:, а при 1280 px — все, кроме 2xl:.

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

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">

Один столбец на телефоне, два начиная с 640 px и четыре начиная с 1024 px. При 1280 px действуют и sm:grid-cols-2, и lg:grid-cols-4, так какой же из них побеждает? Решает каскад, как вы знаете из курса CSS: Tailwind пишет CSS для контрольных точек от самой маленькой до самой большой, поэтому правило для более широкого экрана идёт позже и побеждает. Порядок классов в атрибуте class не важен.