Tailwind, utility-first css-фреймворк

Друзья, в данном видосе поговорим про Tailwind css, обсудим плюсы и минусы фреймверка, разберем пошаговый гайд как его подключать, оптимизировать, поймем почему utility-first css-фреймворк.
Сайт фреймверка: tailwindcss.com/
Телеграм канал - t.me/from0to1com
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

[@user-le7re7uc2y]

спасибо за ролик, буквально вчера подумал, что нужно узнать о tailwind и тут выходит твой ролик. Не первый раз замечаю, что ты читаешь мои мысли!!!

[@vadymprokopchuk]

так и есть)

[@user-gt4zu3dw6f]

Спасибо автору за мастер-класс! После просмотра видео решил немного собрать мысль по поводу того, кто такой Tilewind, делюсь результатами: TilewindCSS - фреймворк визуальной стилизации, который обеспечивает дизайнеров и разработчиков стандартизированным набором инструментов. Философия Tilewind - Utility-First, другими словами мы пишем не столько css стили, сколько "собираем" необходимый визуальный стиль для элемента, так как для каждого css свойства и типового значения уже созданы классы. Таким образом фреймворк закрывает несколько вопросов, условная оптимизация размера выходного css файла, и стандартизация всех визуальных элементов включая отступы, цвета, эффекты при наведении и прочее. В условной "базе" фреймворк самодостаточен, сложность может возникнуть с кастомными макетами у которых своя палитра, не типичная сетка и прочее, в таком случае Tilewind предлагает нам переконфигурировать его настройки и это работает, но только в том случае если ваш дизайнер придерживался гайдлайнов и подходил к своему макету с математической точностью, если же вам попадет макет "вразнобой" сложность вырастет в разы, в худшем случае до полного отказа от фреймворка. Предупреждение по поводу использования @apply, чрезмерное использование такого подхода нивелирует философию Tilewind, т.к @apply на этапе компиляции буквально копирует все css свойства классу к которому вы его применили, так же этому есть официальное подтверждение: tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction.

[@user-zb8cc2wy1x]

Опа прелестно. Долго ждал этого видоса. Спасибо)

[@vadymprokopchuk]

спасибо

[@candy_front]

Спасибо Вам большое за подробный и понятный обзор. From Uzbekistan

[@vadymprokopchuk]

спасибо

[@user-xu6lu6cv4x]

Спс за инфу, оч познавательно. Так держать.👍

[@vadymprokopchuk]

спасибо, я рад)

[@user-xu6lu6cv4x]

@@vadymprokopchuk у вас случайно нет такого же сайта с доменом " ru"? Есть у вас ученики с России? Как проходит оплата?

[@farruxeshboev9788]

большое спасибо!

[@user-wq5nn8sj9o]

какой же ты батя, спасибо за проделанную работу

[@vadymprokopchuk]

спасибо)

[@andreyevanton]

Вадим, привет! Хотел поинтересоваться -- ты по-прежнему угораешь по Джикваери или уже смотришь с торону реактивности? Вьюшка, например

[@_denysd9683]

где можно посмотреть твой settings.json ? хочу тоже такой стиль) или это просто тема такая ?

[@user-qe2oh6os8q]

спасибо!

[@user-lg3mt4tk7e]

Топ , пушка , дискотека 🎉

[@vadymprokopchuk]

в ритме танца

[@user-uz4yu6qk1r]

Офигеть, первый раз вижу, чтобы ты пил не кофе, а чай!! Спасибо за урок!

[@vadymprokopchuk]

это и было первый раз))

[@4rMVHWxkrtXrooPBWgyV]

Как новичку интересно, спасибо По поводу длинного видео -почему нет только пропиши тайм коды и вперёд, хочется про темную/светлую тему подробнее

[@blatov]

ТОПЧИК!!!!

[@user-ly2mv5sh3y]

Ты лучший друг человечества ))

[@elmaralijev7499]

Вадим, а у тебя только один курс по верстке (только тот про который ты говорил в ролике), или есть также курсы для продвинутых верстальщиков и совсем сложные сайты?

[@vadymprokopchuk]

