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