TailwindCSS стал предметом споров среди веб-разработчиков с момента его выпуска. Некоторые хвалили его за простоту использования и эффективный рабочий процесс, в то время как другие критиковали его за непривлекательный и универсальный дизайн. Однако я считаю, что TailwindCSS не так плох, как думают люди. Подожди… Хвост, что теперь? TailwindCSS — это ориентированная на утилиты платформа CSS, которая предоставляет набор предопределенных классов CSS для быстрого стилизации HTML-элементов.
Он был создан Адамом Ватаном, Стивом Шогером и Джонатаном Рейнинком в 2017 году и завоевал популярность среди веб-разработчиков благодаря своей простоте и гибкости. В отличие от некоторых фреймворков, таких как Material UI или Bootstrap, вместо предоставления вам компонентов (таких как btn или mdl-slider) вы получаете то, что по сути является стилями, в виде классов (например, bg-yellow-600 или text-4xl). Противоречие TailwindCSS долгое время был предметом споров. Многие утверждают, что это создает уродливый HTML-код, и в некотором смысле это так:
<div class="bg-yellow-200 rounded-lg p-4 mt-2">
<h1 class="font-bold text-2xl">Warning!</h1>
<p>Controversial thoughts ahead!</p>
</div>
Вероятно, вы понимаете, почему это не масштабируется. Это правда, что TailwindCSS иногда приводит к появлению более 200 строк символов, когда вы просто пытаетесь создать кнопку с плавающим эффектом, черт возьми!
Однако в некотором смысле CSS создает ту же проблему. В любом случае вам придется применить стили, и вы можете разместить их прямо рядом с компонентом. В конце концов, легче прочитать атрибут класса, чем пытаться выяснить, помещаете ли вы свои стили в src/styles/home/header/that-cool-button.css или src/styles/home/hero/why-are-there. -so-many-buttons.css.
Мало того, это позволяет вам сэкономить время придумывая имена классов. Например, вместо того, чтобы помещать класс home-page__header__button--dark++extra-large, вы можете просто добавить нужные стили, не прибегая к помощи павиана. Кроме того, нет необходимости искать это в CSS: оно находится рядом с самим элементом!
Это также структурировано
TailwindCSS также имеет структурированную систему длины, размеров шрифта и цветовой палитры, и это лишь некоторые из них. Например, если вы хотите решить, какого размера сделать заголовок карточки, достаточно посмотреть документацию по классам:
Если text-2xl слишком мал, а text-5xl слишком велик, ваш выбор сужается до text-3xl или text-4xl. Это может показаться не таким уж большим достижением, но сравните это с выбором любого значения между 1,6бэр и 2,75бэр (которых технически бесконечно).
Сообщество
Наконец, успех TailwindCSS можно объяснить его сообществом. Фреймворк имеет большое и активное сообщество разработчиков, которые способствуют его развитию и оказывают поддержку. Это сообщество создало широкий спектр плагинов и расширений, которые добавляют дополнительные функции TailwindCSS.
Например, если вам нравится что-то вроде Bootstrap, где есть четко определенные компоненты, не ищите ничего, кроме DaisyUI. Преимущество использования DaisyUI + TailwindCSS по сравнению с Bootstrap заключается в том, что вы можете применять компоненты DaisyUI, но переопределять все, что вам не нравится, с помощью TailwindCSS.
Заключение
На первый взгляд TailwindCSS может показаться ужасным беспорядком, но вам действительно нужно его использовать, чтобы понять его потенциал. Это ускоряет разработку, уменьшает необходимость использования большого количества классов и снижает общую когнитивную нагрузку, необходимую для разработчика.
