TailwindCSS — не вредит ли такое количество тегов в HTML оптимизации сайта?
Нет не вредит если использовать правильно.
Крч когда мы по старинке верстаем сайт алгоритм такой:
1. Создать пять дивов(условно)
2. Всем дивам указать один класс, например .card
3. Прописать стили для класса .card
За счёт этого подхода мы пишем стили один раз а использовать можем везде
Теперь что касается алгоритма для tailwind:
1. Создаем компонент(в реакте или vue, условно components/card.vue)
2. Создаем один div
3. Через tailwind классы стилизуем элемент
4. На странице (для примера pages/index.html) вызываем компонент, и через цикл(v-for или map) генерируем 5 копий нашего компонента(ну или сколько нужно)
По сути мы добились того же, что и в первом случае, создав один раз компонент, мы можем переиспользовать его сколько угодно раз.
Tailwind как раз интересен тем что заставляет тебя разбивать все на компоненты
Насчёт performance ничего конкретно сказать не могу, но по сути даже если бы tailwind был бы плохо оптимизирован, css не самая тяжёлая част бандла, да и то что никто из западных разрабов не жаловался на performance говорит о том что такой проблемы скорее всего нет
Вадим
Каждому инструменту своё место. Нужно что-то быстро набросать, будь то прототип, mvp или небольшой лэндинг или Вы бэкенд разработчик которого заставили верстать - допустимо.
В остальных случаях - сомнительно.
нет,нет и еще раз нет, tailwind не bootstrap у него нет готовых элементов, tailwind это по сути чуть более удобный css, у технологии нет никаких ограничений, так что верстать можно как mvp так и enterprise
Итог:
Мне tailwind нравится по трем причинам
1. Сразу в теге описаны стили, за счёт чего легче понять что за стили используются
2. Короткий синтаксис margin-left: 3rem; это ml-3 padding: 0 3rem 0 3rem; это px-3 и т.д
3. И наверное самое главное, tailwind css это фреймворк, и это решает кучу проблем, мне теперь не нужно изучать БЭМ, я теперь не выбираю между rem em и px, код у всех разрабов теперь выглядит одинаково, очень многое есть уже из коробки например размеры экрана, цветовые палитры, адаптивные единицы измерения и т.д и все это очень хорошо взаимодействует друг с другом, + есть крутая документация
Кстати на официальном сайте на этот вопрос уже отвечали
