Я собираюсь объяснить вам основные концепции, на которых основан Tailwind, чтобы вы могли понять, как он работает, и осознать преимущества, которые он может вам предоставить.
Утилита прежде всего
Главная особенность Tailwind CSS в том, что он основан на принципе «Utily-First» . Это означает, что используемые вами классы основаны непосредственно на предоставляемых ими утилитах . Например, класс «text-xs» сделает текст небольшим по размеру с помощью свойства CSS «font-size». Tailwind охватывает практически все
потребности в объявлениях CSS , поскольку практически для каждого из них существует класс . Это означает, что в большинстве случаев вам не нужно будет использовать CSS для стилизации компонентов вашего веб-сайта.
Как вы можете видеть на примере класса «text-xs», имена и использование классов, используемых Tailwind CSS, не являются семантическими . Лучше объясню это на примере:
представьте, что вы хотите создать типичный элемент «карточка» (поле с изображением, текстом и кнопкой). В других фреймворках, таких как Bootstrap, структура будет примерно такой:
Даже без использования какой-либо структуры обычно люксембург база данных номеров whatsapp создаются классы, которые ссылаются на определенные элементы, такие как «card», «card-title» или «btn». Однако Tailwind использует другой подход, используя имена классов, которые напрямую соответствуют конкретным объявлениям CSS . Таким образом, предыдущий пример, использованный в Tailwind CSS, будет выглядеть примерно так:
С помощью Tailwind CSS вы можете создать любой компонент, который вам нужен для вашего веб-сайта.На первый взгляд это может показаться более громоздким, поскольку в HTML-коде накапливается множество классов, но у этого есть несколько преимуществ :
Прощайте, таблицы стилей CSS со все большим количеством строк кода: классы Tailwind предоставляют вам высокую степень возможности повторного использования и помогут вам создать практически любой компонент без необходимости добавления дополнительного кода CSS .
Вам не придется тратить время на присвоение имен своим CSS-классам , поскольку вы будете использовать классы Tailwind для создания своих компонентов.
Создание интерфейса или компонента окажется очень быстрым , если вы познакомитесь с классами CSS Tailwind.