Взгляд на Tailwind CSS

[tmnhy]

После автоматического перевода неплохо редактору текст перечитать.

[bozman]

Tailwind очень хорошо заходит с apply, и последующим purgeCSS по результатам (собственно, сами авторы это рекомендуют). И можно сделать и «непохоже» и семантично. Хотя мне больше зашел Tachyons из этого жанра фреймворков. Правда, и Bootstrap последний явно движется куда-то в ту же сторону.

[bozman]

del

[Ahen]

Прочитать пробовали перед постингом?

[anitspam]

Странные переживания у автора

Это поле ввода с 17 классами CSS. Что проще: читать классы один за одним горизонтально или сканировать их сверху вниз?

Сделай так

.c-input {
  @apply
    block
    appearance-none
    bg-white
    placeholder-gray-600
    border
    border-indigo-200
    rounded
    w-full
    py-3
    px-4
    text-gray-700
    leading-5
    focus:outline-none
    focus:border-indigo-400
    focus:placeholder-gray-400
    focus:ring-2
    focus:ring-indigo-200
  ;
}

И в html можно писать в столбик, например, github.com/mdn/learning-area/blob/442c07afb8fb3f0759fd4ed9db58971cba8f60d2/html/multimedia-and-embedding/responsive-images/responsive.html#L58

        <img srcset="elva-fairy-480w.jpg 480w,
                     elva-fairy-800w.jpg 800w"
             sizes="(max-width: 600px) 480px,
                    800px"
             src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

[n4ks]

Это конечно дело вкуса, но тот вариант который Вы предложили лично мне не кажется читабельнее обычного css. Как минимум сразу отпадает настроенный stylelint-order, позволяющий не задумываться о форматировании и последовательности правил, плюс приходится включать дополнительные костыли в stylelint т.к. он вообще не воспринимает tailwind'овские at-rule, возможно форматирование тэйлвиндовских классов можно настроить, но из коробки весь этот «столбик» приходится форматировать вручную, что как минимум тратить лишнее время.

С точки зрения написания быстрого кода в html — да, но если начинать переносить это всё в классы через apply, мне это показалось менее удобным вариантом.

[extempl]

Представьте себе, что Tailwind появляется только во время компиляции. То есть вы пишете обычный CSS с именованием и всё такое, а умный компилятор преобразует ваш CSS в утилитарные классы. Это было бы воплощением мечты.

Странное заключение, после статьи, где половина жалоб на усложнение дебаггинга стилей в браузере.

[bozman]

Я думаю, что в подобных фреймворках предполагается, что некотрую часть дебаггинга произвели авторы фреймворка, и совсем на базовом уровне тараканов ловить не надо. Теоретически.

[extempl]

Дебаггинг здесь не в прямом смысле, скорее редактирование стилей в браузере, перед добавлением их в код.
Я про это

Tailwind затрудняет настройку дизайна в браузере
Я занимаюсь как дизайном, так и frontend-разработкой, поэтому редактирование в браузере с помощью DevTools для меня крайне важно. С Tailwind работа в DevTools может стать сложнее. Скажем, например, я хочу изменить отступы для компонента. Когда я изменяю значение класса py-3, это влияет на каждый использующий его элемент страницы.

В данном случае в браузере он всё-равно получает tailwind, и сталкивается ровно с теми же проблемами — невозможно набору элементов быстро прописать какой-нибудь стиль — нужно вручную определить селектор, который будет применяться к этим элементам или каждому из элементов добавлять класс тейлвинда (это принципиально хуже традиционных подходов).
Причём разный код в браузере и в исходниках — это отдельная проблема, которую все мы давно знаем на примере препроцессоров (хотя с map'ами это значительно удобнее, чем без оных)

[gBACTAKAHA]

Про дизайн системы добавлю, что таилвинд идеален. Я настраиваю все то что мне нужно в конфиг файле. Я тщательно подхожу к этому вопросу. Все переменные у меня видны в самом начале, так как это же дизайн система, а не фантазия самоучки начинающего дизайнера-фрилансера. Далее я использую всеипредустановленные классы. Все что мне не нужно у меня отсутствует. Мне не требуется переключаться между кодом js и CSS(почти). Я оценил и благодарен разработчикам tailwind

[copperfox777]

Очень хорошо зашёл tailwind. Даже в проектах где его нет внедряю классы оттуда (для флекса, базовых шрифтов и стандартных марджинов). Так как работаю с react в 95%случаев позволяет избежать создания module.css и ускоряет разработку существенно.

[Hose1021]

Tailwind приведёт к тому, что многие сайты будут выглядеть похожими друг на друга, подобно тому, что было много лет назад с Bootstrap

Tailwind не ведёт за собой готовые компоненты, а только лишь переписывает классы под все браузеры.