TailwindCSS. Полный курс

  Переглядів 59,175

webDev

webDev

День тому

#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
✒ Автор курса:
✔ UKposts: / yauhenkavalchuk
✔ Instagram: / yauhenkavalchuk
✔ Twitter: / yauhenkavalchuk
✔ VK: YauhenKavalchuk
✔ LinkedIn: / yauhenkavalchuk
✔ GitHub: github.com/YauhenKavalchuk
✔ VK (Группа): webdevcom
✒ Поддержать развитие канала: github.com/YauhenKavalchuk/yo...

КОМЕНТАРІ: 278
@igorkulibaba7287
@igorkulibaba7287 Рік тому
Очень очень искренне благодарен ,за такую афигенскую работу!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо большое за отзыв
@RajPolinovsky
@RajPolinovsky Рік тому
Спасибо вам за полный курс!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@ta_ivanova
@ta_ivanova 9 місяців тому
Большущее спасибо за подробный разбор фреймворка!
@YauhenKavalchuk
@YauhenKavalchuk 9 місяців тому
Пожалуйста
@ser9ga592
@ser9ga592 10 місяців тому
Великолепно! Очень доступно и без воды
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
Спасибо большое за отзыв
@user-hr9es8ee8f
@user-hr9es8ee8f Рік тому
Курс - бомба, оправданно восхищаюсь манерой подачи информации после прохождения этого курса и еще двух других. Спасибо за Вашу работу!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо большое за отзыв
@yerkebulanberdissugirov6311
@yerkebulanberdissugirov6311 Рік тому
@@YauhenKavalchuk Здравствуйте, у меня на yarn add -D tailwindcss postcss - выдает ошибку, как это исправить?
@artemenko53
@artemenko53 11 місяців тому
@@yerkebulanberdissugirov6311 Надо установить yarn коммандой npm install --global yarn
@Grigoren_com
@Grigoren_com 3 місяці тому
шикарная подача материала! спасибо большое за Ваш труд!
@YauhenKavalchuk
@YauhenKavalchuk 3 місяці тому
Спасибо за отзыв
@zaurhuseynzade6950
@zaurhuseynzade6950 Рік тому
Несправедливо малое количество лайков для столь качественного объяснения.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Благодарю
@yaroslavsolomianyi2091
@yaroslavsolomianyi2091 Рік тому
Спасибо за прекрасный видеоролик.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо за поддержку
@znakjj
@znakjj 11 місяців тому
Спасибо большое за такую работу!
@YauhenKavalchuk
@YauhenKavalchuk 11 місяців тому
Всегда пожалуйста
@medokuk8644
@medokuk8644 Рік тому
Благодарен за урок, четко все объясняешь спасибо!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@andrew_b2r
@andrew_b2r Рік тому
Женя большое спасибо, ещё не начинал смотреть но уверен что контент будет годный как всегда)
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Благодарю
@alexsavchenko1590
@alexsavchenko1590 Рік тому
Спасибо за труд, жаль что мало просмотров, в рунете твой курс лучшее что удалось найти!👍
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо за отзыв
@alexmoney4641
@alexmoney4641 Рік тому
Отличное видео, огромное спасибо за труд!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
спасибо за отзыв
@user-wx4eg7sf3c
@user-wx4eg7sf3c Рік тому
Спасибо большое за труд 👍
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
спасибо за отзыв
@antonkuznetsov2680
@antonkuznetsov2680 6 місяців тому
Это лучший курс что я видел!!! браво! просто браво стоя!
@YauhenKavalchuk
@YauhenKavalchuk 6 місяців тому
Спасибо большое за отзыв
@user-bf1gd4oh4m
@user-bf1gd4oh4m 7 місяців тому
Очень все структурировано и подробно! Велике дякую!)
@YauhenKavalchuk
@YauhenKavalchuk 7 місяців тому
Всегда пожалуйста
@adamandsteve13
@adamandsteve13 Рік тому
Отличный урок. Красота :-) И приятный голос.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо)
@raftti
@raftti Рік тому
Спасибо за видео, все понятно и информация нужная
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@slt4415
@slt4415 Рік тому
лет 5 когда начинал знакомиться с миром программирование не хватало мелких разъяснений как работают те или иные вещи и в сети не было конкретного. Помню как мучился в версиями зависимости ) лайк что новичкам показываешь.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@piskaorangutanga
@piskaorangutanga Рік тому
Благодарю! Интересный фреймворк. Было бы неплохо увидеть подобный курс об SCSS.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Возможно в будущем
@artemivanov5013
@artemivanov5013 Рік тому
Спасибо за урок!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-eb6yb7ck6v
@user-eb6yb7ck6v Рік тому
большое спасибо. очень хороший материал
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@Nikitosss91
@Nikitosss91 10 місяців тому
Лайк не глядя, Женя - это гарантия годноты!
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
Спасибо)
@ganjour
@ganjour 4 місяці тому
Спасибо. Хороший, нужный курс.
@YauhenKavalchuk
@YauhenKavalchuk 4 місяці тому
Всегда пожалуйста
@alexandr8151
@alexandr8151 Рік тому
Спасибо за курс)
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-fy1wv1gj6n
@user-fy1wv1gj6n Рік тому
хороший гайд. спасибо за обучающий контент
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо за отзыв
@Oksan4ik1
@Oksan4ik1 8 днів тому
Огромное спасибо) знакома с технологий, решила обновить знания и очень много вынесла с вашего урока!)
@YauhenKavalchuk
@YauhenKavalchuk 8 днів тому
Пожалуйста
@beegoodb1213
@beegoodb1213 4 місяці тому
Спасибо за труд!
@YauhenKavalchuk
@YauhenKavalchuk 4 місяці тому
Пожалуйста
@user-lx5vv3uu8u
@user-lx5vv3uu8u Рік тому
Благодарю! Заранее ставлю лайк, но смотреть буду позже, как освою базу!)
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@samolevich
@samolevich 11 місяців тому
Очень хорошо, спасибо
@YauhenKavalchuk
@YauhenKavalchuk 11 місяців тому
Всегда пожалуйста
@pavelillich7612
@pavelillich7612 10 місяців тому
Спасибо! Это было здорово!
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
Пожалуйста
@tatianovnafrutti8982
@tatianovnafrutti8982 Рік тому
Супер ! Спасибо!!!!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@Signtone
@Signtone Рік тому
Ооо люблю полные курсы))
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@user-kf9ff3no2t
@user-kf9ff3no2t 4 місяці тому
Очень классно всё расписано
@YauhenKavalchuk
@YauhenKavalchuk 4 місяці тому
Спасибо
@user-yl6mi9sq4q
@user-yl6mi9sq4q 8 місяців тому
Топ! Изучил фреймворк за 2 дня. Всем советую
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
Спасибо за отзыв
@frankshepherd5953
@frankshepherd5953 Рік тому
Курс просто пушка!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо
@user-pw9zk4hn1q
@user-pw9zk4hn1q 2 місяці тому
Честно это талант, все бы такие подробные видео
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
Спасибо
@MrLgbk
@MrLgbk Місяць тому
Согласен с крутостью подачи маериала. Спасибо!
@YauhenKavalchuk
@YauhenKavalchuk Місяць тому
Пожалуйста
@rudakov_ilya
@rudakov_ilya Рік тому
Лайк не глядя😍
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Благодарю
@andranikhambardzumyan6264
@andranikhambardzumyan6264 6 місяців тому
Великолепно!
@YauhenKavalchuk
@YauhenKavalchuk 6 місяців тому
Спасибо за отзыв
@mixfix86
@mixfix86 Рік тому
спасибо!
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-es2vr3cv1v
@user-es2vr3cv1v Рік тому
Бро, поздравляю тебя с 100к. Смотрю твой канал уже 4 года, вспоминаю первые видео по js, ты уже наверно super senior спустя столько лет
@HitLowww
@HitLowww Місяць тому
Очень крутой курс! Несправедливо малое количество просмотров и лайков. У Вас талант.
@YauhenKavalchuk
@YauhenKavalchuk Місяць тому
Спасибо большое за поддержку
@user-zs5iw1tw3w
@user-zs5iw1tw3w Рік тому
Очень крутой контент
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо
@tazorprod.934
@tazorprod.934 8 місяців тому
Tailwind в связке с реактом просто пушка
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
👍
@user-rs4hf7ud2e
@user-rs4hf7ud2e Рік тому
Спасибо
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-oz6xm9zp9d
@user-oz6xm9zp9d Рік тому
когда круто, тогда круто. Лайк подписка
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@uzver3787
@uzver3787 Рік тому
Хороший курс. Спасибо! Единственное пожелание, немножко подкрутить звук, чтобы меньше низов было, гула.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-zu3ld8is4y
@user-zu3ld8is4y 3 місяці тому
благодарю
@YauhenKavalchuk
@YauhenKavalchuk 3 місяці тому
Всегда пожалуйста
@FelAA
@FelAA Місяць тому
Спасибо за видео. На мой взгляд стоило рассказать про изменения дочерних элементов, например, когда меняется стиль вложенных элементов при наведении мыши на родителя
@YauhenKavalchuk
@YauhenKavalchuk Місяць тому
Пожалуйста
@chkpg4317
@chkpg4317 11 місяців тому
спасибо
@YauhenKavalchuk
@YauhenKavalchuk 11 місяців тому
Всегда пожалуйста
@alexeycherkasov1144
@alexeycherkasov1144 Рік тому
Чтобы не использовать сайт Lorem Ipsum можно юзать встроенную возможность Emmet: например, lorem10 выведет текст-рыбу из 10 слов
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Да я знаю, только мне один и тот же текст генерился, а я хотел разный, что бы максимально на правду было похоже)
@facts_from_scratch
@facts_from_scratch Рік тому
или lorem*3
@xcvb4
@xcvb4 Рік тому
Спасибо за подгон , как раз начал учить tailwind.
@NeGovoriNet
@NeGovoriNet Рік тому
сочувствую
@xcvb4
@xcvb4 Рік тому
@@NeGovoriNet что такое?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@user-lz4ob7gj4p
@user-lz4ob7gj4p Рік тому
Только начал смотреть, как обычно ВСЁ СУПЕР! СПАСИБО! Можно в двух словах - чем Тайлвинд лучше/круче Бустрапа?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Он не лучше и не хуже. Это просто другой подход, в основе которого лежит методология AtomicCSS, в то время как bootstrap предлагает набор готовых компонентов с возможностью кастомизации
@Vladimir-yh2dl
@Vladimir-yh2dl Рік тому
урок классный, спасибо большое ! было бы здорово ещё узнать как удалить не использованные стили
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Я в первом уроке говорил, что неиспользуемые стили удаляются автоматически. То есть ваш итоговый, генерируемый CSS содержит только то, что реально используется
@user-rk7dm1xm3r
@user-rk7dm1xm3r 8 місяців тому
Просто лучше никто бы и не снял. После Tailwind обычный css - слишком правильный и консервативный, это как говорить "Здравствуйте уважаемые господа", когда Tailwind предлагает говорить просто - "Всем привет". Супер. Спасибо))
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
Всегда пожалуйста
@SerhiiNesterov
@SerhiiNesterov Рік тому
Спасибо ❤
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Пожалуйста
@TheTurbobarbitura
@TheTurbobarbitura Рік тому
Если бы ещё разобрал настройку stylelint для tailwind, было бы сверх шикарно=)
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
🤷‍♂️
@artem_ib
@artem_ib Рік тому
Подход Тайлвинд из за кучи классов очень отталкивает, но они этот недостаток превратили в свою фишку. Мне тоже такой подход не нравится - но сам по себе фрейм лёгкий, в целом понятный, очень понравился подход внесения изменений через конфиг. Имеет право на жизнь - но думаю что сейчас он хайпит, затем он затеряется, а бутстрап будет живее всех живых при своих недостатках. Для общего развития стоит выучить - тем более для этого достаточно посмотреть это видео и потыкать вечер самому
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
👍
@drino955jug3
@drino955jug3 8 місяців тому
тем временем сейчас tailwind в самом разагре хайпаахапхахп
@artem_ib
@artem_ib 8 місяців тому
@@drino955jug3 ну хайпует) в целом мнение не поменял, бесят когда много классов, с другой стороны это наименьшая проблема с которой я сталкиваюсь))
@gfhitdxaahn
@gfhitdxaahn 6 місяців тому
@@drino955jug3 пока нет, это еще не предел
@Leon-rv2zm
@Leon-rv2zm Рік тому
Спасибо за туториал. Полезно и познавательно, но немного нудновато. Смотрел стоя, чтоб не спать Ставлю лайк
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Можно увеличить скорость
@almichael34
@almichael34 5 місяців тому
Если повторять код за ведущим, то скорость вполне нормальная, иногда даже не успеваю, приходится перематывать )
@aleksandrkobelev8868
@aleksandrkobelev8868 Рік тому
Если у кого как и у меня не работает yarn то нужно его установить npm install -g yarn, а затем запустить VS code от имени администратора и запустить такое Set-ExecutionPolicy RemoteSigned
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Что-то как-то сложно. Никогда ничего подобного не делал. Обычно достаточно просто скачать yarn, или просто использовать npm
@BIS84oxen
@BIS84oxen 11 місяців тому
@@YauhenKavalchuk Это потому, что у Вас не винда ))
@Ianarkhipov
@Ianarkhipov 3 місяці тому
а можно просто не использовать yarn а обойтись npm. У меня с установленным yarn была потом проблема с angular-приложением, в котором даже yarn не был задействован, пришлось лезть в корень машины и копаться в скрытых файлах
@promoabys
@promoabys Рік тому
Евгений, приветствую Хотел бы услышать вашу оценку по рациональности использования тейлвинда в работе? Добавлю как использую его я. Я его использую как способ быстрой кастомизации композиционных компонент, сохраняя там и основной класс. Не использую тейлвинд в базовых презентационных компонентах, чтобы не плодить лишних зависимостей. Для больших проектов подходит не очень, а для того чтобы сверстать пару страничек вполне. Спасибо за такой большой обзорный ролик
@diatm1506
@diatm1506 Рік тому
Как в нём анимации делать и ховеры?)))
@promoabys
@promoabys Рік тому
@@diatm1506 ховеры есть и анимация какая-то тоже. Не сверх слохсложная, но что-то можно.
@dobramorda9818
@dobramorda9818 11 місяців тому
@@diatm1506 можно через бэм уникальные классы давать, заливать основной функционал через tailwind @apply и после писать css свойства. И кастомизация будет и обобщенность стилистики по проекту. Было бы круто ещё использовать как если бы это был какой то sass, то бишь делать некий extend класса общего для ряда элементов.
@romanmr5719
@romanmr5719 4 місяці тому
большое спасибо за данный курс, очень помогло) я бы хотел уточнить, это нормально, что у меня, когда появился styles.css и main.css они были сразу в postcss, а у тебя они в css. мне менять надо на css, или нет?
@YauhenKavalchuk
@YauhenKavalchuk 4 місяці тому
Можно не менять
@sharpsss7666
@sharpsss7666 8 місяців тому
чуть душновато но спс энивэй, в идеале чуть юмора добавить где то как то или паузы да выйдет дольше но восприниматься проще будет)
@YauhenKavalchuk
@YauhenKavalchuk 7 місяців тому
Подумаю….
@user-kt7fm6ow4p
@user-kt7fm6ow4p 2 місяці тому
Спасибо за ролик, все понятно изложено. По-моему мнению, Tailwind - полная лабуда, не понимаю, почему популярен
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
😁🤷‍♂️
@user-fg9ps9tk6i
@user-fg9ps9tk6i 8 місяців тому
Здравствуйте! У Вас начиная с ветки lesson_10 в секции banners остался лишний класс (bg-gradient-to-tr), который Вы забыли удалить: . На отображение, конечно, не влияет.
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
Спасибо за отзыв. Ну забыл и забыл) главное ничего не ломается)
@user-fg9ps9tk6i
@user-fg9ps9tk6i 8 місяців тому
@@YauhenKavalchuk всегда пожалуйста, вернусь из деревни, где нет интернета, ещё отзывов напишу :)
@ilyamishutka6731
@ilyamishutka6731 Рік тому
Такой вопрос, а не могли бы вы сделать курс по gulp или webpack ? Ну или отдельное видео?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Возможно в этом году сделаю…
@ilyamishutka6731
@ilyamishutka6731 Рік тому
@@YauhenKavalchuk я буду вам очень благодарен)
@user-pm3ms3kd9h
@user-pm3ms3kd9h Місяць тому
спасибо за хорошую подачу.! Так и не смог найти причину почему на 'randomuser' фотках не применяются класс на скругление на размер, фотки и с папки вставлял ни в какую не хочет применяется тоже .
@YauhenKavalchuk
@YauhenKavalchuk Місяць тому
Пожалуйста
@arinqwerty
@arinqwerty Місяць тому
Спасибо за курс! Очень наглядно и понятно.💙 Но я не понимаю ЗАЧЕМ? ПОЧЕМУ люди это используют? На CSS коде килобайты экономят? Больше плюсов не вижу! Ещё понимаю для мелких пет-проектов и админок - ок, время сэкономить. Но ведь это кошмар, мне отвратно от кол-ва классов на элементе! Увидеть ЭТО на проекте нормального размера, с нестандартным дизайном, лично мне, больно! БОЛЬНО глазам! Что заставляет людей выбирать это!? Особенно в пару с реактом, при возможностях компонентного подхода и изоляции стилей. Объясните мне: зачем вы это делаете? Как мне теперь с этим жить!? Как мне жить с проектом на tailwind!? Как смириться с этой болью и раздражением? Мне мало того, что читать, мне писать эти простыни классов придётся! 😭Я обожаю вёрстку и задачи по ней, но с tailwind я буду всеми правдами и неправдами от них отнекиваться. P.S. Страшно! Очень страшно!
@YauhenKavalchuk
@YauhenKavalchuk Місяць тому
Спасибо за отзыв. Касаемо вашего комментария - отчасти согласен
@adeven2226
@adeven2226 9 місяців тому
вопрос зачем оборачивать div внутрь другого div'а? например когда создавался footer сайта 25:49
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
Возможно, это избыточно. Но вообще, такие оборачивания могут использоваться для правильного центрирования и позиционирования
@a.riwall
@a.riwall 4 місяці тому
если что lorem можно генерировать в vs code просто пишешь Lorem10 (10 это число слов)
@YauhenKavalchuk
@YauhenKavalchuk 4 місяці тому
Спасибо за уточнение
@jet4904
@jet4904 Рік тому
Лучший чел,желаю тебе всего наилучшего
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо
@webmechanic-kz
@webmechanic-kz 2 місяці тому
Да оно конечно хорошо но какой вес будет иметь CSS после компиляций и насколько оно удобно если делаешь вёрстку по шаблону?
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
Вес минимальный. Что касается вёрстки - шаблон должен быть сделан с учётом специфики tailwind. В противном случае придётся потратить время на создание кастомного конфигурационного файла
@KomanDante999
@KomanDante999 9 місяців тому
товарищи, у кого-то возникала проблема с плагином Tailwind и lifeserver? пока запущен lifeserver - подсказки не работают. Как только выключаешь - норм все работает
@YauhenKavalchuk
@YauhenKavalchuk 9 місяців тому
🤔🤷‍♂️
@KomanDante999
@KomanDante999 9 місяців тому
@@YauhenKavalchuk А, нашел в чем прикол, Live Server ни при чем. Когда создаю атрибут class курсор автоматически помещается внутрь "|" и подсказки не выводятся. Если щелкнуть в другое место а потом опять вернуться в class, то подсказки начинают работать. Странное явление, может с эммитом конфликтует? Я все плагины повырубал лишние, но вот такой глюк.
@nagorny19
@nagorny19 Рік тому
Следующее видео: "Prettier. Полный курс" ;)
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Маловероятно
@kirillpavlovskii8342
@kirillpavlovskii8342 7 місяців тому
почему то при подсказке класса нету справа информации как например где text-3xl и справа инфо сколько это в rem и в px
@YauhenKavalchuk
@YauhenKavalchuk 7 місяців тому
🤔🤷‍♂️
@pdidevich
@pdidevich 5 місяців тому
Ощущение, что они переизобрели атрибут style, настолько атомарные классы используются. А потом придумали директивы, чтоб получились обычные классы ) За видео спасибо - помогло быстро понять, в чем суть фреймворка.
@YauhenKavalchuk
@YauhenKavalchuk 5 місяців тому
Пожалуйста
@alikhanzakonov5575
@alikhanzakonov5575 3 місяці тому
Просто мои мысли прочитал, брат)
@user-un7pe4mn1l
@user-un7pe4mn1l Рік тому
Подскажите, почему не работает ни один цвет бордера? li>Home
@user-un7pe4mn1l
@user-un7pe4mn1l Рік тому
Многих цветов просто нет в public/style.css
@user-un7pe4mn1l
@user-un7pe4mn1l Рік тому
не могу найти команду подключения доп стилей в style.css Подскажите какэ то сделать) ведь в будущем на проектах нужны будете не только стили, предлагаемые в стандартном импорте tailwind
@simpsomk
@simpsomk Рік тому
Почему в разделе картинки, ты используешь тег ссылки как контейнер для других элементов? Просто что бы не создавать лишний див или здесь еще есть какая-то причина? Почему фоном работали через тег имг, а не через св-во бг на контейнер?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Ссылка - потому что каждый блок кликабельный и потенциально ведёт на статью. А картинка в виде тэга, что бы показать как tailwind обрабатывает такие случае. Да и вообще предполагается, что подобный шаблон будет изменяться через CMS. И если путь до картинки в html тэге через админку поменять - не проблема, то как вы измените картинку (через админку) которая определена в CSS
@simpsomk
@simpsomk Рік тому
@@YauhenKavalchuk спасибо за ответ!)
@maksimych98
@maksimych98 Рік тому
Что за тема в visual studio code на видео? Буду благодарен, если ответите
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Material Gecko
@maksimych98
@maksimych98 Рік тому
@@YauhenKavalchuk Спасибо огромное. Удачи)
@user-bk6xu3ue3q
@user-bk6xu3ue3q 3 місяці тому
есть что нибудь про tailwind-merge и clsx?
@YauhenKavalchuk
@YauhenKavalchuk 3 місяці тому
Нет
@inilim
@inilim Рік тому
tailwind не может самостоятельно сгенерировать apply для всех классов и подставить после сборки?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Неа
@user-pw9zk4hn1q
@user-pw9zk4hn1q 2 місяці тому
Евгений помогите пожалуйста, Как извлечь все классы и свойства сетки grid из Tailwind CSS для использования в своем собственном файле стилей?
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
Если честно не знаю( не пробовал такое
@dimasnytin
@dimasnytin Рік тому
Добрый день! У меня проблема, делаю проект для портфолио и для css использую данный фреймворк, проект на React. И что интересно падает с ошибкой которая указывает на @tailwind base. Подскажите пожалуйста, что это может быть?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Не видя код и ошибку, маловероятно что чем-то смогу помочь
@user-sp8ty2ol8m
@user-sp8ty2ol8m 6 місяців тому
У меня не работаю директивы чтобы я не делал :( решение с GitHub не помогло , сначала показывалось , что директива неизвестна , я вроде пофиксил эту проблему , но даже когда она не отображается ничего не работает...
@YauhenKavalchuk
@YauhenKavalchuk 6 місяців тому
🤔 не видя кода трудно что-то подсказать
@user-jc7qz6oy2q
@user-jc7qz6oy2q Рік тому
В доках написано наоборот, apply использовать для мелких вещей.
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
🤔
@andreyli8634
@andreyli8634 10 місяців тому
Странно, скачал второй урок из Гитхаба, установил зависимости, и запустил с liveserver - tailwind стили не отражаются. Похоже tailwind не распознает. Что это может быть?
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
Вижу по следующим комментариям - запустилось
@MSiL_UA
@MSiL_UA 11 місяців тому
52:34 , объясните пожалуйста каким образом в секунду заменяются все повторяющиеся стили
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
postcss обрабатывает это
@MSiL_UA
@MSiL_UA 10 місяців тому
@@YauhenKavalchuk спасибо за ответ и урок!)
@jekapan481
@jekapan481 Рік тому
Почему, когда я пишу стили связанные с цветом, то у меня не появляется рядом квадратик показующий 😊цвет? Раньше был, а сейчас пропал
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Если раньше было, а теперь нету, то вообще понятия не имею, попробуйте переустановить плагин
@user-ih9ir5ir2x
@user-ih9ir5ir2x Рік тому
За разбор спасибо! Но html со всеми этими классами просто уродливый. Не понимаю, почему css писать сложнее или...? Стилей на простую кнопку может быть уйма. Естественное желание спрятать это все в отдельный файл. А стилизация по бэм?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Спасибо за отзыв)
@user-vo7sm5sz7p
@user-vo7sm5sz7p Рік тому
Это и есть эталон уродства. Мы в компании когда-то давно наступили в таилвинд, до сих пор отмыться не можем. Преимуществ у него минимум, но при этом он тянет огромный файл со стилями в проект и превращает хтмл в нечитаемое нечто
@knowledgedose1956
@knowledgedose1956 10 місяців тому
​@@user-vo7sm5sz7ptailwind, по крайней мере новый, не добавляет всю библиотеку в бандл, а только то, что используется в проекте. Насчёт пачек классов, да, это очевидный минус, но можно выносить часто переиспользуемые классы и тд.
@user-kt7fm6ow4p
@user-kt7fm6ow4p 2 місяці тому
49:51 смеюсь, тайлвинд изобрел обычные классы. "Мы почистили полотно классов"😂
@YauhenKavalchuk
@YauhenKavalchuk 2 місяці тому
😁
@muratkudainetov4415
@muratkudainetov4415 Рік тому
к 36 минуте содержание html страницы зацвела зеленью из классов. Прямо вижу, как горит одно место у фронта на таком проекте. Прикиньте, когда вместо того, чтобы работать с компонентами, он сидит и ищет нужное место среди этих 100500 классов. А если это еще jsx, охохохо. Спасибо, я дальше на sass посижу. Tailwind похоже очередной хайп на годик
@stormbraker637
@stormbraker637 6 місяців тому
Ага уже 3 года как годик, и заказчики все больше внимания обращают
@synglrty
@synglrty Рік тому
Подскажите как исправить ошибки, в webstorm показано много ошибок и варнингов в styles.css файле
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
В одном из видео упомянул это, нужно дополнительно доустановить плагин, этотлегко гуглится
@synglrty
@synglrty Рік тому
@@YauhenKavalchuk гуглил, все равно не могу исправить, есть подсказка стилей но сами стили не применяются, ну ладно разберусь как-нибудь я надеюсь
@simpsomk
@simpsomk Рік тому
Для чего устанавливали postcss?
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Если я не ошибаюсь, на момент записи по другому не работало, выкидывало ошибку что нужен postcss
@frankshepherd5953
@frankshepherd5953 Рік тому
Вконтакте нельзя перемещаться с помощью TAB, в яндексе сразу видно что болт забили) через раз)
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Получается…(
@user-fd7wz7ib1x
@user-fd7wz7ib1x 9 місяців тому
а я правильно понимаю это в одном видео весь курс ?
@YauhenKavalchuk
@YauhenKavalchuk 9 місяців тому
Да, всё верно
@sozdanie-saytov
@sozdanie-saytov 10 місяців тому
Пока не понял преимущества перед обычными стилями.
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
Здесь нет преимуществ перед обычными стилями. Отталкиваться нужно от потребностей проекта, знаний, ситуации и т.д. где-то применимо одно, где-то другое
@andreyli8634
@andreyli8634 10 місяців тому
ukposts.info/have/v-deo/qodkbI2HmGqWzHU.html С border-transparent hover: border-purple-800 не работает. Кажется что то изменилось в tailwind на 18 июня 2023.
@andreyli8634
@andreyli8634 10 місяців тому
Здесь оказывается пробела не должно быть между hover: и border-purple-800.
@YauhenKavalchuk
@YauhenKavalchuk 10 місяців тому
Ну да, в виде его вроде и нет
@user-hruser
@user-hruser 8 місяців тому
че то с темной темой лажа какая то, я думал будет инверсия перееменной цвета, а тут в ручную ходить ставить классы
@YauhenKavalchuk
@YauhenKavalchuk 8 місяців тому
На самом деле - это очень даже не плохо, т.к. простая инверсия не всегда работает хорошо
@arask6076
@arask6076 Рік тому
мне пишет yarn не распознано и шо делать
@YauhenKavalchuk
@YauhenKavalchuk Рік тому
Установите yarn)
@arask6076
@arask6076 Рік тому
@@YauhenKavalchuk час жизни потрачен в пустую-_-
GADGETS VS HACKS || Random Useful Tools For your child #hacks #gadgets
00:35
船长被天使剪成光头了?#天使 #小丑 #超人不会飞
00:28
超人不会飞
Переглядів 16 млн
Tailwind in 100 Seconds
2:21
Fireship
Переглядів 723 тис.
React и Next js убивают фронтенд!
9:11
Миша Ларченко
Переглядів 39 тис.
What is the difference between Float, Flexbox and Grid CSS?
10:06
Анна Блок
Переглядів 216 тис.