Tailwind - мегабуст для всех кому приходится верстать

Tailwind - замечательный, прорывной, качественный utility-first CSS-фреймворк.

Что такое utility-first CSS?

При классическом подходе один СSS класс описывает стиль логической группы объектов (кнопки, группа кнопок, форма регистрации, ссылки обычные, ссылки в футере и т.д.)

При подходе utility-first один CSS класс описывает конкретное стиливое свойство объекта. Например, класс border-2 будет добавлять сплошную границу дефолтного цвета шириной 2px, а класс border-red сделает эту границу красной.

Почему это хорошо, ведь мы всю жизнь делали ровно наоборот? Лучше обьяснить на примерах.

Кейс №1. Блок который встречается один раз на главной странице сайта.

Это реальный кейс из моего проекта.

Обычный код
HTML

<div class="one-off-class-name">
</div>

CSS

.one-off-class-name {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: row;
    max-width: 80rem /* Приблизительно */
    padding-left: 0.5rem; /* 8px */ 
    padding-right: 0.5rem; /* 8px */
    padding-left: 0.5rem; /* 8px */ 
    padding-right: 0.5rem; /* 8px */
    z-index: 10
}

@media (min-width: 640px) {
    .one-off-class-name { 
        padding-top: 1.5rem; /* 24px */ 
        padding-bottom: 1.5rem; /* 24px */
    }
}

@media (min-width: 1024px) { 
    .one-off-class-name {
        padding-left: 2rem; /* 32px */
        padding-right: 2rem; /* 32px */
    }
}

Код Tailwind

HTML

<div class="z-10 flex flex-row max-w-7xl mx-auto px-2 py-6 sm:px-6 lg:px-8">
</div>

Преимущества

Это очень короткий код и его реально быстро писать.
Когда мне нужно что-то поправить в этом коде, я сразу вижу все свойства этого объекта и правлю их на месте.
Мне нравится, что нет необходимости создавать отдельный класс под одноразовый обьект.

Недостатки

Очень длинная портянка в которой можно запутаться и, например, сделать стили которые взаимоисключают друг друга.

Кейс №2. Переиспользуемый компонент.

Это тоже реальный кейс из моего проекта.

Vue Template + Обычный CSS

<template>
    <input  
        :placeholder="placeholder" 
        :type="type"
        type="text"
        :value="modelValue" 
        @input="updateValue" />
</template>
<script>
 // Опустим этот код
</script>

<style scoped>
    input {
        border: 1px solid #C2C2C2;
        border-radius: 0.375rem;
        padding: 1rem;
    }
    input:focus {
        outline-width: 1px;
        outline-color: #9CD5E1;
    }
</style>

Vue Template + Tailwind

<template>
    <input 
        class="border border-solid border-[#C2C2C2] focus:outline-[#9CD5E1] focus:outline-1 rounded-md p-4" 
        :placeholder="placeholder" 
        :type="type"
        type="text"
        :value="modelValue" 
        @input="updateValue" />
</template>
<script>
 // Опустим этот код
</script>

<style scoped>
</style>

Примущества

Как и в Кейсе №1 код с Tailwind явно компактнее.
Как и в Кейсе №1 стиль компонента сразу видно глядя на темплейт.
Отделный плюс при работе с Vue. Каждый раз скролить окно IDE до стилей или сплитить экран это отдельная боль, поэтому указание стилей прям в темплейтах очень сильно упрощает жизнь и ускоряет разработку.

Недостатки

Как и в Кейсе №1 атрибут class постепенно превращается в портянку. Да, иногда это очень неудобно.

В общем и целом.

Tailwind уже получил свои лавры, растет здоровый и крепкий, без существенных паталогий и довольно широко применяется в продакшне. Поэтому я вряд ли скажу что-то новое о его преимуществах и недостатках. Тем не менее.

Положительное

Для себя же я виделил несколько нюансов, благодаря которым Tailwind так замечательно заходит при разработке.

Они реально запихали туда почти весь современный CSS. В Tailwind исчерпывающий функционал для полноценной верстки сайтов и гибридных приложений.
Действительно хорошо запаковали мастхевные вещи. Вот, к примеру, px-1 это симметричный padding слева и справа или lg:px-1 задает тоже самое, но только при большом разрешений.
Дали возможность что-то захардкодить если это необходимо (lg:px-[100px])
Есть общая тема и она программируема. В tailwind.config.js можно очень гибко все настраивать и вычислять.
Tailwind приучает к хорошим манерам. К примеру, верстать через относительные единицы (rem, em и т.д.) и выносить общие стили в тему.

Отрицательное

Если стилей много это реально выглядит как уродливая портянка. И здесь спасает только качество и навык использования IDE.
Один бандл на весь проект. Да он легкий, но чаще всего следование такому паттерну заканчивается распиливанием бандла на чанки.
Некоторые вещи все-таки имплементировать не смогли. Например работу с Shadow DOM.
Применим только когда в проекте есть шаблонизация (pug, hbs, jinja2 и т.д.) или какая-либо система компонентов (Vue, React, Angular, Svelte и т.д.).

Итог

Tailwind и в целом подход utility-first CSS (как все и везде) оч хорошо работает, но только если четко понимать какие имеенно условия небоходимы для его успешного применения.

Я сам активно использую Tailwind и буду дальше пробовать его в своих проектах, что собсно и вам советую)

Спасибо, за ваше внимание)

Больше контента в моем Telegram канале https://t.me/dakotovblog