только один, у меня идея есть записать курс по анимации продвинутой, может создам скоро

[@X-PainMusic]

@@vadymprokopchuk було б дуже круто, потрібна штука

[@dimasnytin]

Шииииикарно

[@vadymprokopchuk]

спасибо))

[@DinamitNeon]

Будет полноценная верстка на tw?

[@romatokar3516]

Полтора часа показывают как пользоваться документацией. Как закастомить конфиг не показал, как добавить пользовательские правила тоже. Зато apply который они же сам не рекомендают использовать показал

[@user-pb1zu5wz9r]

та быыло, сказал он о настройках вскользь с начала. И потом начиная с 1:17 пробежался по ним.

[@romatokar3516]

Вскользь показать что такое есть, и показать как это работает - разные вещи. Ну переопредели один цвет и глянь что будет с другими

[@user-uz4yu6qk1r]

Всё правильно. Он показывает, как работать с документацией. Это надо уметь. Особенно с тайлвинд

[@Maxi-Ferro]

Интересно было бы узнать как подключить tilewind к gulp

[@Sociopath8889]

Спасибо Вам большое за подробный и понятный обзор. Наивный вопрос - будет-ли подобное видео по бутсрапу?)

[@vadymprokopchuk]

та как-то не планировал, даже и не знаю

[@spectralvlad2]

Было бы круто. Тоже жду @@vadymprokopchuk

[@user-db4ec6rx4n]

Бутстрап?? Вы серьездно?? Вы не погяли фишку таилвинда просто))))

[@Sociopath8889]

@@user-db4ec6rx4n На собесах Вы будете так-же отвечать? Или будете навязывать потенциальному работодателю свой стек?

[@user-vp6tf3dp4j]

Ну вот скажи. НАФИГА он тебе нужен???

[@natalia_0729]

Не понятен момент, зачем все стили переносить в input.css через @apply, если начинает расширяться файл css. А в начале видео говорится о том, что Tailwind нужно использовать, чтобы не расширялся style.css до бесконечности, а расширять html, типа таким образом распределяется нагрузка на сайт, чтобы быстрее грузился. Понятно, что когда в html задано много tailwind классов, читать их может сложновато, но смысл тогда всего этого, если в любом случае все перенесено в css. А так за видео спасибо, первый раз смотрю про Tailwind, до этого немного изучила Bootstrap, поэтому интуитивно некоторые классы были понятны. И здесь их гораздо больше, чем в Bootstrap).

[@aleksandr_anp]

когда-то обожал бутстрап (2-3 версии). Нокогда флексбоксы стали везде поддерживаться перестал его использовать. Но на более крупных проектах, разумеется, должен быть фреймворк, для унификации. И вот подход тэилвинда с написанием множества классов к каждому элементу для меня до сих пор раздражающий.

[@natashawebconstanta777]

Благодарю 100 раз )) В этом реально что то мистическое ))) Заказчик вчера сказал - будем работать на Tailwind 😀Подскажите, пожалуйста, какая это тема vs code, уж очень я в неё влюбилась, а искать долго ))) Help please ....🤣🤣🤣

[@natalia_0729]

тема Community Material Theme Darker High Contrast

[@natashawebconstanta777]

@@natalia_0729 Спасибо огромное, Добрый Человек !!! 🙏🙏🙏

[@user-qe3kk8sn3p]

Спасибо. Сделайте, пожалуйста, видео по плагину WooCommerce в WordPress

[@user-mu5ru2xl9n]

ура!!! вечеринка

[@vadymprokopchuk]

она самая

[@questions--answers-7]

О красава Tailwind

[@antoha9486]

А можно сделать один файл CSS, а в нём указать ссылки import на множество других файлов CSS которые лежат каждый в своей директории? Какие минусы у такого способа?

[@vadymprokopchuk]

не совсем понял, что вы имеете в виду но оно все будет грузится

[@user-dh7dp1zc3n]

​@@vadymprokopchukон имел ввиду что для каждой страницы писать css в отдельный файл, а потом все подключить в основной через директиву @import. Просто вы говорили что css разрастается, а это один из способов разделить css(типо бэм подход)

