Tailwind CSS: стилизация элементов с помощью утилитных классов

Введение

В этой лабораторной работе вы познакомитесь с Tailwind CSS, очень популярным CSS-фреймворком, основанным на утилитах (utility-first). В отличие от традиционного CSS, где вы пишете пользовательские классы, Tailwind предоставляет низкоуровневые классы утилит, которые вы можете комбинировать непосредственно в вашем HTML для создания любого дизайна. Вы научитесь настраивать Tailwind через CDN и применять базовые классы утилит для стилизации простого элемента веб-страницы, включая фон, текст, отступы и компоновку. К концу вы получите практическое понимание мощности и скорости utility-first CSS.

Необходимый файл index.html уже создан для вас в директории ~/project. Вы сосредоточитесь на изменении этого файла для применения стилей Tailwind.

Добавьте ссылку на CDN Tailwind CSS в раздел head HTML

На этом шаге вы добавите Tailwind CSS в свой проект. Для быстрой настройки и обучения самый простой способ — использовать CDN Tailwind CSS. Это включает добавление одного тега <script> в раздел <head> вашего HTML-файла.

Почему нет CSS-файла? В отличие от традиционных CSS-фреймворков, Tailwind CSS основан на утилитах (utility-first). Вместо написания CSS-правил во внешних файлах, вы будете применять готовые классы утилит непосредственно в вашем HTML. Этот подход полностью исключает необходимость в пользовательских CSS-файлах.

Официальная документация: Полный справочник по Tailwind CSS доступен по адресу: https://tailwindcss.com/docs

Сначала откройте файл index.html, расположенный в директории ~/project, используя файловый менеджер слева от WebIDE.

Теперь добавьте следующий тег <script> внутрь раздела <head> вашего файла index.html.

<script src="https://cdn.tailwindcss.com"></script>

После добавления строки ваш файл index.html должен выглядеть следующим образом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <!-- Tailwind CSS CDN will be added here -->
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div>Hello, Tailwind!</div>
  </body>
</html>

Сохраните файл, нажав Ctrl+S. Хотя вы пока не увидите никаких визуальных изменений, классы утилит Tailwind теперь доступны для использования в вашем проекте. Вы можете открыть вкладку Web 8080, чтобы увидеть страницу без стилей.

index.html tag

Примените класс bg-blue-500 для цвета фона

На этом шаге вы примените свой первый класс утилиты Tailwind для изменения цвета фона элемента <div>. Tailwind использует соглашение об именовании bg-{color}-{shade} для цветов фона.

Справочник: https://tailwindcss.com/docs/background-color

Мы будем использовать класс bg-blue-500, который применяет средне-синий фон.

Снова откройте файл index.html, если он еще не открыт. Найдите элемент <div> и добавьте к нему class="bg-blue-500".

<div class="bg-blue-500">Hello, Tailwind!</div>

Ваш полный файл index.html теперь должен выглядеть следующим образом:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <div class="bg-blue-500">Hello, Tailwind!</div>
  </body>
</html>

Сохраните файл (Ctrl+S) и переключитесь на вкладку Web 8080. Теперь вы должны увидеть текст "Hello, Tailwind!" внутри блока с синим фоном.

В отличие от предыдущих лабораторных работ, где вы писали CSS-правила во внешних файлах, Tailwind предоставляет готовые классы утилит, которые вы применяете непосредственно в HTML. Не требуется писать собственный CSS — просто комбинируйте утилиты, такие как bg-blue-500, text-white и p-4, для создания дизайнов.

Ключевые преимущества:

Более быстрая разработка: стилизуйте непосредственно в HTML, не переключаясь между файлами
Быстрое прототипирование: мгновенно создавайте макеты с помощью классов утилит
Единый дизайн: стандартизированные отступы, цвета и шкалы размеров
Встроенная адаптивность: включены адаптивные утилиты с приоритетом для мобильных устройств
Дружелюбен к ИИ: Tailwind разработан для использования с инструментами ИИ, такими как ChatGPT, что упрощает генерацию кода.

Используйте класс text-white для цвета текста

На этом шаге вы измените цвет текста, чтобы он лучше читался на синем фоне. Утилиты цвета текста Tailwind следуют шаблону text-{color}. Чтобы сделать текст белым, вы будете использовать класс text-white.

Справочник: https://tailwindcss.com/docs/text-color

Вы можете добавить несколько классов к элементу, разделяя их пробелом внутри атрибута class.

Измените <div> в вашем файле index.html, чтобы включить класс text-white.

<div class="bg-blue-500 text-white">Hello, Tailwind!</div>

Порядок классов внутри атрибута class не имеет значения.

После изменения тело вашего файла index.html будет выглядеть так:

<body>
  <div class="bg-blue-500 text-white">Hello, Tailwind!</div>
</body>

Сохраните файл (Ctrl+S) и проверьте вкладку Web 8080. Текст "Hello, Tailwind!" теперь должен быть белым, обеспечивая лучший контраст с синим фоном.

div tag

Примените класс p-4 для отступов

На этом шаге вы добавите внутренние отступы (padding) к элементу <div>. Это предотвратит соприкосновение текста с краями синего блока. Tailwind предоставляет утилиты для отступов в формате p-{size}.

Справочник: https://tailwindcss.com/docs/padding

Мы будем использовать класс p-4, который применяет средний уровень отступов (по умолчанию 1rem или 16px) ко всем четырем сторонам элемента.

Добавьте класс p-4 к атрибуту class вашего элемента <div> в файле index.html.

<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>

Тело вашего файла index.html теперь должно выглядеть так:

<body>
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Сохраните файл (Ctrl+S) и обновите вкладку Web 8080. Вы заметите, что теперь между текстом и границей синего блока есть пространство, что делает дизайн более аккуратным.

div tag

Добавьте классы flex justify-center для компоновки

На этом заключительном шаге вы отцентрируете стилизованный элемент <div> на странице. Этого можно добиться с помощью утилит Flexbox от Tailwind.

Для этого вы примените классы к тегу <body>, чтобы сделать его flex-контейнером и центрировать его содержимое.

flex: Этот класс применяет display: flex к элементу.
justify-center: Этот класс центрирует flex-элементы вдоль главной оси (по умолчанию горизонтально).
h-screen: Этот класс устанавливает высоту элемента равной 100% высоты области просмотра, что необходимо для вертикального центрирования (хотя здесь мы выполняем только горизонтальное центрирование, это хорошая практика для полностраничных макетов).

Измените тег <body> в вашем файле index.html, чтобы добавить эти классы.

<body class="flex justify-center h-screen">
  <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
</body>

Ваш полный файл index.html теперь будет выглядеть так:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Tailwind CSS Lab</title>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="flex justify-center h-screen">
    <div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>
  </body>
</html>

Сохраните файл (Ctrl+S) и просмотрите результат на вкладке Web 8080. Ваш стилизованный блок теперь должен быть горизонтально отцентрирован на странице.

Резюме

Поздравляем с завершением лабораторной работы! Вы успешно сделали первые шаги в мир Tailwind CSS. В этой лабораторной работе вы узнали, как интегрировать Tailwind в HTML-файл, используя его CDN. Затем вы отработали основную концепцию фреймворка utility-first, применяя несколько классов непосредственно к вашим HTML-элементам. Теперь вы знакомы с использованием утилит для цвета фона (bg-blue-500), цвета текста (text-white), отступов (p-4) и макета Flexbox (flex, justify-center, h-screen). Эти базовые знания помогут вам быстро и последовательно создавать более сложные и адаптивные дизайны.

Современные CSS-утилиты с Tailwind