Tailwind CSS: Мой опыт в 2022 году

Сейчас 2022 год, и официально прошло 5 лет с момента запуска Tailwinds. Теперь некоторые могут спросить, что именно представляет собой Tailwind CSS, но согласно их веб-сайту:

Tailwind CSS — это, по сути, CSS-фреймворк для быстрого создания пользовательских интерфейсов.

Я всегда был приверженцем Bootstrap (в основном из-за его системы колонок и множества готовых компонентов), но после перехода в мою нынешнюю организацию мне пришлось работать с Tailwind, и это был действительно большой опыт. В этой небольшой статье я расскажу о положительных и отрицательных моментах, с которыми я столкнулся при работе с Tailwind CSS.

Содержание
  1. Минусы
  2. Highs
  3. Резюме

Минусы

1. Отсутствие готовых компонентов
Когда я начал использовать Tailwind, я был потрясен, когда мне понадобилась панель быстрой навигации, а я не увидел ни одного полезного компонента. Это стало для меня большим шоком, потому что я привык использовать готовые компоненты Bootstraps, где я мог легко подстроить их под свои нужды. В случае с Tailwind мне пришлось создавать все компоненты с нуля, делать их отзывчивыми и добавлять весь необходимый JavaScript-код для их дальнейшего улучшения.

2. HTML-код выглядел беспорядочно
Мои HTML-файлы постоянно находятся в беспорядке, как будто в них много чего происходит. Обычно для размещения стилей и придания HTML-файлу строгой разметки требуется отдельный CSS-файл, но в Tailwind теги Tailwind приходится вписывать в HTML-код.

/*Vanilla CSS*/
div {
   font-weight: 700;
   font-size: 16px;
   border-radius: 8px;
   color: white;
  }

/*Tailwind CSS*/
<div class="font-bold text-base rounded text-white"></div>
Вход в полноэкранный режим Выход из полноэкранного режима

Кажется, что происходит очень много всего, и это действительно так.

3. Повторение стилей Tailwind
Я постоянно замечаю, что повторяю стили Tailwind снова и снова. Многочисленные теги div с одними и теми же атрибутами класса в нескольких файлах в конце концов становятся ужасно повторяющимися и утомительными.

Highs

1. Сокращение объема CSS-кода
Я заметил, что стал писать меньше CSS. Иногда возможность изменить цвет фона тега div <div class="bg-gray-100"></div> или увеличить размер шрифта текста, просто сделав <p class="text-lg">Hello World</p>, кажется более интуитивной, чем переключение на внешнюю таблицу стилей для ее написания.

2.Улучшение моего понимания CSS
Всякий раз, когда я натыкаюсь на свойства в Tailwind, о которых я мало или совсем не знаю, я быстро обращаюсь к своему редактору, чтобы найти и проверить CSS-эквивалент этого свойства, и как оно полностью работает и функционирует, тем самым улучшая мои всесторонние знания языка.

3. Отзывчивость еще никогда не была так проста
С такими тегами, как xs, sm, lg и т.д., которые могут быть применены к каждому аспекту моего HTML-файла, манипулировать точками разрыва CSS стало проще простого. Мне почти никогда не приходится писать медиа-запросы, потому что Tailwind отлично справляется с аспектом отзывчивости.

Резюме

В настоящее время использование Tailwind является для меня интересным опытом. Вопрос в том, буду ли я продолжать использовать Tailwind CSS после ухода из организации или при работе над личным проектом? Пока что это не определено, но я знаю, что это новый захватывающий опыт, и я здесь для каждого кусочка этого опыта.🥳🥳🥳.

Оцените статью
devanswers.ru
Добавить комментарий