[@stanislav_tihanov]

Здравствуйте, подскажите пожалуйста после установки (npm install -D tailwindcss), выдает такую ошибку (6 high severity vulnerabilities) npm audit fix и npm audit fix --force не помогают! Может кто-то сталкивался с такой проблемой? В интернете не нашел решения!

[@andreyevanton]

вы не показали ошибку, показали лишь предупреждение о шести ошибках

[@roman6504]

Версию ноды поставь поновее. Просто какие то пакеты устарели и показывает уязвимости. Но вообще забей. Эти ошибки ни на что не влияют.

[@zercooI]

всё великолепно, спасибо за очередной гайдецкий. у меня остался вопрос, по названиям классов, почему некоторым названиям пишут например: header__inner, а кто-то пишет header-inner). Вопрос в том, почему кто-то использует __ , а кто-то -. есть какое-то прям правило?

[@vadymprokopchuk]

все зависит от методологии, я обычно использую БЭМ, у меня есть видос на канале, а если без методологии, то разницы нет, просто вкусовщина

[@zercooI]

@@vadymprokopchuk ааааа вот, что такое БЭМ. Спасибо 🤭

[@sirflexsir1437]

"Я это не понимаю, мне это неинтересно. Вот мне лично это неинтересно, за других сказать не могу"

[@elmaralijev7499]

Ха ха ха, ты меня опередил всеже ...а я то как раз давно хотел спросить почему ты не используешь для css, Tailwind или чтото подобное этому :) C Tailwind же куда меньше писанины.

[@WERWOLION]

для меньше писанины делаешь sass фраемворк себе на миксинах и всё, а это позорище и мусор

[@smyrnovd]

стоит ли верстать на tailwind для обучения работы в компании?

[@vadymprokopchuk]

та не особо, уже когда туда попадешь, и у тебя будет такая задача, там и освоишь

[@Sung_Jin-VVoo]

23:23 В том что css может расширятся, а css нет😂💚

[@zercooI]

Ждём видео, которое залетит в просмотрах, что теперь делать с фигмой, без режима разработчика

[@vadymprokopchuk]

сегодня будет

[@user-gs7xn9mk7j]

Про БЭМ тут уже забываем. Так?

[@vadymprokopchuk]

нет, почему?

[@sovngardeawaits-rm2np]

хорошая вечеринка

[@vadymprokopchuk]

круть)

[@nopainnogame9897]

kzbin.info/www/bejne/bmrUo5uXf7ydmtUsi=PBrk-wGhAPdMKpy_&t=1403 так будет расширяться или нет?) tailwind build это что за команда такая?) есть только tailwind --watch или можно tailwind --minify запустить для продакшн npx tailwindcss --help покажет все возможные варианты А вообще спасибо за видео, было полезно.

[@walterwhite4407]

HARDEST WORKER 👊👊

[@vasil-vasil]

Цікавий підхід. Треба буде спробувати

[@Vladislav1449]

Основное преимущество TW не сказал - ускорение разработки. Не надо переключаться между файлами. На счёт того что сложно читать. Так в основном TW используется в фреймворках react, vue, а не в чистой верстке. В этих фреймворках страются использовать небольшие компоненты, где html кода ну максимум строчек 100(обычно меньше). В небольшом количестве строчек читается такое не сложно

[@gladiatorrussia]

У меня 2 окошка в редакторе, слева tsx, справа стили. Не нужно переключаться. TW это г полное. Заново изобретают велосипед. Модульный scss намного лучше, не нужно писать стили в разметки и превращать код в кашу. И понятней, все знаю обычный css, а эти сокращенные стили нужно учить

[@Vladislav1449]

@@gladiatorrussia ну сколько людей столько и мнений. До того как стал работать с ним тоже думал гавно. Видимо ты сам с ним не работал, раз говоришь, что нужно что-то учить. Там учить нечего. 1 день на проекте и уже топишь

[@WERWOLION]

перевожу на русский , чтобы делать мусор для людей с дименцией самый норм фраемвок. Стыдно должно быть!

[@Vladislav1449]

