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