CSS может стать вашим лучшим другом или злейшим врагом. Несмотря на то, что он невероятно гибкий, а результаты его применения порой кажутся магией, без должного внимания он может выйти из-под контроля, как и любой другой код.
Как же Taiwind CSS помогает в управлении стилями?
Что такое Tailwind?
Tailwind CSS — это “utility-first” (“полезность прежде всего”) CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения.
Основная идея состоит в том, что при разработке проекта вам не нужно иметь дело с таблицами стилей и беспокоиться о том, как переопределить тот каскад из 10 селекторов, который вот уже 2 года преследует ваше приложение.
Чем Tailwind так хорош?
О преимуществах Tailwind можно рассказывать ещё очень долго, мы же в этом руководстве сосредоточимся на основах. Поехали!
Часть 1: Подключение Tailwind CSS к статичной HTML-странице
Начнём с подключения Tailwind CSS напрямую к статичной HTML-странице. Думаю, что, уделяя основное внимание Tailwind, а не приложению, мы сможем лучше понять, что именно происходит с фреймворком.
Изучение Tailwind CSS за час в одном видео! Разработка проекта с нуля
Шаг 1: Создание новой страницы
Просто создайте новый HTML-файл. Выбор контента для него остаётся за вами. Я использую для этого fillerama.io, чтобы контент выглядел повеселее.
Чтобы упростить себе задачу, можете воспользоваться моим файлом.
Шаг 2: Подключение Tailwind CSS через CDN
Чтобы получить полнофункциональную версию Tailwind, обычно рекомендуется подключение через npm. Мы же сейчас пока просто пытаемся понять, как он работает, поэтому давайте добавим ссылку на CDN в блок нашего документа.
Первое, что бросается в глаза после сохранения изменений и обновления страницы — все стили сбросились!
Это ожидаемо. У Tailwind есть предустановленные стили для обеспечения кроссбраузерности. Они состоят из популярного normalize.css и надстроек над ним.
Но нам ведь необходимо узнать, как использовать Tailwind вместе с нашими собственными стилями.
Шаг 3: Использование Tailwind CSS для добавления стилей на страницу
Теперь, когда Tailwind установлен, у нас появилась возможность использовать его огромную библиотеку утилитарных классов — с их помощью мы вновь стилизуем страницу.
-
,
). Мы можем сделать это, присвоив каждому элементу класс .my-5 :
Наименование класса строится по шаблону, который вы увидите и в остальных утилитарных классах: в данном случае m означает margin, применяемый по оси y (y), со значением 5 (Tailwind использует rem — стало быть, значение равно 5rem).
Далее давайте сделаем так, чтобы заголовки выглядели, как подобает заголовкам. Начиная с h1 , добавим следующее:
Вот что здесь происходит:
- text-2xl : установка размера шрифта (font-size) на значение 2xl (в Tailwind 2xl будет равняться 1.5rem);
- font-bold : установка насыщенности шрифта (font-weight) на значение bold;
- mt-8 : подобно my-5 — установка margin top (t) на значение 8rem;
- mb-5 : установка margin bottom (b) на значение 5rem.
Давайте добавим те же классы, что мы применили к h1 , и к остальным заголовкам, но с уменьшением уровня заголовков будем уменьшать и размер шрифта:
Что такое Tailwind CSS?
- h2: text-xl ;
- h3: text-lg .
Вот что мы сделали:
- list-disc : задали list-style-stype значение disc (вид маркеров у пунктов списка);
- list-inside : установили положение маркеров относительно пунктов списка, задали list-style-position самого списка значение inside;
- my-5 : задали margin по оси y значение 5rem;
- pl-2 : задали padding left значение 2rem.
-
), заменив list-disc на list-decimal , чтобы в качестве маркеров были цифры, поскольку это нумерованный список.
Вот и всё — мы стилизовали списки.
И наконец настало время сделать наш контент более читабельным — установим ему максимальную ширину и отцентрируем. Для этого к тегу добавим следующее:
Примечание: Обычно эти классы не применяются напрямую к . Вместо этого можно обернуть весь контент в тег , но поскольку мы сейчас просто пытаемся понять, как работает фреймворк, то оставим всё, как есть. Если хотите, добавьте тег и примените классы уже к нему.
Итак, наша страница готова.
Шаг 4: Добавление кнопки и других компонентов
Добавим кнопку в наш статичный пример.
Особенность Tailwind в том, что в нём заведомо нет готовых классов для компонентов: предполагается, что разработчики, скорее всего, будут переопределять их под свои потребности. Это значит, что нам нужно создавать собственные компоненты с помощью утилитарных классов.
Для начала добавим новую кнопку. Вставьте фрагмент кода, показанный ниже, в любое место на странице. Я вставлю его после тега первого параграфа (
):
Party with Slurm!
Вы можете заметить, что, как и другие элементы, кнопка не стилизована, однако если на неё кликнуть, она среагирует. Давайте зададим кнопке соответствующий внешний вид — добавим следующие классы: