Верстка сайта еще никогда не была настолько простой! Вышла замена Bootstrap?

Сколько сайты не верстай, но с развитием веба верстка стала сегодня настолько простой, что с ней справиться даже каждый школьник.Сегодня я хотел бы рассказать про замену Bootstrap и выход нового фреймворка Tailwind css, который просто изменит вид верстки сайта благодаря своей новой концепции Utility first. Сейчас для того что б верстать сайты на базовом уровне можно даже не создавать CSS файлы. Достаточно применять классы созданные на фреймоврки и добавлять их в Html. Что полностью облегчает верстку и не доставляет лишних хлопот.

Nicepage - это сайт-билдер, с которым справится каждый.Размещайте элементы дизайна свободно, как в Figma и Photoshop, при этом получится работающий сайт и чистый HTML код.Nicepage автоматически адаптирует сайт для мобильных устройств.

00:00 - Верстка сайта еще не была настолько простой
01:01 - Как верстали сайты 8 лет назад, приход к Bootstrap
01:53 - Как создавался Bootstrap
02:43 - Почему Tailwind это не обычный CSS фреймворк
03:46 - Когда нет смысла использовать Css фреймворки?
04:10 - Преимущества Tailwind css над Bootstrap
04:40 - Пишем первый код на Tailwind, сравнение с Bootstrap
07:46 - Пишем первый готовый сайт на Tailwind за две минуты

[vanibron]

Я работаю в команде, которая использовала tailwind уже на нескольких крупных проектах на Next.js. В конечном счете можно сказать, что подход себя оправдал. В случае с использованием React-компонентов становится неважно, сколько раз у тебя повторяются классы и прочие моменты, актуальные для простого HTML. Если речь идет о кнопке, то она все равно объявлена один раз, и меняется что-то в одном месте. К тому же конфиг tailwind позволяет лепить из фреймворка что угодно. Конечно те же CSS modules дают гораздо больше свободы, и с tailwind приходится порой как следует изголятся. Но со временем стало ясно, что в итоге работа над проектами пошла быстрее. Сравнивать tailwind с бутстрапом смысла нет, кстати. Bootstrap - набор компонентов, tailwind - набор утилит (хотя компоненты там тоже можно легко создавать). В общем, инструмент однозначно не на любой случай - когда я просто верстаю лендинг, например, я по-прежнему использую BEM. Но вот в разработке на React все чаще обращаюсь к tailwind.

[cmpnqqq]

Спасибо, давно искал нечто подобное.

[uvwzkgt]

Нужно протестировать, интересно, хотя не являюсь сторонником фреймворков. Спасибо за видео.

[vladislavsk]

Бредняк писать у тегов миллион классов что бы заменить примерно такое же количество стилей.

[marinaermilova]

Привет, мне понравилось, пойду пробовать. Спасибо

[toyotominashimoto]

Годный видос! Благодарю. Стоит выучить тайлвинд в будущем. А тебя попрошу снять отдельный подробный видос-урок по gridcss:)

[umnqibb]

Ты бы сравнил с bootstrap 5, там много утилити классов и их можно генерировать, так же там есть PurgeCSS

[mkfodhf]

Такое себе, если честно. В style не проще ли прописывать в таком случае?

[kyberplay]

Вродь нормуль css фрейм. Пасиба =). Попробую применить в проекте).

[iloveyou-cbot]

не подскажите что за тема используется в видео для VisualCode?

[AlexAlex-shmz]

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

[jxjbofc]

Я не совсем понимаю подход tailwind. С тем же успехом можно начать писать в атрибуте style. Посмотрите на крупные проекты. Там такой подход не приживается от слова "совсем". Все стремятся к изоляции стилей компонентов вместо замешивается их в одно поле из 600-800 классов. Потому что иначе вы не сможете масштабировать процесс разработки на большее количество кодеров. Tailwind это про быстрое прототипирование, которое надо выпиливать из проекта сразу как на нем появляется третий разработчик.

[nikghost]

Довольно интересная штука. На первый взгляд это дико не удобно, но эта колбаса пишется один раз во время стилизирования элемента. Потом просто заменяем классом, куда через @apply bg-gray-500 px-2 hover:bg-red-100 пихаем всю колбасу и забываем.

[timurkash]

говорится как тэйлвинд, а не тэйлвайнд

[frozeninside]

В закладки добавил, в деле пока использую материал и бутстрап5, Спасибо за альтернативу )

[artyomvashkevich]

Ну да. Удобная штука. Но вот я прочитав комментарии и вправду лучше бы еще добавил возможность замены простыни классов на один какой-то свой класс. Это было бы точно удобнее. Хотя если использовать react vie или svelte, то по сути тут достаточно по сути один раз отредактировать в нужном стиле компаненты и затем использовать не чистый Tailwind, а уже дальше использовать стилезованные компаненты. Ну а так тучу классов писать так себе вариант. Но один раз написать можно конечно)))

[evstafyevandrew]

крутая утилита. Теперь только она. Жду выхода 2-ой версии её.

[grammidin]

Вместо двух классов написать десять. Действительно, удобно. И ни фига не запутаешься в них.

[itpmcen]

Меня всегда отпугивали готовые решения для css, так как все эти готовые решения всё-таки заставлют вникать в них. Из этого следует, что ты вместо того, чтобы понять как все работает, запоминаешь имена классов, что не совсем хорошо, так как дизайны проектов по ним тупо не бьют. Поход всех этих готовых решений подходит только под внутренние проекты, которым нужен в основном функционал, а текущий канал рассказывает в основном, как верстать, а не писать фронтенд.

[yknwenp]

То есть, почти то же самое, что и с использованием атрибута "Style" в html