В данном видеокурсе мы с вами рассмотрим TailwindCSS. TailwindCSS - это CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения. Вместо традиционного использования одного класса, содержащего набор свойств (компонент), он предоставляет класс, которому соответсвует одно свойство. Tailwind использует набор интуитивно понятных классов, префиксов и суффиксов, которые очень просты для чтения и понимания. По результату курса мы создадим статичную страницу новостного сайта с множеством элементов по типу брэдкрамбы, бейджики, списки тем, пагинации и т.д. Сама же страница будет разработана с использованием подхода mobile first и будет поддерживать тёмную тему.

• Visual Studio Code (редактор кода)
• Node Package Manager
• Lorem ipsum (текст-"рыба")
• Heroicons (иконки)
• Randomuser (фото)

• TailwindCSS (документация)

• Плагины для VS Code
• HTML (видеокурс)
• CSS (видеокурс)
• CSS Flexbox (видеокурс)
• CSS Grid (видеокурс)

• Клонируйте репозиторий: https://github.com/YauhenKavalchuk/tailwindcss.git
• Перейдите в папку с проектом: cd tailwindcss
• Перейдите в нужную ветку соответствующую уроку:
  • git checkout lesson_01
  • git checkout lesson_02
  • git checkout lesson_10 и т.д.
• Установите зависимости: yarn install
• Запустите сборку СCS файл: yarn build
• Откройте index.html в браузере

• #0 Введение (Introduction)
• #1 Установка окружения (Setup Environment)
• #2 Шрифты и цвета (Fonts & Colors)
• #3 Отступы и граница (Padding, Margin & Borders)
• #4 Hover и Декорирование (Hover & Decoration)
• #5 Кнопки (Buttons)
• #6 Применение Flexbox (Using Flexbox)
• #7 Директивы (Directives)
• #8 Иконки (Icons)
• #9 Сеточный макет (Grid Layout)
• #10 Градиенты (Gradients)
• #11 Отзывчивый макет (Responsive Layout)
• #12 Картинки (Images)
• #13 Плавные переходы (Transitions)
• #14 Тёмная тема (Dark Theme)
• #15 Пользовательские настройки (Customization)