Знакомство с Tailwind CSS на примере проекта с FrontendMentor
HTML-код
- Опубликовано: 27 май 2024
- Мини-курс по библиотеке 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 
Наука
спасибо большое Михаил, у вас на канале знакомлюсь со всеми нужными технологиями
Несколько месяцев назад начал пользоваться Tailwind. Сначала ужаснулся названиям классов, но очень быстро привык. Теперь стилизовать ни на чем другом кроме не хочется)
Спасибо, Михаил. Отлично провёл воскресенье благодаря вашему уроку! )
Раньше мы писали стили в css, а теперь накинули js, чтобы писать стили И в html, И в js, И в css... Стоит ли говорить про необходимость учить новые: синтаксис, дерективы, конфигурации? Одним словом - ФронтЭНД
Благодарю за очень хороший урок то tailwind!!! Теперь многое стало понятнее и легче в применении👍👍👍
Спасибо!
Уже был опыт использования, но посмотрел с удовольствием!
Вы как будто почувствовали, что мне нужен гайд по попутному ветру. Очень вовремя, спасибо большое.
Вероятно так и было.
Очень полезное видео, спасибо!
Отлично!
Большое спасибо за полезный контент!
Спасибо! Уже пользовался, сейчас ещё раз пообщался и буду молиться, чтобы никогда не пригодилось с этим работать всерьёз С моей манией чистого кода, уже реакт иногда сводит с ума) Тейлвинд вызывает припадки эпилепсии))
Спасибо, все четко и понятно
Большое спасибо за разбор фремворка.
Моё ненужное мнение - всякие вещи которые делал Михаил абсолютно с той же скоростью можно делать в стандартном css. Смысла вообще не вижу тратить время на изучение синтаксиса.
Библы там полезны где готовые сложные компоненты типа аккордеона, всякие сложные инпуты и тп чтобы взять и вставить и быстро кастомизировать.
Но я был худшего мнения о Тайлвинд, так как не знал что можно вынести уродские стили через апплай. Но всё же, предпочел бы пользоваться библиотекой без лишней шелухи, пока такой не встречал.
Что-то в этом направлении mui base делает. если встречали буду рад слышать. Спасибо 👍
Спасибо, топ контент! Максимум пользы.
Сначала писали инлайн стили. Потом додумались что это боль и страдания, договорились что инлайн стили не пишут. Но потом выпустили Тайлвинд, который снова пишет инлайн стили, только в виде классов. Но лапша получается не меньше, а то и больше. CSS переменные придумали, SASS отлично работает во всех фреймворках и отдельно, но нет, будем снова засирать html...
Не поверите, но бутстрап всегда был очень популярным за пределами пост-ССCР. Это здесь образовался какой-то заповедник "верстальщиков". А там как-то очень по-другому все развивалось.
@@alext5030 Не поверите, но я как раз далеко за пределами пост-ссср и живу и работаю. И бутстрап дает базовые классы для основы, но не вешает гроздья классов в несколько строк на отображения и поведения.
@@alext5030 Странно работают ответы на ютуб, предыдущий скрыл. Но если коротко - я и сам давно очень далеко живу и работаю за пределами пост-ссср, а сравнивать бутстрап и тайлвинд не корректно, первый не дает лапши классов в несколько строк длинной, указывая и отображения и состояния. Популярность тайлвинда в первую очередь - фронтендеры не учат CSS и сопутствующие (препроцессоры и т.п.), пользуясь готовым и порой не понимая как это работает.
Thank you!😇
Thanks 👍👍👍👍
Миша сделай пожалуйста видео про правильную семантику тегов
Не пользовал никогда Tailwind если что, и тема, вероятно, холиварная, но первая мысль была "прикольно", а уже на этапе стилизации компонентов на гриды представил как бы это сделал на реакте в своих проектах - и Tailwind никак в концепцию не вписывается. А вот в старые проекты на каком-нибудь yii2 можно бы было попробовать -_- В любом случае спасибо, допишу в резюме "работа с Tailwind" :Ъ
Популярность именно tailwind связана с его активным использованием в SPA, а не в обыном HTML/CSS/JS(JQ)
При работе с React была проблема с длинными строками в классах
npm install clsx
помогает с длинными строками в классах
Можно разбивать классы на отдельные сгруппированные блоки и далее по разным строчкам разносить
npm run build все стили пропадают у меня! как правильно сделать? спасибо вам за урок!
28:05 здесь кавычки добавляются через after и before чтобы рассказать про возможности tailwindcss или принято через css это делать ?
Здесь кавычки скорее играют декоративную роль. В таких случаях принято делать это через стили.
классы очень длинные выходят, для крупных проектов боль
Хотелось бы небольшой ролик по установке tailwind в html проект
У меня как раз html проект, вы можете скопировать мои настройки. Ссылка на репозиторий есть в описании.
❤❤❤❤ G
Скорее всего, там не section подошел бы, а article.
Правильно ли я понял, что tailwind - как расширенный bootstrap ?
нет
bootstrap это как кулинария, а tailwind химия, в нем нет предзаданных стилей для компонентов, собираешь по кусочкам из классов
@@wildcat4435 🤝
Сделай пожалуйста видео про сигналы и если знаешь, раскрой ответы на эти вопросы:
Какие амбиции у технологии сигналов?
Стоит ли использовать сигналы, вместе хуков, на постоянной основе?
Сигналы в Solid.js vs сигналы из Preact в нем же или в React, если это не одно и тоже
В Реакте нет сигналов из коробки, насколько я знаю. Preact'ом никогда не пользовался.
@@mishanep В Preact как я понял все на отдельных изолированных модулях и устанавливаются они отдельно, уже много видео есть про них, в реакте и то, как сильно они улучшают перфоманс. Хотелось бы от тебя увидеть, что то на эту тему
не плохо если бы плагин для prettier мог переносить классы на новую строку, как то в столбик сортировать, потому что иногда классы такие длинные что появляется горизонтальный скролл
Перенос строк в редакторе можно отключить, чтобы горизонтального скролла не было.
Я обычно сам вручную переношу.
Что за бум тайлвинда в последние дни. Сам изучил и параллельно появились и появляются видео. Коллективное помешательство что-ли)
Он становится оч популярен на западе, поэтому все больше спрос
У него бум еще был когда я учился больше года назад
Tailwind очень удобен, поэтому и популярен
На "западе" всегда было НЕ очень модно тартить много времени на то, что у нас называется "версткой". Это так в т.ч. и потому, что такое являние, как "верстальщик" за пределами пост-СССР фактически отсутствует. Почему так - не знаю.
AFAIK возиться с этим там никто не хочет. Частично с этим связан спрос на "верстальщиков" из пост-СССР на всяких апворках. Это для тех, кто хочет, чтобы сайт был НЕ столько функциональным, сколько представлял бы из себя "тест на эпилепсию".
@@alext5030 эм... Tailwind - это тот же css, только удобней. Без знаний css и понимания построения Flex/Grid лейаутов не получится нормально применить Tailwind. Грубо говоря, это просто набор утилитных классов и все. Плюс оптимизации бандла, когда несколько девов пишут одни и те же стили, типа margin-bottom: 2rem; в каждом компоненте.
А так Tailwind это все за тебя разрулит и добавит в бандл всего один класс с нужным правилом.
К тому же в TW можешь спокойно писать кастомный css, в бандл пойдёт только то, что использовал.
А вообще, не нравится инструмент - просто не используйте :)
Я пробовал в крупных проектах делать со сложным дизайном. Это лютейшее говно. На нем можно разве что todo лист себе делать. Для того, чтобы прочитать классы и 5 мониторов в ряд не хватит.
100%
Их, вообще-то, в столбик выстраивают те, кто привык всякими бутсрапами и т.п. штуками всяким пользоваться.
Все там (и в tailwind) нормально читается. К тому же, 'nj позволяет не тартить много времени на верстку. Далеко не все программисты интересуются версткой на высоком уровне, а среди классических full-stack (PHP + что-то) таких вообще единицы.
Не поверите, но многие веб-программисты считают "верстку" - лютой рутиной, которую нужно, как прием медикаментов, просто как-то пережить и забыть.
P.S: Да, строку классов тоже можно в столбик сложить (ну, типа Enter и... магия!!!) - это? вообще-то, почти автоматически делают люди, привыкшие к таким штукам, как Bootstrap.
Мне кажется он больше для простых вещей / прототипирования. Когда надо по-быстрому что-то сварганить и потом забить.
18:15 Почему @tailwind и @apply подчеркиваются?
Потому что это невалидный CSS :)