@@WERWOLION ничего не понял, можешь перефразировать?

[@dogvscatfunny9956]

Это конечно не скажешь что удобно, на муть похожа больше обычный css рулит как всегда)

[@TheEegmen]

Ну вот, дожили.. на CSS уже фреймворки появились...

[@vadymprokopchuk]

Ну они очень давно были

[@skrumy6062]

Ошибешься в названии класса, потом сиди гадай а че ж оно не работает, еще и запомнить их все надо, шариться 2 часа по документации по началу будешь, тогда как на бэм уже можно было за это время давно написать все что надо)) Так себе штука как по мне

[@vadymprokopchuk]

ну если ошибся, можно сразу в инспекторе увидеть тут же не момент сравнения, если у тебя в ТЗ нужно использовать tailwind, или проект уже на нем, то у тебя вариантов 0

[@skrumy6062]

@@vadymprokopchuk Это да

[@gergeorg]

так есть же расширение 'Tailwind CSS IntelliSense' которое подсказывает нужные классы

[@evgeniymakhnin267]

Классы поначалу непонятные, но на самом деле они все интуитивно понятные. Через конфиг можешь настроить абсолютно все что тебе надо, Bootstrap тот же и рядом не стоял. На Tailwind верстать одно удовольствие и плюс скорость раза в полтора два быстрее. БЭМ это пережитки прошлого(((

[@skrumy6062]

@@evgeniymakhnin267 Ой, какие громкие заявления

[@hopelezzhopelezz487]

Tailwind==Bootstrap true, но Tailwind===Bootstrap false :)))))

[@erxweo]

-D это ключ для того чтобы пакет установился как dev зависимость и в билд не тянулся. Хреново ты к видосу подготовился. Не знать такие банальные вещи.

[@alext5030]

Давно уже понял, что большинство верстальщиков про Node.js не знают практически ничего, а отсюда непонимание nmp и т.п.

[@erxweo]

@@alext5030 вообще не вижу смысла учить только верстку, это как научиться только рулить на машине, а на педали и коробку передач пофиг

[@gregdmitriev2784]

такая же фигня как и Bootstrap - вообще неудобно работать, длиннющие названия классов (зачем?). Что не так с CSS-модулями ? Не надо париться с названиями классов, и они не такие краказяблы как в Tailwind или Bootstrap. Я категорически против усложнения процесса разработки. А Tailwind или Bootstrap как раз про усложнение и неудобство. Хотя приходиться их знать, т.к. никуда от странностей некоторых разработчиков не уйти, надо сотрудничать )))

[@vadymprokopchuk]

нужно знать, это всего лишь инструмент, у которого есть плюсы и минусы

[@Stas_Gutsal]

Чекаємо новий контент українською

[@vadymprokopchuk]

так, обов'язково, там вже такий список тем написав, що капець)

[@WERWOLION]

Я за такой фраемворк баню каналы в предложке. Сделал себе sass фреемвок вот это тема. Чо трудного сделать нормально? Такие вещи табу выкладывать это позор для верстальщика. смотреть на ускорении 1.5+

[@WERWOLION]

так стоп! Я смотрю видео и там мониторинг файлов HTML, но я дружу с головой и пишу на PUG. Отрываю поиск - получаю танцы с бубном. Ввожу на сайте с докой в поиск (pug) => No results for "pug"!!! Отличный фраемворк 100 из 10

[@vadymprokopchuk]

так для pug ничего делать не нужно, просто классы пиши и все

[@WERWOLION]

а ёще можно сделать стек глобальных классов для сайта , который делается 1 раз для любого многостаночника за день + в процессе и мы получим нормальный стэк глобалки без порнографии тэил винда

[@WERWOLION]

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

[@WERWOLION]

Как на этом мусоре делать веб транзишн API и объявлять имена грид ареа?

[@andreyevanton]

Вадим, привет! Хотел поинтересоваться -- ты по-прежнему угораешь по Джикваери или уже смотришь с торону реактивности? Вьюшка, например

[@user-zn3qp8xr5p]

большое спасибо!

[@vadymprokopchuk]

спасибо за поддержку