⚡️ Верстка сайта без CSS | Это круче, чем Bootstrap 5 | Обзор Tailwind и практика

• Анна Блок представляет фреймворк Tailwind CSS.  

• Фреймворк предлагает обширный каталог классов и инструментов для стилизации сайтов и приложений.  

• Tailwind интегрируется с различными инструментами, такими как Next.js, Vue.js, Laravel, Nuxt, React и Gatsby.  

• Установка Tailwind возможна через npm или как CSS-плагин.  

• В видео будет использоваться стандартная ссылка на Tailwind.  

• Tailwind предлагает больше возможностей, чем Bootstrap, включая поддержку Grid и анимации.  

• Установка Tailwind в проект.  

• Создание файла index.html и добавление ссылки на Tailwind.  

• Использование плагина Emmet для создания каркаса.  

• Использование класса container для создания контейнера.  

• Добавление класса px-4 для отступов по горизонтали.  

• Установка плагина Live Server для проверки изменений.  

• Добавление Flexbox и Grid в проект.  

• Использование классов для центрирования и отступов.  

• Проверка разметки в инспекторе.  

• Центрирование текста с помощью класса text-center.  

• Окрашивание ячеек с помощью класса bg-blue.  

• Добавление отступов и бордер-радиуса.  

• Изменение цвета текста на темно-серый.  

• Использование классов для переходов и анимаций.  

• Демонстрация плавной смены цвета при наведении.  

• Скопируйте разметку и добавьте стрелку после контейнера.  

• Используйте класс flex для центрирования элемента.  

• Добавьте значение padding-y: 8 для точного центрирования.  

• Добавьте класс semantic-header для шапки сайта.  

• Используйте flex для выравнивания элементов в линию.  

• Добавьте классы для логотипа и списка, используя пропорции.  

• Используйте классы для задания ширины элементов.  

• Измените пропорции для логотипа и списка.  

• Добавьте фон и размер шрифта для шапки.  

• Используйте margin-left и margin-top для смещения элементов.  

• Добавьте border-bottom для создания линии.  

• Создайте форму с закруглением и заголовком.  

• Добавьте форму с input и button.  

• Используйте border и rounded для элементов формы.  

• Настройте текст и отступы для формы.  

• Настройте цвет и отступы для кнопки.  

• Используйте градиенты для фона формы.  

• Подведите итоги и покажите возможности использования классов для создания сайта.