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

Рет қаралды 14,208

28 күн бұрын

Мини-курс по библиотеке Tailwind CSS с вёрсткой проекта. Разбираемся на примере использования в обычном HTML без фреймворков. Настраиваем свои цвета в Tailwind конфиге, смотрим как пользоваться готовыми CSS классами и создавать на их основе красивые компоненты.
Документация Tailwind CSS tailwindcss.com
Плагины из видео
marketplace.visualstudio.com/...
marketplace.visualstudio.com/...
github.com/tailwindlabs/prett...
Код из видео github.com/michey85/with-tail...
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Пікірлер: 56

@vadim_romanov 27 күн бұрын

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

@areyousleeping7054 27 күн бұрын

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

@_kie 21 күн бұрын

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

@DimitarRad 26 күн бұрын

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

@kotegav7798 23 күн бұрын

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

@user-nj9yu4dd8p 26 күн бұрын

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

@ragoke 26 күн бұрын

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

@mishanep 26 күн бұрын

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

@alfatgilman6312 26 күн бұрын

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

@user-ds4ik5zu9n 25 күн бұрын

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

@mansurv8782 27 күн бұрын

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

@user-nh6wb3op5j 21 күн бұрын

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

@NeoCoding 16 күн бұрын

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

@d_r_robot 26 күн бұрын

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

@2Extremum 26 күн бұрын

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

@alext5030 25 күн бұрын

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

@2Extremum 25 күн бұрын

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

@2Extremum 23 күн бұрын

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

@space8143 19 күн бұрын

Отлично!

@bebeto123g 26 күн бұрын

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

@alext5030 25 күн бұрын

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

@sashaBejenari 25 күн бұрын

Thank you!😇

@MrSunTrope 11 күн бұрын

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

@artemkyslyi1358 27 күн бұрын

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

@user-kj1jb7zn6k 26 күн бұрын

Thanks 👍👍👍👍

@Dreamer_78 Күн бұрын

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

@nurbekerkulov8307 13 күн бұрын

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

@mishanep 13 күн бұрын

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

@ar13tz 26 күн бұрын

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

@user-ko7cm1te4l 27 күн бұрын

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

@whoowhoohow 27 күн бұрын

нет

@wildcat4435 27 күн бұрын

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

@user-ko7cm1te4l 27 күн бұрын

@@wildcat4435 🤝

@CJIu3eHb 22 күн бұрын

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

@protonys 26 күн бұрын

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

@mishanep 26 күн бұрын

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

@lesharper8751 27 күн бұрын

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

@mishanep 27 күн бұрын

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

@lesharper8751 27 күн бұрын

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

@wildcat4435 27 күн бұрын

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

@reverie3746 27 күн бұрын

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

@OTKA3 27 күн бұрын

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

@dmytroprokoptsov7185 26 күн бұрын

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

@alext5030 25 күн бұрын

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

@dmytroprokoptsov7185 25 күн бұрын

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

@AZL_YUSKA_23 16 күн бұрын

❤❤❤❤ G

@proletarian 27 күн бұрын

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

@mishanep 27 күн бұрын

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

@areyousleeping7054 26 күн бұрын

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

@Deadslacker 27 күн бұрын

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

@stnost6897 27 күн бұрын

100%

@alext5030 25 күн бұрын

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

@CJIu3eHb 22 күн бұрын

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