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

[@MopkauTV]

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

[@ЕгорСабанцев-ъ2м]

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

[@vadymprokopchuk]

так и есть)

[@candy_front]

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

[@vadymprokopchuk]

спасибо

[@НиколайФилиппенко-е3с]

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

[@vadymprokopchuk]

спасибо

[@Лариса-м7х5б]

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

[@vadymprokopchuk]

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

[@Лариса-м7х5б]

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

[@bp.correctormaxkamov]

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

[@vadymprokopchuk]

спасибо)

[@Maxi-Ferro]

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

[@cao_dzecbi]

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

[@vadymprokopchuk]

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

[@4rMVHWxkrtXrooPBWgyV]

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

[@_pheax]

спасибо Вадос, очень хорошо обьяснил

[@andreyevanton]

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

[@Рустем-х8ф]

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

[@ВиталийОнищенко-к4к]

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

[@vadymprokopchuk]

в ритме танца

[@Chelovek-m4u]

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

[@romatokar3516]

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

[@ЕгорЕгорович-д2т]

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

[@romatokar3516]

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

[@cao_dzecbi]

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

[@_denysd9683]

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

[@walterwhite4407]

HARDEST WORKER 👊👊

[@natalia_0729]

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

[@DinamitNeon]

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

[@aleksandr_anp]

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

[@Sociopath8889]

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

[@vadymprokopchuk]

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

[@spectralvlad2]

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

[@daffyteam]

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

[@Sociopath8889]

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

[@ЕвгенийЛяпкин-ф8й]

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

[@stanislav_tihanov]

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

[@andreyevanton]

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

[@roman6504]

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

[@elmaralijev7499]

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

[@vadymprokopchuk]

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

[@Volod-X]

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

[@zercooI]

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

[@vadymprokopchuk]

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

[@zercooI]

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

[@antoha9486]

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

[@vadymprokopchuk]

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

[@Дмитрий-д8о6м]

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

[@Сергей-и9х6ж]

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

[@vadymprokopchuk]

она самая

[@ОльгаЗахарова-б5я]

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

[@vadymprokopchuk]

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

[@natashawebconstanta777]

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

[@natalia_0729]

тема Community Material Theme Darker High Contrast

[@natashawebconstanta777]

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

[@dimasnytin]

Шииииикарно

[@vadymprokopchuk]

спасибо))

[@sirflexsir1437]

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

[@ДмитрийВяхирев-щ3х]

спасибо!

[@Sung_Jin-VVoo]

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

[@neverchain]

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

[@vadymprokopchuk]

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

[@blatov]

ТОПЧИК!!!!

[@СветланаГруздева-л7ю]

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

[@vadymprokopchuk]

нет, почему?

[@PavelChupryna]

столкнулись.)

[@Anatoli-bq1pe]

Стили в разметке - тот ещё колхоз, особенно когда ты разрабатываешь приложение на фреймворке. Помимо того что в разметке будет хватать атрибутов, так ещё давайте будем засорять код лишними классами и превращать разметку в самую настоящую кашу. Зачем это делать когда в CSS есть Grid? А когда ещё используешь препроцессор, например SCSS, так вообще просто красота с точки зрения и разработки и поддержки кода. За позиционирование отвечает в основном Grid, а в разметке остаются атрибуты и классы для ситей , как это и должно быть. И никакой каши и не нужно ещё тянуть какуе-то дополнительную библиотеку в свой проект. Почему я акцентирую внимание именно на CSS Grid - потому что благодаря такому подходу можно ещё избавиться от многих не нужных оболочек (чем к примеру грешит подход под Flex) и тем самым ещё улучшить читаемость кода нисколько не отражаясь на надёжности. Многие разработчики и советуют, что хорошим тоном при написании приложения - это не застрять излишне HTML-разметку.

[@elmaralijev7499]

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

[@WERWOLION]

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

[@questions--answers-7]

О красава Tailwind

[@Vladislav1449]

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

[@gladiatorrussia]

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

[@Vladislav1449]

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

[@WERWOLION]

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

[@Vladislav1449]

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

[@zercooI]

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

[@vadymprokopchuk]

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

[@sovngardeawaits-rm2np]

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

[@vadymprokopchuk]

круть)

[@nopainnogame9897]

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

[@dogvscatfunny9956]

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

[@vasil-vasil]

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

[@PavelChupryna]

ало, это полиция? здесь нет тайм кодов...

[@vadymprokopchuk]

=))

[@TheEegmen]

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

[@vadymprokopchuk]

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

[@ivanzhelanov]

Нуууу.. даже не знаю что сказать. По моему мнению эта очередная "фича" в "прорыве" технологий. Так сказать уйти от классической стилизации, сделать что то удобнее.. В этом видео наглядно видно какой это геморрой: нудно перезаходить/пересобирать, вспоминать классы, дублировать классы для одних и тех же элементов. Нафига это нужно? Выиграть в итоге 5 минут на выходе? (Я имею в виду общее время, потраченное на проект). Я уже давно, еще до появления этой "инновационной идеи" для себя сделал аналог, выписав самые ходовые классы, типа флекса и так далее, и просто их также прописывал в html. Но это лишь самые часто используемые, а не все подряд. Ну нужно мне например сделать маржин 13px,я что должен высчитывать десятое доли в ремах?? вообще бред..В обычном css просто прописав m13, я потрачу 10 секунд ( жто с учётом что еще класс буду писать) И самое ведь обидное, что это тема популярна, и она уже априори будет must have везде использоваться, особенно при трудоустройстве буду спрашивать. Хотя все и без нее все прекрасно работало..

[@pro100_makari4]

А хто тобі не дає писати в пікселях, а не рем? Очевидно що ти не шариш, ні за респонсивну верстку, ні за те що tailwind створений для фреймворків типу реакта та для компонентного підходу. В компоненті зазвичай не більше 20 рядків html, якщо більше, то ти щось робиш не так! Для звичайної верстки з головою достатньо і звичайного css або sass, якщо треба по 3 лендоса в день клепать😅 Автор відео сам не роздупляється для чого взагалі tailwind та як ним правильно користуватись, як налаштувати config і тп.

[@hopelezzhopelezz487]

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

[@skrumy6062]

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

[@vadymprokopchuk]

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

[@skrumy6062]

@@vadymprokopchuk Это да

[@gergeorg]

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

[@evgeniymakhnin267]

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

[@skrumy6062]

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

[@erxweo]

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

[@alext5030]

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

[@erxweo]

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

[@bjol_Dg]

такая же фигня как и 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]

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

[@farruxeshboev9788]

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