Знакомство с Tailwind CSS на примере проекта с FrontendMentor

แชร์
ฝัง
  • เผยแพร่เมื่อ 22 ต.ค. 2024

ความคิดเห็น • 63

  • @vadim_romanov
    @vadim_romanov 4 หลายเดือนก่อน +7

    спасибо большое Михаил, у вас на канале знакомлюсь со всеми нужными технологиями

  • @areyousleeping7054
    @areyousleeping7054 4 หลายเดือนก่อน +7

    Несколько месяцев назад начал пользоваться Tailwind. Сначала ужаснулся названиям классов, но очень быстро привык. Теперь стилизовать ни на чем другом кроме не хочется)

  • @_kie
    @_kie 4 หลายเดือนก่อน +1

    Спасибо, Михаил. Отлично провёл воскресенье благодаря вашему уроку! )

  • @kotegav7798
    @kotegav7798 4 หลายเดือนก่อน +2

    Спасибо! Уже пользовался, сейчас ещё раз пообщался и буду молиться, чтобы никогда не пригодилось с этим работать всерьёз С моей манией чистого кода, уже реакт иногда сводит с ума) Тейлвинд вызывает припадки эпилепсии))

  • @ragoke
    @ragoke 4 หลายเดือนก่อน

    Вы как будто почувствовали, что мне нужен гайд по попутному ветру. Очень вовремя, спасибо большое.

    • @mishanep
      @mishanep  4 หลายเดือนก่อน

      Вероятно так и было.

  • @DimitarRad
    @DimitarRad 4 หลายเดือนก่อน +7

    Раньше мы писали стили в css, а теперь накинули js, чтобы писать стили И в html, И в js, И в css... Стоит ли говорить про необходимость учить новые: синтаксис, дерективы, конфигурации? Одним словом - ФронтЭНД

  • @alfatgilman6312
    @alfatgilman6312 4 หลายเดือนก่อน

    Благодарю за очень хороший урок то tailwind!!! Теперь многое стало понятнее и легче в применении👍👍👍

  • @DanilGoncharov-tl2cm
    @DanilGoncharov-tl2cm 2 หลายเดือนก่อน

    Спасибо большое, материал отлично подошел для вкатывания в проект

  • @2Extremum
    @2Extremum 4 หลายเดือนก่อน +5

    Сначала писали инлайн стили. Потом додумались что это боль и страдания, договорились что инлайн стили не пишут. Но потом выпустили Тайлвинд, который снова пишет инлайн стили, только в виде классов. Но лапша получается не меньше, а то и больше. CSS переменные придумали, SASS отлично работает во всех фреймворках и отдельно, но нет, будем снова засирать html...

    • @alext5030
      @alext5030 4 หลายเดือนก่อน

      Не поверите, но бутстрап всегда был очень популярным за пределами пост-ССCР. Это здесь образовался какой-то заповедник "верстальщиков". А там как-то очень по-другому все развивалось.

    • @2Extremum
      @2Extremum 4 หลายเดือนก่อน

      @@alext5030 Не поверите, но я как раз далеко за пределами пост-ссср и живу и работаю. И бутстрап дает базовые классы для основы, но не вешает гроздья классов в несколько строк на отображения и поведения.

    • @2Extremum
      @2Extremum 4 หลายเดือนก่อน

      @@alext5030 Странно работают ответы на ютуб, предыдущий скрыл. Но если коротко - я и сам давно очень далеко живу и работаю за пределами пост-ссср, а сравнивать бутстрап и тайлвинд не корректно, первый не дает лапши классов в несколько строк длинной, указывая и отображения и состояния. Популярность тайлвинда в первую очередь - фронтендеры не учат CSS и сопутствующие (препроцессоры и т.п.), пользуясь готовым и порой не понимая как это работает.

    • @gregdmitriev2784
      @gregdmitriev2784 5 วันที่ผ่านมา

      Как старовер староверу - понимаю, согласен )

  • @RemakeTeamTV
    @RemakeTeamTV 25 วันที่ผ่านมา

    Спасибо тебе за контент

  • @VolodkaBobovich
    @VolodkaBobovich 4 หลายเดือนก่อน +1

    Очень полезное видео, спасибо!

  • @РоманНарожнов
    @РоманНарожнов 4 หลายเดือนก่อน

    Спасибо!
    Уже был опыт использования, но посмотрел с удовольствием!

  • @АндрейФилиппов-з3и
    @АндрейФилиппов-з3и 4 หลายเดือนก่อน

    Большое спасибо за полезный контент!

  • @NeoCoding
    @NeoCoding 4 หลายเดือนก่อน

    Большое спасибо за разбор фремворка.
    Моё ненужное мнение - всякие вещи которые делал Михаил абсолютно с той же скоростью можно делать в стандартном css. Смысла вообще не вижу тратить время на изучение синтаксиса.
    Библы там полезны где готовые сложные компоненты типа аккордеона, всякие сложные инпуты и тп чтобы взять и вставить и быстро кастомизировать.
    Но я был худшего мнения о Тайлвинд, так как не знал что можно вынести уродские стили через апплай. Но всё же, предпочел бы пользоваться библиотекой без лишней шелухи, пока такой не встречал.
    Что-то в этом направлении mui base делает. если встречали буду рад слышать. Спасибо 👍

  • @ar13tz
    @ar13tz 4 หลายเดือนก่อน

    При работе с React была проблема с длинными строками в классах
    npm install clsx
    помогает с длинными строками в классах
    Можно разбивать классы на отдельные сгруппированные блоки и далее по разным строчкам разносить

  • @bebeto123g
    @bebeto123g 4 หลายเดือนก่อน +1

    Не пользовал никогда Tailwind если что, и тема, вероятно, холиварная, но первая мысль была "прикольно", а уже на этапе стилизации компонентов на гриды представил как бы это сделал на реакте в своих проектах - и Tailwind никак в концепцию не вписывается. А вот в старые проекты на каком-нибудь yii2 можно бы было попробовать -_- В любом случае спасибо, допишу в резюме "работа с Tailwind" :Ъ

    • @alext5030
      @alext5030 4 หลายเดือนก่อน +1

      Популярность именно tailwind связана с его активным использованием в SPA, а не в обыном HTML/CSS/JS(JQ)

  • @mansurv8782
    @mansurv8782 4 หลายเดือนก่อน

    Спасибо, все четко и понятно

  • @d_r_robot
    @d_r_robot 4 หลายเดือนก่อน

    Спасибо, топ контент! Максимум пользы.

  • @MrSunTrope
    @MrSunTrope 4 หลายเดือนก่อน

    Миша сделай пожалуйста видео про правильную семантику тегов

  • @space8143
    @space8143 4 หลายเดือนก่อน

    Отлично!

  • @nurbekerkulov8307
    @nurbekerkulov8307 4 หลายเดือนก่อน

    28:05 здесь кавычки добавляются через after и before чтобы рассказать про возможности tailwindcss или принято через css это делать ?

    • @mishanep
      @mishanep  4 หลายเดือนก่อน +1

      Здесь кавычки скорее играют декоративную роль. В таких случаях принято делать это через стили.

  • @sashaBejenari
    @sashaBejenari 4 หลายเดือนก่อน

    Thank you!😇

  • @lesharper8751
    @lesharper8751 4 หลายเดือนก่อน

    Сделай пожалуйста видео про сигналы и если знаешь, раскрой ответы на эти вопросы:
    Какие амбиции у технологии сигналов?
    Стоит ли использовать сигналы, вместе хуков, на постоянной основе?
    Сигналы в Solid.js vs сигналы из Preact в нем же или в React, если это не одно и тоже

    • @mishanep
      @mishanep  4 หลายเดือนก่อน

      В Реакте нет сигналов из коробки, насколько я знаю. Preact'ом никогда не пользовался.

    • @lesharper8751
      @lesharper8751 4 หลายเดือนก่อน

      @@mishanep В Preact как я понял все на отдельных изолированных модулях и устанавливаются они отдельно, уже много видео есть про них, в реакте и то, как сильно они улучшают перфоманс. Хотелось бы от тебя увидеть, что то на эту тему

  • @Dreamer_78
    @Dreamer_78 4 หลายเดือนก่อน

    npm run build все стили пропадают у меня! как правильно сделать? спасибо вам за урок!

  • @protonys
    @protonys 4 หลายเดือนก่อน

    Хотелось бы небольшой ролик по установке tailwind в html проект

    • @mishanep
      @mishanep  4 หลายเดือนก่อน +1

      У меня как раз html проект, вы можете скопировать мои настройки. Ссылка на репозиторий есть в описании.

  • @SerheyLoroton
    @SerheyLoroton 2 หลายเดือนก่อน

    Что за браузер используется в видео подскажите пожалуйста???

    • @mishanep
      @mishanep  2 หลายเดือนก่อน

      Arc

  • @artemkyslyi1358
    @artemkyslyi1358 4 หลายเดือนก่อน +2

    классы очень длинные выходят, для крупных проектов боль

  • @proletarian
    @proletarian 4 หลายเดือนก่อน

    не плохо если бы плагин для prettier мог переносить классы на новую строку, как то в столбик сортировать, потому что иногда классы такие длинные что появляется горизонтальный скролл

    • @mishanep
      @mishanep  4 หลายเดือนก่อน

      Перенос строк в редакторе можно отключить, чтобы горизонтального скролла не было.

    • @areyousleeping7054
      @areyousleeping7054 4 หลายเดือนก่อน

      Я обычно сам вручную переношу.

  • @ShoazizJabborov-y5e
    @ShoazizJabborov-y5e 4 หลายเดือนก่อน

    Thanks 👍👍👍👍

  • @wildcat4435
    @wildcat4435 4 หลายเดือนก่อน +7

    Что за бум тайлвинда в последние дни. Сам изучил и параллельно появились и появляются видео. Коллективное помешательство что-ли)

    • @reverie3746
      @reverie3746 4 หลายเดือนก่อน

      Он становится оч популярен на западе, поэтому все больше спрос

    • @OTKA3
      @OTKA3 4 หลายเดือนก่อน +1

      У него бум еще был когда я учился больше года назад

    • @dmytroprokoptsov7185
      @dmytroprokoptsov7185 4 หลายเดือนก่อน

      Tailwind очень удобен, поэтому и популярен

    • @alext5030
      @alext5030 4 หลายเดือนก่อน

      На "западе" всегда было НЕ очень модно тартить много времени на то, что у нас называется "версткой". Это так в т.ч. и потому, что такое являние, как "верстальщик" за пределами пост-СССР фактически отсутствует. Почему так - не знаю.
      AFAIK возиться с этим там никто не хочет. Частично с этим связан спрос на "верстальщиков" из пост-СССР на всяких апворках. Это для тех, кто хочет, чтобы сайт был НЕ столько функциональным, сколько представлял бы из себя "тест на эпилепсию".

    • @dmytroprokoptsov7185
      @dmytroprokoptsov7185 4 หลายเดือนก่อน

      @@alext5030 эм... Tailwind - это тот же css, только удобней. Без знаний css и понимания построения Flex/Grid лейаутов не получится нормально применить Tailwind. Грубо говоря, это просто набор утилитных классов и все. Плюс оптимизации бандла, когда несколько девов пишут одни и те же стили, типа margin-bottom: 2rem; в каждом компоненте.
      А так Tailwind это все за тебя разрулит и добавит в бандл всего один класс с нужным правилом.
      К тому же в TW можешь спокойно писать кастомный css, в бандл пойдёт только то, что использовал.
      А вообще, не нравится инструмент - просто не используйте :)

  • @CJIu3eHb
    @CJIu3eHb 4 หลายเดือนก่อน

    Скорее всего, там не section подошел бы, а article.

  • @Deadslacker
    @Deadslacker 4 หลายเดือนก่อน +13

    Я пробовал в крупных проектах делать со сложным дизайном. Это лютейшее говно. На нем можно разве что todo лист себе делать. Для того, чтобы прочитать классы и 5 мониторов в ряд не хватит.

    • @stnost6897
      @stnost6897 4 หลายเดือนก่อน +1

      100%

    • @alext5030
      @alext5030 4 หลายเดือนก่อน

      Их, вообще-то, в столбик выстраивают те, кто привык всякими бутсрапами и т.п. штуками всяким пользоваться.
      Все там (и в tailwind) нормально читается. К тому же, 'nj позволяет не тартить много времени на верстку. Далеко не все программисты интересуются версткой на высоком уровне, а среди классических full-stack (PHP + что-то) таких вообще единицы.
      Не поверите, но многие веб-программисты считают "верстку" - лютой рутиной, которую нужно, как прием медикаментов, просто как-то пережить и забыть.
      P.S: Да, строку классов тоже можно в столбик сложить (ну, типа Enter и... магия!!!) - это? вообще-то, почти автоматически делают люди, привыкшие к таким штукам, как Bootstrap.

    • @CJIu3eHb
      @CJIu3eHb 4 หลายเดือนก่อน +1

      Мне кажется он больше для простых вещей / прототипирования. Когда надо по-быстрому что-то сварганить и потом забить.

    • @menelaus365
      @menelaus365 2 หลายเดือนก่อน

      ​​@@alext5030 на php фуллстек пишут? 😂

  • @AZL_YUSKA_23
    @AZL_YUSKA_23 4 หลายเดือนก่อน

    ❤❤❤❤ G

  • @biLLie_wiLLie
    @biLLie_wiLLie 4 หลายเดือนก่อน

    18:15 Почему @tailwind и @apply подчеркиваются?

    • @mishanep
      @mishanep  4 หลายเดือนก่อน +1

      Потому что это невалидный CSS :)

  • @treXXXter
    @treXXXter 4 หลายเดือนก่อน +2

    Правильно ли я понял, что tailwind - как расширенный bootstrap ?

    • @whoowhoohow
      @whoowhoohow 4 หลายเดือนก่อน +2

      нет

    • @wildcat4435
      @wildcat4435 4 หลายเดือนก่อน +1

      bootstrap это как кулинария, а tailwind химия, в нем нет предзаданных стилей для компонентов, собираешь по кусочкам из классов

    • @treXXXter
      @treXXXter 4 หลายเดือนก่อน

      @@wildcat4435 🤝

  • @gregdmitriev2784
    @gregdmitriev2784 5 วันที่ผ่านมา

    Имена классов в CSS - вообще не проблема. SCSS+module.
    По рукам тому разрабу, который написал tailwind ))) Ну ладно если бы ЭТО решало проблемы производительности сайта/приложения, а так ... Писать инлайновые стили просто потому, что лень создать отдельный файл для стилей - ну такое. Говнище полное. Разве что чисто для своего пет-проекта. А так - неа. На настройку этого говна, чтобы как-то сократить ту инлайновую писанину, уходит больше времени, чем на написание самих стилей. Так как он ускоряет работу ???
    Блин, для чего вообще нужна архитектура проектов ? - накидал всё в один файл, и так сойдёт ! Главное быстро ! А завтра, когда твой код станет легаси, сядет за него другой разраб, чтобы что-то дабавить или изменить - капец головняк. Итак практически все говнокодим, так ещё и в стилях писать... ЭТО ?! )))
    Пока ты не сеньор/тимлид/техлид - не выбирать, сказали "пишем с таким стеком" - берёшь и пишешь. Поэтому и такое г...о придётся юзать 🤷‍♂
    Да, я старовер)) очень негативно отношусь к слабым попыткам создать очередной велосипед. Но Вы так круто проповедуете "евангелие по Tailwind", что вот-вот и уверую )))
    Спасибо, Михаил, как всегда всё по полочкам 👍