Обзор преимуществ и недостатков попутного ветра
Большинство людей могут согласиться с тем, что стилизация с помощью CSS может быть одним из самых захватывающих и в то же время разочаровывающих аспектов разработки приложения. С помощью стилей вы можете воплотить в жизнь фоновую логику, которая сделает ваше приложение уникальным. В то время как CSS предоставляет бесчисленное количество настроек и опций. Может быть немного сложно научиться эффективно использовать его, и, что более важно, очень много времени для его реализации. Несмотря на то, что существует множество фреймворков или инструментов CSS (Bootstrap, Foundation, Bulma, Skeleton), я обнаружил, что многие из них, которые я исследовал, предлагали выбор между простотой использования и опциями. Например, Bootstrap довольно легко внедрить в вашу программу, но я обнаружил, что многие из его элементов могут привести к «форме для печенья», которая эстетически приятна, но не очень настраиваема. Не поймите меня неправильно, я думаю, что Bootstrap великолепен, но я предпочитаю что-то с более настраиваемыми параметрами, которое сохраняет простоту использования. Войдите в Попутный ветер.
Tailwind отличается от других фреймворков CSS тем, что это не «набор пользовательского интерфейса». Комплект пользовательского интерфейса предоставляет предустановленные темы или встроенные параметры интерфейса. Программы, использующие наборы пользовательского интерфейса, предоставляют программистам доступ к очень функциональным и адаптивным стилям, которые просто работают в вашей программе. Однако из-за того, что стили в этих комплектах настолько абстрактны, разработчики вынуждены использовать только уже доступные шаблоны, что усложняет настройку.
Вместо этого Tailwind предоставляет предустановленные виджеты. Эти виджеты содержат все стили и помещаются непосредственно в ваши компоненты javascript. Это делает стили специфичными для каждого элемента вашего приложения, и вам не нужно беспокоиться о том, что изменение стиля в одной области испортит все остальное (и вам не нужно запоминать бесчисленные имена классов или то, на что они влияют). Этот первый подход к утилите Tailwind упрощает реализацию, хотя и не лишен некоторых недостатков.
Использование попутного ветра
Я не буду вдаваться в подробности того, как настроить попутный ветер, так как это довольно просто (вы можете найти простые инструкции в Документация по попутному ветру здесь),поэтому давайте перейдем к Использование Tailwind, а также его преимущества и недостатки.
Tailwind имеет большой выбор готовых виджетов, которые вы можете добавить и позже легко изменить стили отдельных элементов. На официальном сайте доступ к этим компонентам, которых более 500, стоит минимум 150 долларов. Теперь я не призываю тратить деньги на программу, которую вы еще не знаете, что она вам нравится, поэтому вместо этого зайдите на HyperUI и получите несколько бесплатных предварительно оформленных виджетов. Это должно дать вам множество вариантов для работы и дать вам представление о том, каково это использовать Tailwind.
Допустим, вы разрабатываете веб-сайт с функцией входа в систему. В вашем операторе return ваш код может выглядеть примерно так (до Tailwind):
Это довольно простая форма для входа в систему, в настоящее время не применяется стиль, поэтому по умолчанию она будет иметь белый фон, черный текст с несколькими полями для ввода и кнопкой. Если вы хотите стилизовать этот компонент, вы можете перейти к HyperUI и посмотреть параметры, которые есть в этой категории. В HyperUI у них есть четыре варианта «Войти / Зарегистрироваться», которые дадут вам предварительный просмотр того, как это будет выглядеть, а также возможность просмотреть и скопировать код.
Теперь смотреть на весь этот код может быть пугающе, но как только вы начинаете читать и изменять элементы самостоятельно, это становится намного менее пугающим. Итак, давайте возьмем этот код и добавим его в код нашего примера.
В этом примере я закомментировал исходный код, который написал, и добавил код, скопированный из HyperUI. Это, конечно, приводит к тому, что я теряю функциональность моего сайта, но его легко восстановить. Это также делает возвращаемое значение моего компонента значительно длиннее, чем было. Мы перешли от 20 строк кода к более чем 50. Иногда это может означать, что код увеличивается на 100 строк. Это один из недостатков Tailwind, он приводит к длинному коду в каждом компоненте, поэтому я бы рекомендовал подождать, пока большая часть вашей функциональности не будет завершена, прежде чем использовать эти виджеты.
Теперь, когда у нас есть скопированный стилизованный код, все, что вам нужно сделать, это изменить содержимое в соответствии с вашими потребностями. Для нашей страницы входа нам не нужно, чтобы пользователь вводил свое имя, адрес электронной почты и т. д. Нам просто нужно имя пользователя и пароль. Таким образом, мы можем просмотреть код, пока не найдем элемент ‹form› и изменить эти атрибуты, чтобы они соответствовали тому, что у нас было раньше. Вот пример того, как это выглядит:
Теперь меняем названия входов, добавляем обратно функционал, и наш сайт снова работает.
Теперь есть дополнения, которые я могу удалить или изменить, такие как фоновое изображение, с которым оно идет изначально, может быть, некоторые заголовки или элементы ‹h1›. Но в целом мне не нужно было сильно менять то, что я копировал, мне просто нужно было изменить имена и добавить обратно в свой код. За считанные минуты мы не только восстановили работоспособность сайта, но и стилизовали его. Отсюда легко изменить цвета, границы, непрозрачность или эффекты наведения с помощью всего нескольких слов (например, bg-gray-800 отображает серый фон, но его можно легко изменить на bg-red-500, чтобы получить что-то совершенно другое. Вы можете найти полноцветную перчатку здесь.). Теперь я изменил фоновое изображение и некоторые цвета для нашего веб-сайта, но это готовый продукт:
Очевидно, есть место для изменения стиля, но это значительное улучшение по сравнению с полностью белыми экранами с некоторыми коробками, все это было завершено менее чем за 5 минут. Для достижения этого стиля с помощью ванильного CSS у многих людей уйдет как минимум в 3 раза больше времени, я считаю эту экономию времени большой победой.
Это играет роль в том, что я считаю самыми большими преимуществами Tailwind, экономией времени и простотой внесения изменений. Нам потребовалось 5 минут, чтобы оформить страницу входа в систему с помощью Tailwind. Представьте, что вам нужно оформить 6 или 7 страниц. Если оформление страницы занимает от 5 до 10 минут (на базовом уровне), вы можете реализовать стилизованный веб-сайт менее чем за 2 часа. Тот же самый подвиг в vanilla css занял бы у меня как минимум день. Это часть магии этих виджетов. Я могу реализовать часть или все из них на своей странице. Если мне нравится только то, как выглядит кнопка, но не остальная часть страницы, я могу скопировать ‹класс кнопки=«стиль»› и поместить его в свое приложение, где я хочу. Поскольку каждый элемент имеет индивидуальный стиль, вы можете повторно использовать их по мере необходимости, что экономит массу времени.
Второе основное преимущество заключается в том, насколько легко впоследствии изменить стиль. Вам не нравится внешний вид вашей страницы входа? Не беспокойтесь, просто скопируйте другой виджет и внедрите его таким же образом. Если нет шаблона, который вам нравится, вы всегда можете просто скопировать стиль поля ввода, цвета фона или кнопку и создать их самостоятельно. Каждый элемент имеет индивидуальный стиль, и вы можете легко изменить их, не беспокоясь о том, чтобы испортить все остальное. Уже одно это преимущество делает Tailwind победителем в моей книге. Мне не нужно следить за именами классов или тем, где я использовал определенный стиль. Если мне не нравится, как выглядит кнопка, я просто иду туда, где эта кнопка находится в моем коде, и напрямую меняю стиль.
Несмотря на то, что код получается длинным в каждом компоненте, его все же довольно легко читать. Теперь есть кривая обучения, когда дело доходит до написания встроенного css Tailwind, так как может быть сложно изучить его сразу. Я обнаружил, что научиться писать свой собственный Tailwind легче после использования готовых виджетов. Потратьте полдня, играя со встроенным текстом, и я думаю, вы сможете довольно быстро настроить больше элементов, помимо цветов.
Tailwind обеспечивает быструю стилизацию, которой легко манипулировать, и я думаю, что эти преимущества перевешивают его недостатки. Надеюсь, это помогло вам стилизовать свое приложение и решить, подходит ли вам Tailwind.
Ресурсы:
https://tailwindcss.com/docs/installation’
