атрибуты быстро считываются браузером, потому что для него это обычный текст, не нужно делать отдельные запросы и скорость в потоке никак не замедляется
Можно ставить множественный курсор удерживая кнопку option и кликая в нужных местах ( если надо много где ввести идентичные изменения). Либо можно растянуть курсор по вертикали на несколько строк удерживая Shift + option
Все упирается в вопрос: "Для чего?", если вы делаете уникальный стиль, то действительно - это вам не нужно, но если вам нужно на скорую руку создать для чего то быстро стили - то тут может помочь.
Видос надо дополнить. Народ думает, что вместо одного класса теперь надо лепить кучу мелких, надо обязательно указать, что можно создать свой класс tailwind состоящий из этих мелких и применять его, и модифицировать его если надо всем заголовкам (например) поменять цвет.
@@alexandrkositsky7698 по факту некоторые так и делают, тупо берут готовую библиотеку по типу bootstrap или tailwind и копаясь в коде убирают то что им не нужно и возможно совершенствуют то что им оооочень нужно, НО главная проблема это время, лень и самое главное бессмысленость потому что 1. Если дальнейший код перейдёт другому разрабу он запарится понимать что и как, а 2. Проекты рознятся, а заказчик может сказать мол никаких библиотек мол долго грузится будет и всё...(по факту это и есть причина почему сейчас популярность бутстрапа стремительно падает, даже после 5ой версии)
Его обычно не так юзают) Его используют не при верстке, а при написании стилей, используя препроцессоры scss/sass: .demo { @apply py-2 px-3 bg-red-300 text-xs; } что аналогично к: .demo { padding: .5rem .75rem; background-color: #feb2b2; font-size: .75rem; } И, иногда при верстке уже можно добавить 1-2 класса, если нужно какое то отличие от уже написанного класса. Но, если воспринимать Ваш ролик, как эксперемент, мол, можно ли сверстать без стилей - вполне годится)
Круче хотя бы в том, что вся команда работает со стилями одинаково. Как бы вы не старались, у каждого в команде свой стиль написания CSS. А Tailwind дает возможность стилизовать страницу декларативно, применяя классы, одинаково известные каждому члену команды ☺
@@user-tg6wg3ji8l в нормальной команде используется БЭМ. А для вновь прибывших есть практик-лист с минимальным набором задач, чтобы вновь прибывший сотрудник быстро включился в работу команды. Так что, если тебе приходится работать с разношерстным кодом в одной команде, то ваш тим.лид говно, которое не способно организовать рабочие процессы.
Круче, есть возможность переиспользования стилей по отдельности для конечных пользователей/заказчиков. А то что нагружено, привыкнуть легко. А ещё есть Headwind для TW.
@@drampier3811 что мешает использовать tailwind с apply для БЭМ в хорошей команде? И БЭМ практика плохая, уже начинает устаревать, редко кто использует в новых организациях.
Довольно достойная замена bootstrap, если не лучшая... Благодаря этому видео я теперь понял принцип работы bootstrap. На последних минутах уснул 😄но не из-за скуки, а потому что поздно ночью смотрел лёжа в кровате. 😄💪 Сегодня обязательно попробую этот метод
Какой-то ад. Кто-то умный 15 лет назад: давайте разделять html и css, чтоб не было каши и можно было спокойно менять css не трогая html который может рендериться на сервере. Кто-то умный при разработке html5 : го уберем теги, которые существуют для стилизации и не несут в себе семантики. Стилизация - задача css и это удобно и логично. Кто-то не очень умный в 2021: а давайте писать всё вместе в одном файле, так же быстрее гавнокодить. Фу, ужасно.
топ, но спасибо за это видео, я думал что тайлвинд такой хайповый, типо может это что-то полезное, а они оказывается заново изобрели инлайновые стили и переименовали немного свойства css для удобства (хотя какое в этом удобство), можно сказать попытались изобрести свой sass ))). Лучше бы думали над всем проектом, как лучше оргинизовать свой подход к написанию стилей.
Очередная фигня где у одного блока 100500 классов. Код нечитаемый становится от таких фреймворков. Лично я не использую никаких, вполне хватает флексов!
Знаете зачем на самом деле нужен Tailwind? Для забавы и быстрых demo-к! Я серьезно! Давайте на время опустим JS и будем рассуждать логически, при использовании Tailwind, код становится нечитаемым, для отдельно взятых элементов он становится еще и сложно повторяемым. Сколько нужно классов Tailwind для описания действительно красивой кнопки, которая в свою очередь, имеет прекрасный юзабилити? Много! Представьте, на сайте у вас 10-ть таких кнопок, в этом случае, сразу ставиться под сомнение одно из достоинств Tailwind, размер! Автор упоротый и упорно оценивает размер CSS файла Tailwind после Post CSS, тогда как в HTML код разросся до безумия. Помнимая все эти (и еще кучу других) нюансы, мы, рано или поздно приходим к выводы, что реально использовать Tailwind можно только в случае написания на нем компонентов с использование БЭМ. В это случае, сразу приходит понимание, а зачем? Зачем он (Tailwind) вообще нужен, если с помощью него мы по сути, будет писать свой фреймворк и будем писать его с нуля, с учетом всех текущих проблем и багов, с учетом всех хаков, еще и JS нужно будет запилить или использовать Vue, Riot или React. Проще кастомизировать UIKit или Semantic UI, у которых к стати есть и свой набор утилит для быстрой верстки, чем побороть Tailwind. Всем удачи! Да и почему RUclips постоянно и упорно рекомендует мне этот канал... UPD: Это не единственные проблемы Tailwind, проблем просто куча, лень описывать тут все нюансы. stackoverflow в своем фреймворке учла часть этих проблем. Однако Адам (автор Tailwind) по всей видимости, далек от больших проектов и наивно верит что он изобрел лекарство от всех болезней, тупо раскидав каждое свойство в отдельный класс, я тоже так могу :)
@@lehaonuchin К девушке вообще претензий нет. Мне просто интересен сам эффект Tailwind, все вдруг решили что это Г - будущее, и вот уже появляется тема для обсуждения, переход Bootstrap на Tailwind подобную структуру, благо автору (руководителю\идеологу) Bootstrap, хватает мозгов понять что весь этот сброд сошел с ума. ) Жаль у меня нет возможности написать статью на Хабре ((
Я вижу один огромадный минус ...запихнув это все в один файл с немереным количеством классов мы получаем глубоко тормознутый сайт. Остается еще и все js впихнуть во второй файл и по лесять+ сек ждать загрузку каждой страницы))
CSS в HTML запихали, теперь осталось JS также писать. По утилитам. Мне правда становится страшно от того в какую степь веб идёт. Казалось бы, у нас уже есть гриды. Есть sass/scss/less миксины. Но нет, людям этого мало, и они решили воскресить инлайн стили, без приемуществ этих инлайн стилей. Про маленький размер CSS говорить нет даже желания. Конечно он будет маленький, ибо мы его в HTML перенесли, да ещё и дублируем постоянно. Верстальщиков с их Tailwind'ом надо разворачивать на пороге, дабы кровь не портили.
@@zigzag2341 как потом править будешь в хотя бы среднем проекте. через месяца 4 когда забудешь какой класс за что отвечает не не так когда глаза будут вылазить от этой каши. плюс еще их там целая масса!)
А как быть если это разбросано по нескольким страницам и во многих местах? Так бы в css поменял и все, а тут как это делается? С одной стороны удобно быстро сверстать, но правки могут отнять много времени :(
Все уже давно используют библиотеки которые позволяют делать компоненты. Даже если это не spa. Если в проекте глобальные стили в 2023 году, то это похоже на какой-то Легаси изврат
Какая-то абсолютно бесполезня штука. У каждого объекта на выходе получается дикое количество классов, каким образом это упрощает жизнь, мне лично непонятно.
А как работать в Tailwind с псеводоэлементами? К примеру :before, :after? Правильно - никак, придется таки создавать css файлы) Нужно ли такое решение? Как по мне сомнительно)
@@annblok_webdev Нет, конечно. Просто правила CSS универсальны, а тут правила для правил. Размер файла стилей тоже впечатляет 3 мегабайта! на заре изучения CSS я тоже думал о таком подходе - наплодить 100500 примитивов. Но беда в том, что возможных примитивов будет всегда больше чем исходных правил, на порядки. И или придется жестко ограничивать набор, или утопать в библиотеках примитивов.
Документацию вы будете елозить не чаще, чем документацию любого другого css фреймворка. Тем более в WebStorm и PhpStrom из коробки предлагают автодополнение для классов Tailwind. Другие популярных IDE наверняка тоже это делают, но или плагин есть.
Вот смотрю я на это и как представлю в рабочем проекте эти тонны классов аж в дрож бросает, имхо конечно но после flexbox смысл во всех этих бутстрапах и иже с ними прям резко отпал, хотя возможно совсем для тех кто не хочет вникать в css а тупо шпарить по документации шаблонные сайты возможно и подойдёт, хотя эти люди как правило на тильдах сидят))
@@skeelo3157 это ща шутка или троллинг неумелый?)) до 4 версии было всё на флоатах)) вот как раз с 4 версии надобность в их сетках и отпала так как активно начал использоваться flex
Не очень мне по душе такой подход на каждое свойство отдельный класс и выходит, что на описание 1 кнопки может уйти 6 - 7 классов. Уж лучше bootstrap да и то что обычно оттуда использую это сетка.
Очень удобно режим git. Особенно в третьей версии. Можно делать на лету. В итоге все пишется в новый файл. Только те классы, которые нужны. А для длинных классов можно с помощью postcss объединять с помощью @apply те же самые классы в 1 новый и использовать его для дива. Плюс ещё в режиме jit есть возможность dark режима и самое прикольное peer-placeholder-shown
Лучшей альтернативой этому было бы заменить вереницу класов библиотекой миксинов. Для их привязки использовать ТОЛЬКО ЛИШЬ ОДИН класс в виде модификатора -- что-то, что отвечает за общий стиль проекта, а остальное добавлять миксинами, который тоже могут быть сколь угодно кастомизированы.
Ну такое.. а потом фиг пойми что каждый миксин значит. Лучше уже вообще избавится от css и стилизовать все в html файле, но скрывать тонну классов под спойлер, а предназначение блоков описывать комментариями, тогда названия идиотские придумывать не нужно для каждой ноды.. это дико бесит каждый раз выдумывать то что потом все-равно будет не логично и будешь путать, а так обозвал секцию комментарием, написал классов для блока, свернул все классы чтобы отображалась только структура документа ну или оставлять первые три класса, и бери дальше редактируй что нужно. Можно вообще превью какое-то добавить как это приблизительно будет выглядеть, чтобы поставив курсор в определенное место оно отображало приблизительную визуальную картину, миникарту что-ли , а то вслепую кодишь, перекомпиливаешь, грузишь данные с Реста, и только уже в браузере видишь картинку .. усложнили все😢. Хотя бы для теилвиндоских классов что-то подобное сделать
Субъективное мнение, очень тяжело читать все эти классы , эти фреймы css в основном используют для сетки , по этому особого значения перехода с бутстрапа нету
@@annblok_webdev А вы его не пробовали юзать вместе с переменными CSS? Ну например присвоить несколько классов в одну переменную и потом такую переменную присвоить как класс тэгу?
Все прелести tailwindcss открываются когда начинаешь его кастомизировать. Очень крутая штука, верстаю исключительно на tailwind с конца 2020 года. Бутстрап - это как кнопочный телефон. Работает, но вы им пользуетесь?
CSS тоже чухня, мы просто в фотошопе стиль кнопки рисуем и картинкой вставляем. Причем кучи стилей писать не надо, просто и все! Попробуйте очень удобно!
А если например уже свертано несколько страниц на TW. И мы хотим на всех h2 отцентрировать текст или пометь размер шрифта. Нам нужно дописать/удалить класс в каждом теге h2 каждой сверстанной страницы?
@@annblok_webdev но ведь с @apply тоже как то выглядит странно класс в который ты накидываеш не свойства а другие классы и в чем принципиальная разница от того же scss?
Исхода из своего опыта, могу сказать, что tailwind несёт утилитарный подход. Но по-настоящему изолированные стилизованные компоненты, с возможностью работать с ними components as selectors выглядит более разумным. Tailwing запаришься править, если необходимо сделать глобальные правки. Поэтому, пока что, css in js мой выбор)
Если бы он не пересекался с бутстрапом по названию классов - было бы круто использовать его как навес. А вот вместо Бутстрапа - ну это вряд ли. Слишком много всего уже заточено под него.
ruclips.net/video/FrqKiBxNlg0/видео.html тут показано как добавить префикс к стилям тайлвинда чтобы они не пересекались с бутстрапом (это второй урок, в первом как установить чтобы это работало)
Спасибо за видео. Но такой код это ужас :) Не в обиду вам, а больше в обиду тейлвинду. Вы по сути пишете инлайн стилями, только еще и постоянно гугля документацию, есть ли там нужный класс или нет. Пока первое впечатление - у tailwind есть плюсы в виде утилити классов отступов (m-2), сетки (grid-col-4), типографии (text-xs, text-center). Возможно еще что-то... Но пытаться использовать все остальное это стрелять себе в ногу. Проще в css файле написать нужное отображение. И кода станет меньше, и не надо учить и гуглить миллион тейлвинд классов. UPD: я был не прав. Тейлвинд имба 🔥 Он конечно не отменяет написания обычного css, но в тех местах, где можно обойтись 2-3-мя классами, его хелперы типа (m-2, p-3, text-sm, flex, items-center) просто супер крутые. А такое бывает очень часто.
как идея того что ты можешь сделать сайт чисто прописывая стили - это прикольно. Но честно сказать написать множество классов, вместо одного общего... ну что-то странное. Не готов это принять.
И как потом такой код читать другому разрабу? это же неудобно в командной разработке. Загуглите минусы данного фреймворка, их слишком много чтобы его использовать. Как по мне лучше стать мастером в scss чтобы не писать код который в дальнейшем тяжело будет поддерживать.
это конечно круто, но что делать с мобильной версткой?)) то есть классы указал, но как для разных экранов поступить, чтобы какие элементы показывались, какие-то скрывались, что-то было шире, а что-то уже или выше/ниже ?
штука имеет место быть. и много проблем перечисленных в коментах надуманы(почти все). Она не заменяет БС абсолютно никак это разные вещи. Для верстальщиков не нужна. Очень удобна для бекэнда потому и добавлена в Ларавел и получила такую широкую популярность. почему так вопрос другой.
мне как новичку интересно для каких сайтов подойдёт такой код, где его можно использовать и в чём его минусы и преимущества для того чтобы не использовать css ?
Из минусов получается очень много классов у тегов и возникает из-за этого неразбериха. Из плюсов можно на таком фрейме практически любой дизайн составить быстро. Я наверное чуть попрактикуюсь и буду в своих личных проектах пользоваться ибо дизайнер из меня хреновый. А в нормальных лучше без фрейма, ну на крайняк bootstrap
@@ozimnadius ну, бутстрап ещё хоть чем-то помочь может. Сетка там объективно удобная. Насчёт его остальной части спорно. А вот tailwind совсем не годится
Блин, да проще миксинов накидать и сверстать. Терпеть не могу бутстрап. Он хоть и адаптивный, но этот адаптив сделан через одно место, а этот фрейворк еще хуже. Такие штуки нужны чтобы быстро накидать админку более менее симпатичную и все. Версткой заниматься на этом нельзя
максимум для админки или кабинета какого-нибудь, для реального сайта это использовать упаси боже, столько проблем будет что ну его в пень, максимум @extend в scss и будет нормально, такое количество классов это плохая практика, до сих пор с ужасом вспоминаю когда дают проект на правки по бутстрапу, где все криво гвоздями прибито
Честно не увидел чем он круче Bootstrap 5 ? вот серьезно , только то что есть Grid и тут про него просто сказали, но не увидел Grid разметки, где и как работает тут разметка по зонам ? А обычные колонки делать через Grid ? ну хз честно, писать "Это круче, чем Bootstrap 5" .... ну такое себе, крутизны нет. Видео хороша показано знакомство с TailWindCSS не более.
Пока вы не написали, я даже не знала, что на русском есть 😅 Уже давно привыкла на англ читать доки, но если вдруг кому интересно, то вот она tailwindcss.su/docs
Плюсую! Да Анна ты права то что tailwindcss гораздо лучше чем bootstrap. Шаблоны tailblocks.cc/ Ещё шаблоны dev.to/mariann93502220/15-awesome-tailwind-css-templates-and-themes-55jh Анна Молодец продолжай рассказывать про tailwindcss и не слушай там диванных аналитиков которые не компетнтные не в чём и которые не делали сайт на фреймворках и кричат то что платные шаблоны у тайлвинда, да они платные но они того стоят. Так что зачехольтесь не грамотные и не адекватные писари. Анна сделай видос vue.js+tailwindcss интересует бордер радиус самой шапки
очень напрягает когда микрофон ставят прямо перед ртом и все слова дублируются шумом от дыхания, неужели микрофон нельзя поставить чуть сбоку или одеть поролоновый чехол, ну камон масса вариантов же есть
ИМХО. Больше половины настроек бесполезны и неюзабельны на практике, особенно в больших проектах. Дикое нагромождение HTML, что собственно противоречит концепту развития и основной задачи CSS - облегчить HTML, минифицировать код. Не для этого развивали CSS и HTML, чтобы возвращаться к методике верстке по типу HTML1 - 4, когда атрибуты и опции стилей прописывались через style в теге. По итогу полезность представляет только сетка, собственно как и в бутстрапе.
это все чудесно. Только как я уже говорил, основываясь на своем опыте и опыте компаний в которых работал, практического применения для всех плюшек мало. Ровно та же проблема и с bootstrap. На практике в основе используется только сетка. ИМХО. Наиболее эффективно используется foundation, в меру активности развития самого фреймворка. Опять же, это все вкусовщина, если найдутся те кто хочет пользоваться Tailwind - пожалуйста. Но как по мне он слишком перегружен и под рядовые задачи малого и среднего порядка не подходит. А под крупные проекты как правило берется база например того же foundation и перепиливается строго под проект, к чему он очень расположен.
Всем привет, меня зовут Анна style="display: Блок;"
И тут я такой, который боится больше 7 атрибутов тегу добавлять)🙈
😄
атрибуты быстро считываются браузером, потому что для него это обычный текст, не нужно делать отдельные запросы и скорость в потоке никак не замедляется
какая-то мутня
это что, сделано для людей, у которых начинаются панические атаки, при виде css-кода?
Можно ставить множественный курсор удерживая кнопку option и кликая в нужных местах ( если надо много где ввести идентичные изменения). Либо можно растянуть курсор по вертикали на несколько строк удерживая Shift + option
Я больше за компонентный подход во всем. БЭМ ))
классный урок. без воды, все четко. сразу практика. круть.
Даже не представляю. как это можно использовать на реальном проекте в команде.
а я сразу понял, насколько круто решить все проблемы с тоннами говно css, который перебивает друг друга и каждый тулит свой велосипед
Наверное ты вообще с сайтами и фреймворками не работал, если не представляешь
Все упирается в вопрос: "Для чего?", если вы делаете уникальный стиль, то действительно - это вам не нужно, но если вам нужно на скорую руку создать для чего то быстро стили - то тут может помочь.
Ну я так понял это чтобы стандарт в разработке в команде был, там где есть стандарт - меньше ошибок будет
Если речь не идет о компонентах, к примеру в реакт, то запаришься такое править. А так идея ясна и хорошо преподнесена. Спасибо!
Видос надо дополнить. Народ думает, что вместо одного класса теперь надо лепить кучу мелких, надо обязательно указать, что можно создать свой класс tailwind состоящий из этих мелких и применять его, и модифицировать его если надо всем заголовкам (например) поменять цвет.
А что мешает сразу написать этот класс в css без использования tailwind классов? И гуглить документацию не надо.
@@alexandrkositsky7698 по факту некоторые так и делают, тупо берут готовую библиотеку по типу bootstrap или tailwind и копаясь в коде убирают то что им не нужно и возможно совершенствуют то что им оооочень нужно, НО главная проблема это время, лень и самое главное бессмысленость потому что 1. Если дальнейший код перейдёт другому разрабу он запарится понимать что и как, а 2. Проекты рознятся, а заказчик может сказать мол никаких библиотек мол долго грузится будет и всё...(по факту это и есть причина почему сейчас популярность бутстрапа стремительно падает, даже после 5ой версии)
Его обычно не так юзают) Его используют не при верстке, а при написании стилей, используя препроцессоры scss/sass:
.demo {
@apply py-2 px-3 bg-red-300 text-xs;
}
что аналогично к:
.demo {
padding: .5rem .75rem;
background-color: #feb2b2;
font-size: .75rem;
}
И, иногда при верстке уже можно добавить 1-2 класса, если нужно какое то отличие от уже написанного класса.
Но, если воспринимать Ваш ролик, как эксперемент, мол, можно ли сверстать без стилей - вполне годится)
Спасибо за инфу! В таком ракурсе использование этой либы выглядит более уместно.
Да. Используя CDN такие возможности отпадают, что указано в кадре с установкой CDN.
На офф. сайте, это называется - old school. :)
А чем это лучше обычного sass/css ? По-моему это не правило, а только если много классов надо накинуть
Класс, спасибо большое.
(Чуток не хватило слов про то, что эта верстка теперь автоматически отзывчива и почти адаптивна)
Вы умница, спасибо большое ❤
Ммм, чуть ли не на каждое свойство отдельный класс. Обычный функциональный CSS. И это ни разу не круче бутстрапа
Круче хотя бы в том, что вся команда работает со стилями одинаково. Как бы вы не старались, у каждого в команде свой стиль написания CSS. А Tailwind дает возможность стилизовать страницу декларативно, применяя классы, одинаково известные каждому члену команды ☺
@@user-tg6wg3ji8l "свой стиль написания css" 😂. Смешно
Методологии написания классов кто отменял?
@@user-tg6wg3ji8l в нормальной команде используется БЭМ. А для вновь прибывших есть практик-лист с минимальным набором задач, чтобы вновь прибывший сотрудник быстро включился в работу команды. Так что, если тебе приходится работать с разношерстным кодом в одной команде, то ваш тим.лид говно, которое не способно организовать рабочие процессы.
Круче, есть возможность переиспользования стилей по отдельности для конечных пользователей/заказчиков. А то что нагружено, привыкнуть легко. А ещё есть Headwind для TW.
@@drampier3811 что мешает использовать tailwind с apply для БЭМ в хорошей команде? И БЭМ практика плохая, уже начинает устаревать, редко кто использует в новых организациях.
Отлично всё показала. Спасибо!
Довольно достойная замена bootstrap, если не лучшая... Благодаря этому видео я теперь понял принцип работы bootstrap. На последних минутах уснул 😄но не из-за скуки, а потому что поздно ночью смотрел лёжа в кровате. 😄💪 Сегодня обязательно попробую этот метод
Какой-то ад.
Кто-то умный 15 лет назад: давайте разделять html и css, чтоб не было каши и можно было спокойно менять css не трогая html который может рендериться на сервере.
Кто-то умный при разработке html5 : го уберем теги, которые существуют для стилизации и не несут в себе семантики. Стилизация - задача css и это удобно и логично.
Кто-то не очень умный в 2021: а давайте писать всё вместе в одном файле, так же быстрее гавнокодить.
Фу, ужасно.
Лучший коммент!
Когда css отдельным файлом, у меня он застревает в кэше. После каждой правки нужно чистить кэш, что бы увидеть что получилось
@@МихаилИванов-м5н сочуствую вам, в нажмите кнтрл + шифт + i , там выберите пункт "сеть" и уберите галочку с "кэшировать".
топ, но спасибо за это видео, я думал что тайлвинд такой хайповый, типо может это что-то полезное, а они оказывается заново изобрели инлайновые стили и переименовали немного свойства css для удобства (хотя какое в этом удобство), можно сказать попытались изобрести свой sass ))). Лучше бы думали над всем проектом, как лучше оргинизовать свой подход к написанию стилей.
@@arthurshaidullin7981 Спасибо!
Очередная фигня где у одного блока 100500 классов. Код нечитаемый становится от таких фреймворков. Лично я не использую никаких, вполне хватает флексов!
Все повторяющиеся элементы в экспорт можно добавить и обозначить своим классом. И всё читабельно.
@@poplach Создай свой класс в style.css и запихни в него все 100500, что у тебя были в html твоего элемента ( через @apply).
коротко и ясно, я лишь в одном моменте слегка запнулся, но там тоже всё понятно. спасибо за материал
Все хорошо пока дизайнер не придумает что-то другое. Куча классов для больших проектов ужасно.
Можно использовать для проектов, где не планируется привлекать дизайнеров
@@annblok_webdev ну разве что сам себе дизайнер. А как framework себя показывает в google speed?
Дизайнер, это зло ))
я и с дизайнером норм кодил на нем )0
Ну представьте вместо 200кб будет толко 15кб)
Большое спасибо за ваши уроки🥰
Больше всего в этом видео мне понравилась Анна Блок
Знаете зачем на самом деле нужен Tailwind? Для забавы и быстрых demo-к! Я серьезно! Давайте на время опустим JS и будем рассуждать логически, при использовании Tailwind, код становится нечитаемым, для отдельно взятых элементов он становится еще и сложно повторяемым. Сколько нужно классов Tailwind для описания действительно красивой кнопки, которая в свою очередь, имеет прекрасный юзабилити? Много! Представьте, на сайте у вас 10-ть таких кнопок, в этом случае, сразу ставиться под сомнение одно из достоинств Tailwind, размер! Автор упоротый и упорно оценивает размер CSS файла Tailwind после Post CSS, тогда как в HTML код разросся до безумия.
Помнимая все эти (и еще кучу других) нюансы, мы, рано или поздно приходим к выводы, что реально использовать Tailwind можно только в случае написания на нем компонентов с использование БЭМ. В это случае, сразу приходит понимание, а зачем? Зачем он (Tailwind) вообще нужен, если с помощью него мы по сути, будет писать свой фреймворк и будем писать его с нуля, с учетом всех текущих проблем и багов, с учетом всех хаков, еще и JS нужно будет запилить или использовать Vue, Riot или React.
Проще кастомизировать UIKit или Semantic UI, у которых к стати есть и свой набор утилит для быстрой верстки, чем побороть Tailwind. Всем удачи! Да и почему RUclips постоянно и упорно рекомендует мне этот канал...
UPD: Это не единственные проблемы Tailwind, проблем просто куча, лень описывать тут все нюансы. stackoverflow в своем фреймворке учла часть этих проблем. Однако Адам (автор Tailwind) по всей видимости, далек от больших проектов и наивно верит что он изобрел лекарство от всех болезней, тупо раскидав каждое свойство в отдельный класс, я тоже так могу :)
Это все потому, что его не так надо юзать, как это показано в видео, он создан не для быстрой верстки, а для быстрого написания scss/sass кода
Ну видосик то интересный ло*ов на свои курсы надо как-то заманить.
@@lehaonuchin К девушке вообще претензий нет.
Мне просто интересен сам эффект Tailwind, все вдруг решили что это Г - будущее, и вот уже появляется тема для обсуждения, переход Bootstrap на Tailwind подобную структуру, благо автору (руководителю\идеологу) Bootstrap, хватает мозгов понять что весь этот сброд сошел с ума. )
Жаль у меня нет возможности написать статью на Хабре ((
Я вижу один огромадный минус ...запихнув это все в один файл с немереным количеством классов мы получаем глубоко тормознутый сайт. Остается еще и все js впихнуть во второй файл и по лесять+ сек ждать загрузку каждой страницы))
согласен почти во всем. наследие атомарный css часть 2
CSS в HTML запихали, теперь осталось JS также писать. По утилитам.
Мне правда становится страшно от того в какую степь веб идёт. Казалось бы, у нас уже есть гриды. Есть sass/scss/less миксины. Но нет, людям этого мало, и они решили воскресить инлайн стили, без приемуществ этих инлайн стилей. Про маленький размер CSS говорить нет даже желания. Конечно он будет маленький, ибо мы его в HTML перенесли, да ещё и дублируем постоянно.
Верстальщиков с их Tailwind'ом надо разворачивать на пороге, дабы кровь не портили.
скоро html/css не будет, будет дизайнер делать макет и программа выдавать код. Так в чпу тоже случилось. Сначала от руки со стойки программы писали)
как раз верстальщики на tailwind будут более востребованы тк в разы увеличивают скорость верстки сайта, а значит более интересны работодателю
Видимо кому-то нравится придумывать названия классов, абсолютно бесполезное занятие в 90 процентов случаев.
@@zigzag2341 как потом править будешь в хотя бы среднем проекте. через месяца 4 когда забудешь какой класс за что отвечает не не так когда глаза будут вылазить от этой каши. плюс еще их там целая масса!)
Вот это подарок на 23 февраля)
Офигеть оторваться не мог)
2 раза бегал на кухню за чаем, до чего было интересно смотреть!!Лайк Аня!!Видос зачет!!
Спасибо 🤗
А как быть если это разбросано по нескольким страницам и во многих местах? Так бы в css поменял и все, а тут как это делается? С одной стороны удобно быстро сверстать, но правки могут отнять много времени :(
Все уже давно используют библиотеки которые позволяют делать компоненты. Даже если это не spa. Если в проекте глобальные стили в 2023 году, то это похоже на какой-то Легаси изврат
@@zigzag2341 если не затруднит дайте пару ссылок на статьи, чтобы понять о чем вы говорите
За плагин Live Server спасибо, раньше приходилось тянуть бойлер-плейт или писать автоматизацию руками, а тут одна кнопка и все работает ;)
В шёчку надо поцеловать блогерше=))!Новое пока ещё у тебя тут!Остальные ещё не знаю!
О, как раз только начал эту либу юзать) интересно будет посмотреть.
Отличное объяснение. Умничка , спасибо
Интересно использовать его вместе с файлом css
Так удобнее и быстрее.... круто😏👍🏻
Какая-то абсолютно бесполезня штука. У каждого объекта на выходе получается дикое количество классов, каким образом это упрощает жизнь, мне лично непонятно.
Руки бы сломать тем, кто это придумал. Нормально делай - нормально будет. А не вот это вот всё.
@@AlexZHIMuk Ну это ведь модно, а остальное не важно)
Анна снимите подробное видео пожалуйста по верстке реального сайта с применением Tailwind
А как работать в Tailwind с псеводоэлементами? К примеру :before, :after? Правильно - никак, придется таки создавать css файлы) Нужно ли такое решение? Как по мне сомнительно)
и как часто те надо?
@@KostiaBazrov каждый день видимо)
Просто пишем класс before:
там есть весь набор и before / after / hover / nthchild и тд.
Оооооо, наконец-то он набирает популярность, ура!
Да 👍🏻
Из минусов - необходимо постоянно елозить по он-лайн документации.
А кончится обычно - 100500 !important
Вы всегда, когда делаете сайты - сидите только в доках? Если есть практика, их используют минимально. Для учебных целей - это ок.
@@annblok_webdev Нет, конечно.
Просто правила CSS универсальны, а тут правила для правил.
Размер файла стилей тоже впечатляет 3 мегабайта!
на заре изучения CSS я тоже думал о таком подходе - наплодить 100500 примитивов. Но беда в том, что возможных примитивов будет всегда больше чем исходных правил, на порядки. И или придется жестко ограничивать набор, или утопать в библиотеках примитивов.
@@wov2004 читайте документацию. Можно настроить автоматизацию сжатия итогового файла стилей. Останутся только используемые классы. Размер вас приятно удивит
Документацию вы будете елозить не чаще, чем документацию любого другого css фреймворка. Тем более в WebStorm и PhpStrom из коробки предлагают автодополнение для классов Tailwind. Другие популярных IDE наверняка тоже это делают, но или плагин есть.
@@moscowtv5767 Это интересно, гляну, спасибо.
Ого, судя по комментам не все еще готовы к Tailwindcss.
Вот смотрю я на это и как представлю в рабочем проекте эти тонны классов аж в дрож бросает, имхо конечно но после flexbox смысл во всех этих бутстрапах и иже с ними прям резко отпал, хотя возможно совсем для тех кто не хочет вникать в css а тупо шпарить по документации шаблонные сайты возможно и подойдёт, хотя эти люди как правило на тильдах сидят))
Bootstrap на флексбокс и сделан
@@skeelo3157 это ща шутка или троллинг неумелый?)) до 4 версии было всё на флоатах)) вот как раз с 4 версии надобность в их сетках и отпала так как активно начал использоваться flex
@@SolNZ2012 у БС помимо сетки есть хороший UI который проверенный и кроссбраузерный а лишний код удаляется на стадии сборки проекта.
А столбцовое редактирование в VisualCode видимо забанили(
Что вы хотите от блондинки :)
Не очень мне по душе такой подход на каждое свойство отдельный класс и выходит, что на описание 1 кнопки может уйти 6 - 7 классов. Уж лучше bootstrap да и то что обычно оттуда использую это сетка.
Почитайте в доке про использование @apply
Очень удобно режим git. Особенно в третьей версии. Можно делать на лету. В итоге все пишется в новый файл. Только те классы, которые нужны. А для длинных классов можно с помощью postcss объединять с помощью @apply те же самые классы в 1 новый и использовать его для дива. Плюс ещё в режиме jit есть возможность dark режима и самое прикольное peer-placeholder-shown
С помощью style type="text/tailwindcss">
Лучшей альтернативой этому было бы заменить вереницу класов библиотекой миксинов. Для их привязки использовать ТОЛЬКО ЛИШЬ ОДИН класс в виде модификатора -- что-то, что отвечает за общий стиль проекта, а остальное добавлять миксинами, который тоже могут быть сколь угодно кастомизированы.
я миксины не изучал еще, но вот смотрю видео и думаю ужас сколько классов - как же это неудобно! спасибо за подсказку про миксины!)
Ну такое.. а потом фиг пойми что каждый миксин значит. Лучше уже вообще избавится от css и стилизовать все в html файле, но скрывать тонну классов под спойлер, а предназначение блоков описывать комментариями, тогда названия идиотские придумывать не нужно для каждой ноды.. это дико бесит каждый раз выдумывать то что потом все-равно будет не логично и будешь путать, а так обозвал секцию комментарием, написал классов для блока, свернул все классы чтобы отображалась только структура документа ну или оставлять первые три класса, и бери дальше редактируй что нужно. Можно вообще превью какое-то добавить как это приблизительно будет выглядеть, чтобы поставив курсор в определенное место оно отображало приблизительную визуальную картину, миникарту что-ли , а то вслепую кодишь, перекомпиливаешь, грузишь данные с Реста, и только уже в браузере видишь картинку .. усложнили все😢. Хотя бы для теилвиндоских классов что-то подобное сделать
@@zigzag2341 начались выводы о том что гвозьди нужно забивать головой
Вот это круто! Просто взял, вставил класс и дело сделано
просто взял, написал две строчки, дело сделано. А, еще тейлвинд в топку.
Смысл подключать всю эту библиотеку, если можно написать самому без лишнего CSS?
Можно, но зачем изобретать велосипед?
Субъективное мнение, очень тяжело читать все эти классы , эти фреймы css в основном используют для сетки , по этому особого значения перехода с бутстрапа нету
Да, согласна, классов для одного только тега может выйти очень много. Но что-то в этом тоже есть 🤔
@@annblok_webdev нет конфликтов между классами да и important не требуется.
@@annblok_webdev А вы его не пробовали юзать вместе с переменными CSS? Ну например присвоить несколько классов в одну переменную и потом такую переменную присвоить как класс тэгу?
Информативно👍
Довольно скудный у него набор компонентов, к тому же большинство из них платные.
Ничто не мешает вам их прописать самостоятельно
Тоже самое что писать свойства инлайново, какой смысл?
Хуже того - Инлайновые стили хотя бы можно биндить через JS.
@@scarlatum как и добавить класс)
Все прелести tailwindcss открываются когда начинаешь его кастомизировать.
Очень крутая штука, верстаю исключительно на tailwind с конца 2020 года. Бутстрап - это как кнопочный телефон. Работает, но вы им пользуетесь?
Bootstrap уныл на фоне Tailwindcss, это очевидно, когда обновляю старые проекты на Bootstrap у меня возникает эстетическая депрессия.
в ролике не раскрыт tailwind в должной мере, а именно чем он хорош и чем он отличается от bootstrap и ему подобных css библиотек.
Это какая-то чухня. Как и Bootstrap.
CSS тоже чухня, мы просто в фотошопе стиль кнопки рисуем и картинкой вставляем. Причем кучи стилей писать не надо, просто и все! Попробуйте очень удобно!
@@moscowtv5767 Непонятно, в чём вы хотите меня убедить.... Или это сарказм такой?
лол. экспертное мнение
@@moscowtv5767 хаахахах, ну и гониво) я бы и рубля не дал за такую вёрстку
@@moscowtv5767 а хули? Давай тогда будем весь макет сохранять картинкой и добавлять через img. Заебись, же!
А если например уже свертано несколько страниц на TW. И мы хотим на всех h2 отцентрировать текст или пометь размер шрифта. Нам нужно дописать/удалить класс в каждом теге h2 каждой сверстанной страницы?
Нет, нужно использовать @apply, заранее интегрировав Tailwind к инструменту, который вы используете
@@annblok_webdev но ведь с @apply тоже как то выглядит странно класс в который ты накидываеш не свойства а другие классы и в чем принципиальная разница от того же scss?
Исхода из своего опыта, могу сказать, что tailwind несёт утилитарный подход. Но по-настоящему изолированные стилизованные компоненты, с возможностью работать с ними components as selectors выглядит более разумным. Tailwing запаришься править, если необходимо сделать глобальные правки. Поэтому, пока что, css in js мой выбор)
если рендеришь реактом, какая разница кнопка есть кнопка
Ооо, Анна растёт)))
Как залить на Worldpress что бы работал как ботстрап 5 - picostrap (Плаагин - тема ) ?????
thanks so much. You are rock.)
Какой в этом смысл, я тоже самое в style="xxx" прописать могу
ужос: 2023 мы вернулись назад в 2000е к html style просто с помощью классов
Можно нажимая на колесико выбирать несколько дивов чтоб в каждом отдельно неписать
Если бы он не пересекался с бутстрапом по названию классов - было бы круто использовать его как навес. А вот вместо Бутстрапа - ну это вряд ли. Слишком много всего уже заточено под него.
ruclips.net/video/FrqKiBxNlg0/видео.html тут показано как добавить префикс к стилям тайлвинда чтобы они не пересекались с бутстрапом (это второй урок, в первом как установить чтобы это работало)
Zdravstvuyte ,Mozet xotelibi sdelat sayt s registracioy,Na , GitHub Copilot в Visual Studio,Paprobovat,
Подходит для прототипирования
очень информативно и понятно
Спасибо за видео. Но такой код это ужас :) Не в обиду вам, а больше в обиду тейлвинду.
Вы по сути пишете инлайн стилями, только еще и постоянно гугля документацию, есть ли там нужный класс или нет.
Пока первое впечатление - у tailwind есть плюсы в виде утилити классов отступов (m-2), сетки (grid-col-4), типографии (text-xs, text-center). Возможно еще что-то...
Но пытаться использовать все остальное это стрелять себе в ногу. Проще в css файле написать нужное отображение. И кода станет меньше, и не надо учить и гуглить миллион тейлвинд классов.
UPD: я был не прав. Тейлвинд имба 🔥
Он конечно не отменяет написания обычного css, но в тех местах, где можно обойтись 2-3-мя классами, его хелперы типа (m-2, p-3, text-sm, flex, items-center) просто супер крутые. А такое бывает очень часто.
мда... минуса на родителя , у которого задана ширина - не ставятся. этот бородатый приём известен ещё с бут 3
Круто! Реально столько головной боли снимает!
Очень здорово! Спасибо!
Мне кажется лучше разбить на компоненты чем так прописать каждому классы ))
как идея того что ты можешь сделать сайт чисто прописывая стили - это прикольно. Но честно сказать написать множество классов, вместо одного общего... ну что-то странное. Не готов это принять.
tailwindcss.com/docs/reusing-styles#extracting-classes-with-apply
можно сохранить стиль в одном месте и переиспользовать
И как потом такой код читать другому разрабу? это же неудобно в командной разработке. Загуглите минусы данного фреймворка, их слишком много чтобы его использовать. Как по мне лучше стать мастером в scss чтобы не писать код который в дальнейшем тяжело будет поддерживать.
это конечно круто, но что делать с мобильной версткой?))
то есть классы указал, но как для разных экранов поступить, чтобы какие элементы показывались, какие-то скрывались, что-то было шире, а что-то уже или выше/ниже ?
Ответ на ваш вопрос тут tailwindcss.com/docs/responsive-design
как раз для мобильной она оч даж подходит ! подсел на нее
Хм.......А чем лучше я так и не понял!?) Даже чтобы понять , подпишусь!
Голос очень приятный. Тебе надо сказки рассказывать на ночь 😉
на вебкаме ага
почему сейчас никто не использует Dreamweawer?
штука имеет место быть. и много проблем перечисленных в коментах надуманы(почти все). Она не заменяет БС абсолютно никак это разные вещи. Для верстальщиков не нужна. Очень удобна для бекэнда потому и добавлена в Ларавел и получила такую широкую популярность. почему так вопрос другой.
а про @apply видимо блогер не знает)
Если хотите использовать минимум классов, то используйте Smart-grid от Д.Лаврика.
Очень крутой фреймворк!
мне как новичку интересно для каких сайтов подойдёт такой код, где его можно использовать и в чём его минусы и преимущества для того чтобы не использовать css ?
Из минусов получается очень много классов у тегов и возникает из-за этого неразбериха. Из плюсов можно на таком фрейме практически любой дизайн составить быстро. Я наверное чуть попрактикуюсь и буду в своих личных проектах пользоваться ибо дизайнер из меня хреновый. А в нормальных лучше без фрейма, ну на крайняк bootstrap
@@АртёмЛукичёв-п2ы благодарю
Нигде, на реальном проекте что бутстрап, что это чудовище будет только мешать.
@@ozimnadius ну, бутстрап ещё хоть чем-то помочь может. Сетка там объективно удобная. Насчёт его остальной части спорно. А вот tailwind совсем не годится
@@АртёмЛукичёв-п2ы удобная до тех пор пока она стандартная, нет гибкости, для сетки есть гораздо более лучшая вещь, если уж без сетки никак.
Я думал с выходом flex && grid . Css фреймворки вымрут , ан нет . Живее всех живых !
ты хоть разницу между тем, что написал понимаешь?
@@grantorino3465 а что ? Кто то ещё использует css фреймворки ?
@@user-qy2rf2bz3k а css фреймворк это только сетка???
@@grantorino3465 нет конечно , но зачастую от всего фреймворка используют 10% его функционала .
@@user-qy2rf2bz3k за какую частую? Используют и по полной, смотря что далают.
Ребят стоит учить верстку?Всмысле востребованная работа?Я новичок
Вёрстка - это только часть работы. Тебе нужно уметь делать адаптивную вёрстку + JS с фреймворком. Тогда можно искать работу. Если ты офис имеешь ввиду
Ответ ruclips.net/video/DJY66pNaFuU/видео.html
Конечно, меньше слушай больше кодь.
НЕТЪ! Всё будут делать роботы!
@@user-tv1jy1gv7b Вот зачем вы человека в заблуждение вводите? Какой JS фреймворк? О чем вы? А что, адаптивная верстка уже не верстка?
Блин, да проще миксинов накидать и сверстать. Терпеть не могу бутстрап. Он хоть и адаптивный, но этот адаптив сделан через одно место, а этот фрейворк еще хуже.
Такие штуки нужны чтобы быстро накидать админку более менее симпатичную и все. Версткой заниматься на этом нельзя
Там есть миксины
максимум для админки или кабинета какого-нибудь, для реального сайта это использовать упаси боже, столько проблем будет что ну его в пень, максимум @extend в scss и будет нормально, такое количество классов это плохая практика, до сих пор с ужасом вспоминаю когда дают проект на правки по бутстрапу, где все криво гвоздями прибито
Честно не увидел чем он круче Bootstrap 5 ? вот серьезно , только то что есть Grid и тут про него просто сказали, но не увидел Grid разметки, где и как работает тут разметка по зонам ? А обычные колонки делать через Grid ? ну хз честно, писать "Это круче, чем Bootstrap 5" .... ну такое себе, крутизны нет. Видео хороша показано знакомство с TailWindCSS не более.
Про Grid подробнее информацию можно найти в документации
каркас ? это из области подвала и шапки ?
Почему не показали русскоязычную версию сайта?
Пока вы не написали, я даже не знала, что на русском есть 😅 Уже давно привыкла на англ читать доки, но если вдруг кому интересно, то вот она tailwindcss.su/docs
Плюсую! Да Анна ты права то что tailwindcss гораздо лучше чем bootstrap.
Шаблоны tailblocks.cc/
Ещё шаблоны dev.to/mariann93502220/15-awesome-tailwind-css-templates-and-themes-55jh
Анна Молодец продолжай рассказывать про tailwindcss и не слушай там диванных аналитиков которые не компетнтные не в чём и которые не делали сайт на фреймворках и кричат то что платные шаблоны у тайлвинда, да они платные но они того стоят. Так что зачехольтесь не грамотные и не адекватные писари. Анна сделай видос vue.js+tailwindcss интересует бордер радиус самой шапки
Подписался
🥳
очень напрягает когда микрофон ставят прямо перед ртом и все слова дублируются шумом от дыхания, неужели микрофон нельзя поставить чуть сбоку или одеть поролоновый чехол, ну камон масса вариантов же есть
Просьба увеличивать экран. В мобиле в дороге не видно ничего
Посмотрела через свой смартфон - видно отлично
@@annblok_webdev Спасибо, но все же , по возможности , в vs code увеличивайте масштаб. И страницы в браузере.
Есть ли вобще под него плагин и тема на вп ???
Всё хорошо но классов слишком много
Зачем всё это,если есть адаптивная верстка???
А зачем мы учили верстку по платным курсам,когда можно было вот так верстать?и сколько опять платить нужно за программу?
Bootstrap Бесплатный а эта ,хз!
@@teador1131 но курсы платные
@@ant3413 нет есть и бесплатные)
совсем разленились, ёкарный бабай
Ладно, вы меня убедили! Перехожу с Bootstrap на Tailwindcss✈️
гыгыгы. сдался?
да ну на...
в ручную сам напишешь, всё как надо,....
Я что то не понял, а чем он лучше бутстрара ?
Что это за див с 10 классами? 🤢
Какая польза от этой херни (видео), по сравнению с тем, чтобы почитать доки?
Даже не скорости 2х оно не экономит время!
а в бутстрап сложнее, не осилить? по-моему, просто блажь
ИМХО. Больше половины настроек бесполезны и неюзабельны на практике, особенно в больших проектах. Дикое нагромождение HTML, что собственно противоречит концепту развития и основной задачи CSS - облегчить HTML, минифицировать код. Не для этого развивали CSS и HTML, чтобы возвращаться к методике верстке по типу HTML1 - 4, когда атрибуты и опции стилей прописывались через style в теге. По итогу полезность представляет только сетка, собственно как и в бутстрапе.
Почитайте в доке про использование @apply
это все чудесно. Только как я уже говорил, основываясь на своем опыте и опыте компаний в которых работал, практического применения для всех плюшек мало. Ровно та же проблема и с bootstrap. На практике в основе используется только сетка. ИМХО. Наиболее эффективно используется foundation, в меру активности развития самого фреймворка. Опять же, это все вкусовщина, если найдутся те кто хочет пользоваться Tailwind - пожалуйста. Но как по мне он слишком перегружен и под рядовые задачи малого и среднего порядка не подходит. А под крупные проекты как правило берется база например того же foundation и перепиливается строго под проект, к чему он очень расположен.