Почему я переключился на Tailwind для написания CSS
5 мая 2022 г.Tailwind, как объясняется на их официальном веб-сайте, представляет собой CSS-фреймворк, ориентированный на утилиты, упакованный такими классами, как flex, pt-4, text-center и rotate-90, которые можно скомпоновать для создания любого дизайна прямо в вашей разметке. .
Для новичка написание чистого CSS было очень полезным, поскольку оно помогало понять и запомнить правила, необходимые для создания определенного макета. У меня был большой опыт в этом, однако ни один из них не принес мне такого удовлетворения и повышения производительности, как TailwindCSS. Tailwind имеет очень простой синтаксис.
Вот пример того, как это выглядит:
```html
<цитата>
«Tailwind CSS — единственный фреймворк, масштаб которого я видел.
на больших командах. Легко настраивается, адаптируется к любому дизайну,
и размер сборки крошечный ».
<дел>
Сара Даян
<дел>
Штатный инженер, Алголия
Каждый класс представляет объявление CSS. В приведенном выше примере pt-6 представляет собой padding-top: 1.5rem;
Это создаст следующее:
Tailwind имеет множество преимуществ по сравнению с пользовательским CSS.
Вот что мне показалось интересным в Tailwind:
Не нужно оставлять свой HTML-код
Написание кода в одном месте может быть быстрее и интереснее, чем перескакивать с файла на файл, это может помочь больше сосредоточиться на текущей задаче. Иногда это может привести к беспорядку, особенно при работе над большими проектами.
Меньшие стили
Tailwind гарантирует постоянный размер пакета, поскольку имена служебных классов могут быть общими для элементов. Для неиспользуемого CSS Tailwind сочетается с очищающим CSS, который удаляет лишние классы из кодовой базы.
Повышение производительности
Написание CSS для Tailwind выполняется намного быстрее по сравнению с написанием CSS или CSS-in-JS. Текстовые редакторы и IDE автоматически помогают нам с автозаполнением и форматированием, однако, чтобы запустить автозаполнение, мы должны написать селекторы и части объявлений.
Кроме того, варианты в Tailwind имеют префиксы, которые можно добавлять к классам, представляющим определенный псевдокласс CSS или пользовательские плагины.
Последовательность
Кроме того, в Tailwind есть множество готовых классов, в основном для изменения размеров и окраски, что уменьшит или полностью устранит необходимость внедрения системы дизайна.
Настройка
Разработчики могут расширять или изменять классы в файле tailwind.config.js. Можно вмешиваться прямо в Tailwind, а также добавлять пользовательские плагины, сделанные изменения будут отражены в окончательной таблице стилей.
Внутри этого файла можно создавать обычные классы CSS.
Недостатки попутного ветра
Некоторые вещи, с которыми я могу не согласиться с Tailwind:
Читаемость
Когда к элементу добавляется значительное количество классов, чтение может стать пугающим.
С правильными абстракциями компонентов это можно легко решить.
Сложные анимации
Архивировать сложные анимации очень сложно.
Нужно было бы создать класс для каждого элемента, чтобы использовать простой CSS, это приведет к дополнительной работе.
Использование библиотек также может быть использовано для решения этой проблемы.
Некоторые свойства CSS не включены.
Мои последние мысли
В моем путешествии Tailwind помог мне повысить производительность, уменьшить размер пакета моих приложений и сделать меня более последовательным.
Хотя это могло хорошо сработать для меня и многих других разработчиков, это не означает, что это идеальное решение для каждого проекта.
Мы, фронтенд-разработчики, поскольку мы гарантируем ремонтопригодность, масштабируемость и производительность, Tailwind определенно является лучшим решением, учитывая его множество преимуществ.
Оригинал