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