Форум программистов, компьютерный форум, киберфорум
mr_dramm
Войти
Регистрация
Восстановить пароль
Рейтинг: 5.00. Голосов: 1.

Пытаюсь понять почему tailwind это хорошо

Запись от mr_dramm размещена 03.08.2022 в 14:37
Обновил(-а) mr_dramm 03.08.2022 в 19:27

Я сейчас собираюсь делать новый проект на NextJS для SSG / materialUI / и выбираю то ли остаться на styled-components в которых я кайфую потому что все просто и понятно, то ли что то новое (Tailwindcss )

2 дневный первый взгляд на Tailwindcss

tailwindcss

Возможно у этой библиотеки высокая производительность потому что во первых на выходе получаем css, который почти на 100% будет содержать только нужный css, потому что tailwind смотрит на то что мы использовали в html и только это добавляет buid. почему почти? потому что разработчик создавая кастомные стили и добавляя в white list все равно может забыть их оттуда убрать. А white list добавляется добавляется в build.

Так как генерируется файл в котором содержится все что нужно, это означает что кэширование стилей будет оптимально использоваться в браузере один раз загрузился ибольше не меняется (но это не точно), у styled components стили подгружаются динамически и это занимает какое-то время 0.0 с чем то там секунд, пользователь этого даже не заметит, из плюсов динамической подгрузки при загрузке странице грузится меньше стилей, потому что остальные подгружаются постепенно. По моему выгоды по производительности практически нет.

И теперь я размышляю какая выгода от этого разработчику

Нужно учить псевдонимы классов
Открываем на одном мониторе вместо фильма Tailwind CHEAT SHEET а ну другом пишем код наверное так можно будет запомнить

Работаем ли мы только с html?
Основные плюшки Tailwind это то что пишем код только в html и почти не используем css файлы, но тут опять засада мы ограниченны этими классами да их достаточно много , но на пример width 300 нет так что спроси у тракториста , а он тебе иди добавь его в tailwind.config.js

Это значит надо добавить такую секцию, секции описаны в документации

Javascript
1
2
3
4
5
6
7
8
9
module.exports = {
  theme: {
    extend: {
      width: {
        '300': '300px',
      }
    }
  }
}
или сделать такой класс в кастомных файлах, кстати нужно еще подумать как удобно организовать эти кастомные файлы, чтобы потом не было бардака в котором не разберешся

CSS
1
2
3
.w-300{
    width: 300px
}
т.е. в результате все равно с чем то кроме html придется работать.

как выглядят стили в html
Есть прикольная картинка с чем придется работать разработчику, и если вы думаете что это какая то генерация, которая накидала дополнительных классов то это и есть рабочий код программиста.
просто несколько стилей адаптированы к md другие к lg и скажите спасибо что еще focus с hover нет..

или с сайта раздел mobile first там есть кусок кода который по ширине одного элемента не влез в экран

HTML5
1
<div class="relative p-3 col-start-1 row-start-1 flex flex-col-reverse rounded-lg bg-gradient-to-t from-black/75 via-black/0 sm:bg-none sm:row-start-2 sm:p-0 lg:row-start-1">
в статье на хабре написано что такое возникает только у новичков

Отсутствие семантики
Статья от автора библиотеки
Ну эта проблема решаема, просто добавьте еще немножко классов или переименовывать сами элемент dom в более семантичные например вместо div использовать person

Есть и плюшки
для VSC от Tailwindlab есть плагин, который расшифровывает названия классов, и показывает ошибки в файле конфигурации, к сожалению он не транслирует свойство css в соответствующий класс, если бы эта фича была я моя бы уверенность в полезности этой библиотеки резко возросла бы.

Выводы
Попробую написать несколько простых страничек, а там видно будет. Основное что смущает это количество классов в одном элементе если это как то можно решить то остальное не проблема.
Интересно узнать Ваше мнение, особенно у тех кто с этой библиотекой работает.

ЗЫ
нашел на хабр статью Взгляд на Tailwind CSS, пара комментариев это очень крутая библиотека я ее везде использую
Размещено в Без категории
Показов 445 Комментарии 0
Всего комментариев 0
Комментарии
 
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2022, CyberForum.ru