Tailwind, utility-first css-фреймворк
HTML-код
- Опубликовано: 15 янв 2024
- Друзья, в данном видосе поговорим про Tailwind css, обсудим плюсы и минусы фреймверка, разберем пошаговый гайд как его подключать, оптимизировать, поймем почему utility-first css-фреймворк.
Сайт фреймверка: tailwindcss.com/
Телеграм канал - t.me/from0to1com
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ
Опа прелестно. Долго ждал этого видоса. Спасибо)
спасибо
спасибо за ролик, буквально вчера подумал, что нужно узнать о tailwind и тут выходит твой ролик. Не первый раз замечаю, что ты читаешь мои мысли!!!
так и есть)
Спасибо Вам большое за подробный и понятный обзор. From Uzbekistan
спасибо
Спс за инфу, оч познавательно. Так держать.👍
спасибо, я рад)
@@vadymprokopchuk у вас случайно нет такого же сайта с доменом " ru"? Есть у вас ученики с России? Как проходит оплата?
какой же ты батя, спасибо за проделанную работу
спасибо)
Спасибо автору за мастер-класс!
После просмотра видео решил немного собрать мысль по поводу того, кто такой Tilewind, делюсь результатами:
TilewindCSS - фреймворк визуальной стилизации, который обеспечивает дизайнеров и разработчиков стандартизированным набором инструментов.
Философия Tilewind - Utility-First, другими словами мы пишем не столько css стили, сколько "собираем" необходимый визуальный стиль для элемента, так как для каждого css свойства и типового значения уже созданы классы.
Таким образом фреймворк закрывает несколько вопросов, условная оптимизация размера выходного css файла, и стандартизация всех визуальных элементов включая отступы, цвета, эффекты при наведении и прочее.
В условной "базе" фреймворк самодостаточен, сложность может возникнуть с кастомными макетами у которых своя палитра, не типичная сетка и прочее, в таком случае Tilewind предлагает нам переконфигурировать его настройки и это работает, но только в том случае если ваш дизайнер придерживался гайдлайнов и подходил к своему макету с математической точностью, если же вам попадет макет "вразнобой" сложность вырастет в разы, в худшем случае до полного отказа от фреймворка.
Предупреждение по поводу использования @apply, чрезмерное использование такого подхода нивелирует философию Tilewind, т.к @apply на этапе компиляции буквально копирует все css свойства классу к которому вы его применили, так же этому есть официальное подтверждение: tailwindcss.com/docs/reusing-styles#avoiding-premature-abstraction.
большое спасибо!
Топ , пушка , дискотека 🎉
в ритме танца
ТОПЧИК!!!!
Ты лучший друг человечества ))
где можно посмотреть твой settings.json ? хочу тоже такой стиль) или это просто тема такая ?
Полтора часа показывают как пользоваться документацией. Как закастомить конфиг не показал, как добавить пользовательские правила тоже. Зато apply который они же сам не рекомендают использовать показал
та быыло, сказал он о настройках вскользь с начала. И потом начиная с 1:17 пробежался по ним.
Вскользь показать что такое есть, и показать как это работает - разные вещи. Ну переопредели один цвет и глянь что будет с другими
Всё правильно. Он показывает, как работать с документацией. Это надо уметь. Особенно с тайлвинд
Вадим, привет! Хотел поинтересоваться -- ты по-прежнему угораешь по Джикваери или уже смотришь с торону реактивности? Вьюшка, например
Офигеть, первый раз вижу, чтобы ты пил не кофе, а чай!!
Спасибо за урок!
это и было первый раз))
Вадим, а у тебя только один курс по верстке (только тот про который ты говорил в ролике), или есть также курсы для продвинутых верстальщиков и совсем сложные сайты?
только один, у меня идея есть записать курс по анимации продвинутой, может создам скоро
@@vadymprokopchuk було б дуже круто, потрібна штука
спасибо!
Шииииикарно
спасибо))
Спасибо Вам большое за подробный и понятный обзор.
Наивный вопрос - будет-ли подобное видео по бутсрапу?)
та как-то не планировал, даже и не знаю
Было бы круто. Тоже жду
@@vadymprokopchuk
Бутстрап?? Вы серьездно?? Вы не погяли фишку таилвинда просто))))
@@user-db4ec6rx4n На собесах Вы будете так-же отвечать? Или будете навязывать потенциальному работодателю свой стек?
Ну вот скажи. НАФИГА он тебе нужен???
Интересно было бы узнать как подключить tilewind к gulp
Будет полноценная верстка на tw?
Как новичку интересно, спасибо
По поводу длинного видео -почему нет только пропиши тайм коды и вперёд, хочется про темную/светлую тему подробнее
Спасибо. Сделайте, пожалуйста, видео по плагину WooCommerce в WordPress
ура!!! вечеринка
она самая
А можно сделать один файл CSS, а в нём указать ссылки import на множество других файлов CSS которые лежат каждый в своей директории? Какие минусы у такого способа?
не совсем понял, что вы имеете в виду
но оно все будет грузится
@@vadymprokopchukон имел ввиду что для каждой страницы писать css в отдельный файл, а потом все подключить в основной через директиву @import. Просто вы говорили что css разрастается, а это один из способов разделить css(типо бэм подход)
всё великолепно, спасибо за очередной гайдецкий. у меня остался вопрос, по названиям классов, почему некоторым названиям пишут например: header__inner, а кто-то пишет header-inner). Вопрос в том, почему кто-то использует __ , а кто-то -. есть какое-то прям правило?
все зависит от методологии, я обычно использую БЭМ, у меня есть видос на канале,
а если без методологии, то разницы нет, просто вкусовщина
@@vadymprokopchuk ааааа вот, что такое БЭМ. Спасибо 🤭
когда-то обожал бутстрап (2-3 версии). Нокогда флексбоксы стали везде поддерживаться перестал его использовать. Но на более крупных проектах, разумеется, должен быть фреймворк, для унификации. И вот подход тэилвинда с написанием множества классов к каждому элементу для меня до сих пор раздражающий.
Благодарю 100 раз )) В этом реально что то мистическое ))) Заказчик вчера сказал - будем работать на Tailwind 😀Подскажите, пожалуйста, какая это тема vs code, уж очень я в неё влюбилась, а искать долго ))) Help please ....🤣🤣🤣
тема Community Material Theme Darker High Contrast
@@natalia_0729 Спасибо огромное, Добрый Человек !!! 🙏🙏🙏
О красава
Tailwind
Здравствуйте, подскажите пожалуйста после установки (npm install -D tailwindcss), выдает такую ошибку (6 high severity vulnerabilities) npm audit fix и npm audit fix --force не помогают! Может кто-то сталкивался с такой проблемой? В интернете не нашел решения!
вы не показали ошибку, показали лишь предупреждение о шести ошибках
Версию ноды поставь поновее. Просто какие то пакеты устарели и показывает уязвимости. Но вообще забей. Эти ошибки ни на что не влияют.
"Я это не понимаю, мне это неинтересно. Вот мне лично это неинтересно, за других сказать не могу"
стоит ли верстать на tailwind для обучения работы в компании?
та не особо, уже когда туда попадешь, и у тебя будет такая задача, там и освоишь
Не понятен момент, зачем все стили переносить в input.css через @apply, если начинает расширяться файл css. А в начале видео говорится о том, что Tailwind нужно использовать, чтобы не расширялся style.css до бесконечности, а расширять html, типа таким образом распределяется нагрузка на сайт, чтобы быстрее грузился. Понятно, что когда в html задано много tailwind классов, читать их может сложновато, но смысл тогда всего этого, если в любом случае все перенесено в css.
А так за видео спасибо, первый раз смотрю про Tailwind, до этого немного изучила Bootstrap, поэтому интуитивно некоторые классы были понятны. И здесь их гораздо больше, чем в Bootstrap).
Ха ха ха, ты меня опередил всеже ...а я то как раз давно хотел спросить почему ты не используешь для css, Tailwind или чтото подобное этому :) C Tailwind же куда меньше писанины.
для меньше писанины делаешь sass фраемворк себе на миксинах и всё, а это позорище и мусор
Про БЭМ тут уже забываем. Так?
нет, почему?
23:23 В том что css может расширятся, а css нет😂💚
Ждём видео, которое залетит в просмотрах, что теперь делать с фигмой, без режима разработчика
сегодня будет
хорошая вечеринка
круть)
Основное преимущество TW не сказал - ускорение разработки. Не надо переключаться между файлами. На счёт того что сложно читать. Так в основном TW используется в фреймворках react, vue, а не в чистой верстке. В этих фреймворках страются использовать небольшие компоненты, где html кода ну максимум строчек 100(обычно меньше). В небольшом количестве строчек читается такое не сложно
У меня 2 окошка в редакторе, слева tsx, справа стили. Не нужно переключаться. TW это г полное. Заново изобретают велосипед. Модульный scss намного лучше, не нужно писать стили в разметки и превращать код в кашу. И понятней, все знаю обычный css, а эти сокращенные стили нужно учить
@@gladiatorrussia ну сколько людей столько и мнений. До того как стал работать с ним тоже думал гавно. Видимо ты сам с ним не работал, раз говоришь, что нужно что-то учить. Там учить нечего. 1 день на проекте и уже топишь
перевожу на русский , чтобы делать мусор для людей с дименцией самый норм фраемвок. Стыдно должно быть!
@@WERWOLION ничего не понял, можешь перефразировать?
Цікавий підхід. Треба буде спробувати
ruclips.net/video/89qrhaJWjds/видео.htmlsi=PBrk-wGhAPdMKpy_&t=1403 так будет расширяться или нет?)
tailwind build это что за команда такая?) есть только tailwind --watch или можно tailwind --minify запустить для продакшн
npx tailwindcss --help покажет все возможные варианты
А вообще спасибо за видео, было полезно.
Это конечно не скажешь что удобно, на муть похожа больше обычный css рулит как всегда)
Ну вот, дожили.. на CSS уже фреймворки появились...
Ну они очень давно были
HARDEST WORKER 👊👊
Tailwind==Bootstrap true, но Tailwind===Bootstrap false :)))))
Ошибешься в названии класса, потом сиди гадай а че ж оно не работает, еще и запомнить их все надо, шариться 2 часа по документации по началу будешь, тогда как на бэм уже можно было за это время давно написать все что надо))
Так себе штука как по мне
ну если ошибся, можно сразу в инспекторе увидеть
тут же не момент сравнения, если у тебя в ТЗ нужно использовать tailwind, или проект уже на нем, то у тебя вариантов 0
@@vadymprokopchuk Это да
так есть же расширение 'Tailwind CSS IntelliSense' которое подсказывает нужные классы
Классы поначалу непонятные, но на самом деле они все интуитивно понятные. Через конфиг можешь настроить абсолютно все что тебе надо, Bootstrap тот же и рядом не стоял. На Tailwind верстать одно удовольствие и плюс скорость раза в полтора два быстрее. БЭМ это пережитки прошлого(((
@@evgeniymakhnin267 Ой, какие громкие заявления
Чекаємо новий контент українською
так, обов'язково, там вже такий список тем написав, що капець)
-D это ключ для того чтобы пакет установился как dev зависимость и в билд не тянулся. Хреново ты к видосу подготовился. Не знать такие банальные вещи.
Давно уже понял, что большинство верстальщиков про Node.js не знают практически ничего, а отсюда непонимание nmp и т.п.
@@alext5030 вообще не вижу смысла учить только верстку, это как научиться только рулить на машине, а на педали и коробку передач пофиг
такая же фигня как и Bootstrap - вообще неудобно работать, длиннющие названия классов (зачем?). Что не так с CSS-модулями ? Не надо париться с названиями классов, и они не такие краказяблы как в Tailwind или Bootstrap. Я категорически против усложнения процесса разработки. А Tailwind или Bootstrap как раз про усложнение и неудобство. Хотя приходиться их знать, т.к. никуда от странностей некоторых разработчиков не уйти, надо сотрудничать )))
нужно знать, это всего лишь инструмент, у которого есть плюсы и минусы
Я за такой фраемворк баню каналы в предложке.
Сделал себе sass фреемвок вот это тема. Чо трудного сделать нормально?
Такие вещи табу выкладывать это позор для верстальщика.
смотреть на ускорении 1.5+
так стоп!
Я смотрю видео и там мониторинг файлов HTML, но я дружу с головой и пишу на PUG.
Отрываю поиск - получаю танцы с бубном. Ввожу на сайте с докой в поиск (pug) => No results for "pug"!!!
Отличный фраемворк 100 из 10
так для pug ничего делать не нужно, просто классы пиши и все
а ёще можно сделать стек глобальных классов для сайта , который делается 1 раз для любого многостаночника за день + в процессе и мы получим нормальный стэк глобалки без порнографии тэил винда
вы тут задали флексы но не задали флекс байзик для дочерних элементов
ну если так верстать то конечно будет быстро , кривое будет но быстро
Как на этом мусоре делать веб транзишн API и объявлять имена грид ареа?
большое спасибо!
спасибо за поддержку
Вадим, привет! Хотел поинтересоваться -- ты по-прежнему угораешь по Джикваери или уже смотришь с торону реактивности? Вьюшка, например