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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ТОПЧИК!!!!

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

спасибо!

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

Шииииикарно

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

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

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

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

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

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

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

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

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

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

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

О красава Tailwind

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

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

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

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

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

HARDEST WORKER 👊👊

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

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

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

ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-89qrhaJWjds.htmlsi=PBrk-wGhAPdMKpy_&t=1403 так будет расширяться или нет?) tailwind build это что за команда такая?) есть только tailwind --watch или можно tailwind --minify запустить для продакшн npx tailwindcss --help покажет все возможные варианты А вообще спасибо за видео, было полезно.

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

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

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

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

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

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

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

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

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

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