Tailwind CSS для начинающих. Подробный урок по подключению, настройке и использованию

• Обзор ключевых особенностей Tailwind CSS.  

• Практическая часть урока: установка, настройка и работа с темной и светлой темой.  

• Ускорение сборки в 5 раз для полного билда и в 100 раз для инкрементных изменений.  

• Современные возможности CSS: каскадные слои, прапорти, калар микс, логические свойства.  

• Настройка Tailwind через CSS-файлы вместо JavaScript.  

• Автоматическое сканирование проекта и обнаружение файлов с шаблонами.  

• Поддержка импорта без необходимости установки дополнительных плагинов.  

• Поддержка цветовой палитры P3 и дополнительные функции.  

• Создание новой папки и инициализация проекта с помощью npm init.  

• Установка Tailwind с помощью npm install -D.  

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

• Импорт Tailwind и создание стартовых стилей.  

• Добавление папки для изображений и создание файла index.html.  

• Подключение скриптов и подключение Tailwind CSS.  

• Запуск сервера и автоматическое обновление.  

• Демонстрация работы с темной и светлой темой через персонализацию.  

• Переключение между светлой и темной темами.  

• Использование атрибута data-theme для управления темами.  

• Подготовка скрипта для переключения тем на GitHub.  

• Проверка системной темы и автоматическое применение классов.  

• Использование media queries для определения системной темы.  

• Функция applyTheme для проверки и применения выбранной темы.  

• Применение темы при изменении, если не используется авто.  

• Установка вариантов в CSS для переключения тем.  

• Проверка работы переключения тем при клике на элементы.  

• Сохранение состояния темы при обновлении страницы.  

• Проверка работы сохранения состояния при переключении системной темы.  

• Добавление класса active при клике на элемент.  

• Стилизация активного элемента с использованием CSS.  

• Применение акцентного цвета к активному элементу.  

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

• Использование скрипта и переключателя тем в проектах.  

• Рекомендации по использованию стартера с GitHub.  

• Анонс следующего урока с практическим примером.