TailwindCSS. Полный курс
Вставка
- Опубліковано 1 чер 2024
- #YauhenK #webdev #TailwindCSS #Tailwind #CSS
В данном видеокурсе мы с вами рассмотрим TailwindCSS. TailwindCSS - это CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения. Вместо традиционного использования одного класса, содержащего набор свойств (компонент), он предоставляет класс, которому соответсвует одно свойство. Tailwind использует набор интуитивно понятных классов, префиксов и суффиксов, которые очень просты для чтения и понимания. По результату курса мы создадим статичную страницу новостного сайта с множеством элементов по типу брэдкрамбы, бейджики, списки тем, пагинации и т.д. Сама же страница будет разработана с использованием подхода mobile first и будет поддерживать тёмную тему.
✒ Репозиторий курса:
✔ GitHub: github.com/YauhenKavalchuk/ta...
✒ Timeline:
✔ 0:00 - Введение (Introduction)
✔ 2:05 - Установка окружения (Setup Environment)
✔ 10:11 - Шрифты и цвета (Fonts & Colors)
✔ 17:35 - Отступы и граница (Padding, Margin & Borders)
✔ 27:03 - Декорирование (Hover & Decoration)
✔ 35:15 - Кнопки (Buttons)
✔ 43:06 - Применение Flexbox (Using Flexbox)
✔ 48:39 - Директивы (Directives)
✔ 55:16 - Иконки (Icons)
✔ 59:43 - Сеточный макет (Grid Layout)
✔ 01:08:43 - Градиенты (Gradients)
✔ 01:16:07 - Отзывчивый макет (Responsive Layout)
✔ 01:24:39 - Картинки (Images)
✔ 01:31:29 - Плавные переходы (Transitions)
✔ 01:38:24 - Тёмная тема (Dark Theme)
✔ 01:47:53 - Пользовательские настройки (Customization)
✒ Полный список готовых и планируемых курсов:
✔ Trello: trello.com/b/R6rD7qq8
✒ Автор курса:
✔ UA-cam: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...
Несправедливо малое количество лайков для столь качественного объяснения.
Благодарю
Очень очень искренне благодарен ,за такую афигенскую работу!
Спасибо большое за отзыв
Курс - бомба, оправданно восхищаюсь манерой подачи информации после прохождения этого курса и еще двух других. Спасибо за Вашу работу!
Спасибо большое за отзыв
@@YauhenKavalchuk Здравствуйте, у меня на yarn add -D tailwindcss postcss - выдает ошибку, как это исправить?
@@yerkebulanberdissugirov6311 Надо установить yarn коммандой
npm install --global yarn
Спасибо вам за полный курс!
Пожалуйста
Большущее спасибо за подробный разбор фреймворка!
Пожалуйста
шикарная подача материала! спасибо большое за Ваш труд!
Спасибо за отзыв
Великолепно! Очень доступно и без воды
Спасибо большое за отзыв
лет 5 когда начинал знакомиться с миром программирование не хватало мелких разъяснений как работают те или иные вещи и в сети не было конкретного. Помню как мучился в версиями зависимости ) лайк что новичкам показываешь.
👍
Спасибо за труд, жаль что мало просмотров, в рунете твой курс лучшее что удалось найти!👍
Спасибо за отзыв
Чтобы не использовать сайт Lorem Ipsum можно юзать встроенную возможность Emmet: например, lorem10 выведет текст-рыбу из 10 слов
Да я знаю, только мне один и тот же текст генерился, а я хотел разный, что бы максимально на правду было похоже)
или lorem*3
Спасибо большое за такую работу!
Всегда пожалуйста
Это лучший курс что я видел!!! браво! просто браво стоя!
Спасибо большое за отзыв
Не понимаю почему так мало лайков, отличная работа!
Понятия не имею
Отличный урок. Красота :-) И приятный голос.
Спасибо)
Огромное спасибо) знакома с технологий, решила обновить знания и очень много вынесла с вашего урока!)
Пожалуйста
Благодарен за урок, четко все объясняешь спасибо!
Пожалуйста
Спасибо за прекрасный видеоролик.
Спасибо за поддержку
Женя большое спасибо, ещё не начинал смотреть но уверен что контент будет годный как всегда)
Благодарю
Отличное видео, огромное спасибо за труд!
спасибо за отзыв
Спасибо. Хороший, нужный курс.
Всегда пожалуйста
Спасибо большое за труд 👍
спасибо за отзыв
Очень все структурировано и подробно! Велике дякую!)
Всегда пожалуйста
Благодарю! Интересный фреймворк. Было бы неплохо увидеть подобный курс об SCSS.
Возможно в будущем
Бро, поздравляю тебя с 100к. Смотрю твой канал уже 4 года, вспоминаю первые видео по js, ты уже наверно super senior спустя столько лет
Спасибо за видео, все понятно и информация нужная
Пожалуйста
большое спасибо. очень хороший материал
Пожалуйста
Честно это талант, все бы такие подробные видео
Спасибо
хороший гайд. спасибо за обучающий контент
Спасибо за отзыв
Согласен с крутостью подачи маериала. Спасибо!
Пожалуйста
Лайк не глядя, Женя - это гарантия годноты!
Спасибо)
Благодарю! Заранее ставлю лайк, но смотреть буду позже, как освою базу!)
Пожалуйста
Спасибо за урок!
Пожалуйста
Спасибо за труд!
Пожалуйста
Очень классно всё расписано
Спасибо
Спасибо за курс)
Пожалуйста
Ооо люблю полные курсы))
👍
Очень хорошо, спасибо
Всегда пожалуйста
Топ! Изучил фреймворк за 2 дня. Всем советую
Спасибо за отзыв
Спасибо! Это было здорово!
Пожалуйста
Спасибо за видео. На мой взгляд стоило рассказать про изменения дочерних элементов, например, когда меняется стиль вложенных элементов при наведении мыши на родителя
Пожалуйста
Очень крутой курс! Несправедливо малое количество просмотров и лайков. У Вас талант.
Спасибо большое за поддержку
Супер ! Спасибо!!!!
Пожалуйста
Tailwind в связке с реактом просто пушка
👍
Спасибо за курс! Очень наглядно и понятно.💙
Но я не понимаю ЗАЧЕМ? ПОЧЕМУ люди это используют? На CSS коде килобайты экономят? Больше плюсов не вижу! Ещё понимаю для мелких пет-проектов и админок - ок, время сэкономить. Но ведь это кошмар, мне отвратно от кол-ва классов на элементе! Увидеть ЭТО на проекте нормального размера, с нестандартным дизайном, лично мне, больно! БОЛЬНО глазам! Что заставляет людей выбирать это!? Особенно в пару с реактом, при возможностях компонентного подхода и изоляции стилей. Объясните мне: зачем вы это делаете? Как мне теперь с этим жить!? Как мне жить с проектом на tailwind!? Как смириться с этой болью и раздражением? Мне мало того, что читать, мне писать эти простыни классов придётся! 😭Я обожаю вёрстку и задачи по ней, но с tailwind я буду всеми правдами и неправдами от них отнекиваться.
P.S. Страшно! Очень страшно!
Спасибо за отзыв. Касаемо вашего комментария - отчасти согласен
Великолепно!
Спасибо за отзыв
Только начал смотреть, как обычно ВСЁ СУПЕР! СПАСИБО! Можно в двух словах - чем Тайлвинд лучше/круче Бустрапа?
Он не лучше и не хуже. Это просто другой подход, в основе которого лежит методология AtomicCSS, в то время как bootstrap предлагает набор готовых компонентов с возможностью кастомизации
Хороший курс. Спасибо! Единственное пожелание, немножко подкрутить звук, чтобы меньше низов было, гула.
Пожалуйста
Курс просто пушка!
Спасибо
спасибо!
Пожалуйста
Очень крутой контент
Спасибо
Спасибо
Пожалуйста
Лайк не глядя😍
Благодарю
благодарю
Всегда пожалуйста
Просто лучше никто бы и не снял. После Tailwind обычный css - слишком правильный и консервативный, это как говорить "Здравствуйте уважаемые господа", когда Tailwind предлагает говорить просто - "Всем привет". Супер. Спасибо))
Всегда пожалуйста
когда круто, тогда круто. Лайк подписка
👍
урок классный, спасибо большое ! было бы здорово ещё узнать как удалить не использованные стили
Я в первом уроке говорил, что неиспользуемые стили удаляются автоматически. То есть ваш итоговый, генерируемый CSS содержит только то, что реально используется
большое спасибо за данный курс, очень помогло) я бы хотел уточнить, это нормально, что у меня, когда появился styles.css и main.css они были сразу в postcss, а у тебя они в css. мне менять надо на css, или нет?
Можно не менять
спасибо
Всегда пожалуйста
Спасибо за подгон , как раз начал учить tailwind.
сочувствую
@@NeGovoriNet что такое?
Пожалуйста
Добрый день! У меня проблема, делаю проект для портфолио и для css использую данный фреймворк, проект на React. И что интересно падает с ошибкой которая указывает на @tailwind base. Подскажите пожалуйста, что это может быть?
Не видя код и ошибку, маловероятно что чем-то смогу помочь
вопрос зачем оборачивать div внутрь другого div'а? например когда создавался footer сайта 25:49
Возможно, это избыточно. Но вообще, такие оборачивания могут использоваться для правильного центрирования и позиционирования
Если у кого как и у меня не работает yarn то нужно его установить npm install -g yarn, а затем запустить VS code от имени администратора и запустить такое Set-ExecutionPolicy RemoteSigned
Что-то как-то сложно. Никогда ничего подобного не делал. Обычно достаточно просто скачать yarn, или просто использовать npm
@@YauhenKavalchuk Это потому, что у Вас не винда ))
а можно просто не использовать yarn а обойтись npm. У меня с установленным yarn была потом проблема с angular-приложением, в котором даже yarn не был задействован, пришлось лезть в корень машины и копаться в скрытых файлах
Подскажите, почему не работает ни один цвет бордера?
li>Home
Многих цветов просто нет в public/style.css
не могу найти команду подключения доп стилей в style.css
Подскажите какэ то сделать) ведь в будущем на проектах нужны будете не только стили, предлагаемые в стандартном импорте tailwind
Здравствуйте! У Вас начиная с ветки lesson_10 в секции banners остался лишний класс (bg-gradient-to-tr), который Вы забыли удалить: . На отображение, конечно, не влияет.
Спасибо за отзыв. Ну забыл и забыл) главное ничего не ломается)
@@YauhenKavalchuk всегда пожалуйста, вернусь из деревни, где нет интернета, ещё отзывов напишу :)
Такой вопрос, а не могли бы вы сделать курс по gulp или webpack ? Ну или отдельное видео?
Возможно в этом году сделаю…
@@YauhenKavalchuk я буду вам очень благодарен)
Да оно конечно хорошо но какой вес будет иметь CSS после компиляций и насколько оно удобно если делаешь вёрстку по шаблону?
Вес минимальный. Что касается вёрстки - шаблон должен быть сделан с учётом специфики tailwind. В противном случае придётся потратить время на создание кастомного конфигурационного файла
Евгений, приветствую
Хотел бы услышать вашу оценку по рациональности использования тейлвинда в работе?
Добавлю как использую его я.
Я его использую как способ быстрой кастомизации композиционных компонент, сохраняя там и основной класс.
Не использую тейлвинд в базовых презентационных компонентах, чтобы не плодить лишних зависимостей.
Для больших проектов подходит не очень, а для того чтобы сверстать пару страничек вполне.
Спасибо за такой большой обзорный ролик
Как в нём анимации делать и ховеры?)))
@@diatm1506 ховеры есть и анимация какая-то тоже. Не сверх слохсложная, но что-то можно.
@@diatm1506 можно через бэм уникальные классы давать, заливать основной функционал через tailwind @apply и после писать css свойства. И кастомизация будет и обобщенность стилистики по проекту. Было бы круто ещё использовать как если бы это был какой то sass, то бишь делать некий extend класса общего для ряда элементов.
Подход Тайлвинд из за кучи классов очень отталкивает, но они этот недостаток превратили в свою фишку. Мне тоже такой подход не нравится - но сам по себе фрейм лёгкий, в целом понятный, очень понравился подход внесения изменений через конфиг. Имеет право на жизнь - но думаю что сейчас он хайпит, затем он затеряется, а бутстрап будет живее всех живых при своих недостатках.
Для общего развития стоит выучить - тем более для этого достаточно посмотреть это видео и потыкать вечер самому
👍
тем временем сейчас tailwind в самом разагре хайпаахапхахп
@@drino955jug3 ну хайпует) в целом мнение не поменял, бесят когда много классов, с другой стороны это наименьшая проблема с которой я сталкиваюсь))
@@drino955jug3 пока нет, это еще не предел
tailwind не может самостоятельно сгенерировать apply для всех классов и подставить после сборки?
Неа
Спасибо за туториал. Полезно и познавательно, но немного нудновато. Смотрел стоя, чтоб не спать
Ставлю лайк
Можно увеличить скорость
Если повторять код за ведущим, то скорость вполне нормальная, иногда даже не успеваю, приходится перематывать )
Евгений помогите пожалуйста, Как извлечь все классы и свойства сетки grid из Tailwind CSS для использования в своем собственном файле стилей?
Если честно не знаю( не пробовал такое
Почему, когда я пишу стили связанные с цветом, то у меня не появляется рядом квадратик показующий 😊цвет? Раньше был, а сейчас пропал
Если раньше было, а теперь нету, то вообще понятия не имею, попробуйте переустановить плагин
Почему в разделе картинки, ты используешь тег ссылки как контейнер для других элементов? Просто что бы не создавать лишний див или здесь еще есть какая-то причина? Почему фоном работали через тег имг, а не через св-во бг на контейнер?
Ссылка - потому что каждый блок кликабельный и потенциально ведёт на статью. А картинка в виде тэга, что бы показать как tailwind обрабатывает такие случае. Да и вообще предполагается, что подобный шаблон будет изменяться через CMS. И если путь до картинки в html тэге через админку поменять - не проблема, то как вы измените картинку (через админку) которая определена в CSS
@@YauhenKavalchuk спасибо за ответ!)
Странно, скачал второй урок из Гитхаба, установил зависимости, и запустил с liveserver - tailwind стили не отражаются. Похоже tailwind не распознает. Что это может быть?
Вижу по следующим комментариям - запустилось
Лучший чел,желаю тебе всего наилучшего
Спасибо
спасибо за хорошую подачу.!
Так и не смог найти причину почему на 'randomuser' фотках не применяются класс на скругление на размер, фотки и с папки вставлял ни в какую не хочет применяется тоже .
Пожалуйста
Если бы ещё разобрал настройку stylelint для tailwind, было бы сверх шикарно=)
🤷♂️
Подскажите как исправить ошибки, в webstorm показано много ошибок и варнингов в styles.css файле
В одном из видео упомянул это, нужно дополнительно доустановить плагин, этотлегко гуглится
@@YauhenKavalchuk гуглил, все равно не могу исправить, есть подсказка стилей но сами стили не применяются, ну ладно разберусь как-нибудь я надеюсь
почему то при подсказке класса нету справа информации как например где text-3xl и справа инфо сколько это в rem и в px
🤔🤷♂️
если что lorem можно генерировать в vs code просто пишешь Lorem10 (10 это число слов)
Спасибо за уточнение
Что за тема в visual studio code на видео? Буду благодарен, если ответите
Material Gecko
@@YauhenKavalchuk Спасибо огромное. Удачи)
Ощущение, что они переизобрели атрибут style, настолько атомарные классы используются.
А потом придумали директивы, чтоб получились обычные классы )
За видео спасибо - помогло быстро понять, в чем суть фреймворка.
Пожалуйста
Просто мои мысли прочитал, брат)
52:34 , объясните пожалуйста каким образом в секунду заменяются все повторяющиеся стили
postcss обрабатывает это
@@YauhenKavalchuk спасибо за ответ и урок!)
Спасибо за ролик, все понятно изложено.
По-моему мнению, Tailwind - полная лабуда, не понимаю, почему популярен
😁🤷♂️
товарищи, у кого-то возникала проблема с плагином Tailwind и lifeserver? пока запущен lifeserver - подсказки не работают. Как только выключаешь - норм все работает
🤔🤷♂️
@@YauhenKavalchuk А, нашел в чем прикол, Live Server ни при чем. Когда создаю атрибут class курсор автоматически помещается внутрь "|" и подсказки не выводятся. Если щелкнуть в другое место а потом опять вернуться в class, то подсказки начинают работать. Странное явление, может с эммитом конфликтует? Я все плагины повырубал лишние, но вот такой глюк.
чуть душновато но спс энивэй, в идеале чуть юмора добавить где то как то или паузы да выйдет дольше но восприниматься проще будет)
Подумаю….
У меня не работаю директивы чтобы я не делал :(
решение с GitHub не помогло , сначала показывалось , что директива неизвестна , я вроде пофиксил эту проблему , но даже когда она не отображается ничего не работает...
🤔 не видя кода трудно что-то подсказать
Спасибо ❤
Пожалуйста
За разбор спасибо! Но html со всеми этими классами просто уродливый. Не понимаю, почему css писать сложнее или...? Стилей на простую кнопку может быть уйма. Естественное желание спрятать это все в отдельный файл. А стилизация по бэм?
Спасибо за отзыв)
Это и есть эталон уродства. Мы в компании когда-то давно наступили в таилвинд, до сих пор отмыться не можем. Преимуществ у него минимум, но при этом он тянет огромный файл со стилями в проект и превращает хтмл в нечитаемое нечто
@@user-vo7sm5sz7ptailwind, по крайней мере новый, не добавляет всю библиотеку в бандл, а только то, что используется в проекте. Насчёт пачек классов, да, это очевидный минус, но можно выносить часто переиспользуемые классы и тд.
Следующее видео: "Prettier. Полный курс" ;)
Маловероятно
Для чего устанавливали postcss?
Если я не ошибаюсь, на момент записи по другому не работало, выкидывало ошибку что нужен postcss
И как потом такой код читать другому разрабу? это же неудобно в командной разработке. Загуглите минусы данного фреймворка, их слишком много чтобы его использовать. Как по мне лучше стать мастером в scss чтобы не писать код который в дальнейшем тяжело будет поддерживать.
Да, есть такой нюанс
@@YauhenKavalchuk мне кажется именно это фреймворк станет стандартом . лично моё мнение
Я вообще в шоке почему это стало популярным, когда все топили за чистоту html и понятные короткие классы
@@Maksim-nu8hbсмотря какая архитектура в приложение. Если чистая то все понятно и плюс документацию оставлять.
I would use tw-colors plugin for dark mode. Tailwind config is used for configuration of light and dark modes Instead of writing dark:… in markup
есть что нибудь про tailwind-merge и clsx?
Нет
В доках написано наоборот, apply использовать для мелких вещей.
🤔
а я правильно понимаю это в одном видео весь курс ?
Да, всё верно
Насколько вообще оправдано применение этих CSS фреймворков? Слышал что многие профессиональные верстальщики их не любят
Вконтакте нельзя перемещаться с помощью TAB, в яндексе сразу видно что болт забили) через раз)
Получается…(
мне пишет yarn не распознано и шо делать
Установите yarn)
@@YauhenKavalchuk час жизни потрачен в пустую-_-
Пока не понял преимущества перед обычными стилями.
Здесь нет преимуществ перед обычными стилями. Отталкиваться нужно от потребностей проекта, знаний, ситуации и т.д. где-то применимо одно, где-то другое
49:51 смеюсь, тайлвинд изобрел обычные классы. "Мы почистили полотно классов"😂
😁