Comments 13
Прочитать пробовали перед постингом?
Это поле ввода с 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">
С точки зрения написания быстрого кода в html — да, но если начинать переносить это всё в классы через apply, мне это показалось менее удобным вариантом.
Представьте себе, что Tailwind появляется только во время компиляции. То есть вы пишете обычный CSS с именованием и всё такое, а умный компилятор преобразует ваш CSS в утилитарные классы. Это было бы воплощением мечты.
Странное заключение, после статьи, где половина жалоб на усложнение дебаггинга стилей в браузере.
Дебаггинг здесь не в прямом смысле, скорее редактирование стилей в браузере, перед добавлением их в код.
Я про это
Tailwind затрудняет настройку дизайна в браузере
Я занимаюсь как дизайном, так и frontend-разработкой, поэтому редактирование в браузере с помощью DevTools для меня крайне важно. С Tailwind работа в DevTools может стать сложнее. Скажем, например, я хочу изменить отступы для компонента. Когда я изменяю значение класса py-3, это влияет на каждый использующий его элемент страницы.
В данном случае в браузере он всё-равно получает tailwind, и сталкивается ровно с теми же проблемами — невозможно набору элементов быстро прописать какой-нибудь стиль — нужно вручную определить селектор, который будет применяться к этим элементам или каждому из элементов добавлять класс тейлвинда (это принципиально хуже традиционных подходов).
Причём разный код в браузере и в исходниках — это отдельная проблема, которую все мы давно знаем на примере препроцессоров (хотя с map'ами это значительно удобнее, чем без оных)
Про дизайн системы добавлю, что таилвинд идеален. Я настраиваю все то что мне нужно в конфиг файле. Я тщательно подхожу к этому вопросу. Все переменные у меня видны в самом начале, так как это же дизайн система, а не фантазия самоучки начинающего дизайнера-фрилансера. Далее я использую всеипредустановленные классы. Все что мне не нужно у меня отсутствует. Мне не требуется переключаться между кодом js и CSS(почти). Я оценил и благодарен разработчикам tailwind
Очень хорошо зашёл tailwind. Даже в проектах где его нет внедряю классы оттуда (для флекса, базовых шрифтов и стандартных марджинов). Так как работаю с react в 95%случаев позволяет избежать создания module.css и ускоряет разработку существенно.
Tailwind приведёт к тому, что многие сайты будут выглядеть похожими друг на друга, подобно тому, что было много лет назад с Bootstrap
Tailwind не ведёт за собой готовые компоненты, а только лишь переписывает классы под все браузеры.
Взгляд на Tailwind CSS