Виталий ГурынВ своих проектах я часть пользуюсь Tailwind CSS. Чтобы отследить ширину экрана и убедиться, что адаптивная верстка работает правильно, я добавляю в шапку страницы следующий код:
<div class="fixed top-0 opacity-30 z-1000 p-1 w-full text-black dark:text-white text-sm text-center before:content-['sm_•_•_•_•'] md:before:content-['•_md_•_•_•'] lg:before:content-['•_•_lg_•_•'] xl:before:content-['•_•_•_xl_•'] 2xl:before:content-['•_•_•_•_2xl']" ></div>
Этот код создает полупрозрачную панель вверху страницы, которая отображает текущую ширину экрана в названиях классов Tailwind CSS. Это позволяет быстро увидеть, на каком размере экрана вы находитесь, и проверить адаптивность верстки.
Принцип работы
Tailwind предлагает классы для различных размеров экранов, такие как , , , и . В этом коде используется псевдоэлемент , чтобы отобразить эти классы в виде точек, которые меняются в зависимости от ширины экрана.
Контент псевдоэлемента обновляется автоматически, когда вы меняете размер окна браузера, потому что эти значения прописаны в классах.
По умолчанию текст индикатора прописан для самого узкого размера экрана:
before:content-[ 'sm_•_•_•_•'];А для более широких экранов значение переопределяется:
md:before:content-['•_md_•_•_•']И так далее для , и . Это позволяет легко увидеть, на каком размере экрана вы находитесь, и какие классы Tailwind CSS будут применяться.
Пример использования
Вот так индикатор будет выглядеть на странице после подключения блока с кодом.