Обзор синтаксиса Tailwind CSS / Habr

Салют, Хабр!

Tailwind CSS – это utility-first CSS фреймворк, который отличается от традиционных CSS фреймворков вроде Bootstrap или Foundation тем, что вместо предопределенных компонентов предлагает набор utility-классов, позволяющих стилизовать элементы прямо в HTML.

Utility-first подход заключается в использовании множества функциональных классов, каждый из которых отвечает за одно CSS свойство, к примеру паддинги, маржини и т.п.

В этой статье рассмотрим синтаксис Tailwind CSS, в целом, он похож на дефолт CSS.

Установка

Интегрируем Tailwind CSS в проект, довольно просто и банально с помощью npm:

npm install -D tailwindcss
npx tailwindcss init

Помимо установки самого Tailwind, здесь создастся конф.файл tailwind.config.js.

Основной принцип работы с tailwind.config.js заключается в модификации ключа theme, который содержит настройки по умолчанию. Добавляя или изменяя значения в этом ключе, можно адаптировать стили под нужды. Например, чтобы добавить новые цвета или изменить существующие, можно:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
      },
    },
  },
}

После настройки конфигурации пришло время вызывать Tallwind в проект проект. Создаем файл CSS и:

@tailwind base;
@tailwind components;
@tailwind utilities;

Далее с Tailwind CLI можно сгенерировать итоговый CSS файл:

npx tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch

Обзор синтаксиса

Типографика

Размер шрифта устанавливается с использованием утилит размеров, которые начинаются с text-, за которым следует значение размера. Например, text-xs устанавливает маленький размер текста, в то время как text-3xl делает его значительно больше.

<p class="text-xs">маленький текст</p>
<p class="text-xl">большой текст</p>

Контроль за жирностью шрифта осуществляется через утилиты, начинающиеся на font-, например, font-bold для жирного текста или font-light для легкого:

<p class="font-bold">жирный текст</p>
<p class="font-light">легкий текст</p>

Для применения курсива:

<p class="italic">Курсивный текст</p>

Межстрочный интервал, или интерлиньяж, регулируется с помощью утилит, начинающихся на leading- :

<p class="leading-tight">Узкий межстрочный интервал</p>
<p class="leading-loose">Широкий межстрочный интервал</p>

Выравнивание текста по горизонтали управляется утилитами text-left, text-center, text-right, и text-justify:

<p class="text-left">левый край</p>
<p class="text-center">центр</p>
<p class="text-right">правый край</p>

Цвета и фон

Tailwind CSS предлагает естественно огромную палитру предопределенных цветов, которые можно использовать для текста, фона, границ и других элементов. Цвета идут с различными оттенками, начиная от светлых (сотка) до темных (900).

<div class="bg-blue-500 text-white">
   текст 
</div>

bg-blue-500 задает фоновый цвет, а text-white — цвет текста.

Можно расширять стандартную палитру, добавляя собственные цвета через конф. файл tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-color': '#663399',
      },
    },
  },
}

Можно юзать custom-color так же, как и любой другой предопределенный цвет в Tailwind.

Также у фона есть функции, назначения которых очевидно по названию: bg-img, bg-repeat,bg-position и размер bg-size.

Градиенты добавляют визуальную глубину и динамику дизайну. С таилвиндом создавать линейные градиенты с помощью классов bg-gradient-to-t, bg-gradient-to-r и так далее, указывая направление градиента, а также классы для начального и конечного цветов градиента:

<div class="bg-gradient-to-r from-blue-500 to-teal-500">
  Ваш текст на градиентном фоне
</div>

Здесь горизонтальный градиент от синего к бирюзовому.

Раскладка и грид

Для флексбокса есть серия классов, начиная от flex для активации Flexbox для контейнера, до justify-content, align-items и flex-wrap для управления поведением элементов внутри flex-контейнера:

<div class="flex justify-center items-center">
  <div class="p-4">Элемент 1</div>
  <div class="p-4">Элемент 2</div>
</div>

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

Tailwind CSS интегрирует поддержку CSS Grid через набор классов grid, grid-cols-* и grid-rows-* для определения количества столбцов и строк сетки, а также gap, row-gap и col-gap для управления расстояниями между элементами:

<div class="grid grid-cols-3 gap-4">
  <div class="p-4 bg-blue-500">Элемент 1</div>
  <div class="p-4 bg-red-500">Элемент 2</div>
  <div class="p-4 bg-green-500">Элемент 3</div>
</div>

Создали сетку из трех столбцов с равными промежутками между ними, где каждый элемент сетки имеет свой фоновый цвет.

Можно создавать систему отступов и зазоров. С классами вроде m-, my-, mx-, p-, py-, и px- можно применять маржины и паддинги в любом направлении и с любой точностью:

<div class="m-4 p-4 bg-gray-200">
   блок имеет внешние и внутренние отступы.
</div>

Эффекты, фильтры и переходы

Для добавления теней к элементам можно юзать классы shadowс различной интенсивностью, начиная от легкой shadow-sm до интенсивной shadow-2xl:

<div class="shadow-lg p-6 mb-6 bg-white rounded-lg">
   контент с заметной тенью
</div>

Классы прозрачности opacity позволяют регулировать видимость элементов, делая их полностью или частично прозрачным

Также есть фильтры blur), saturate и contrast, к примеру:

<img class="blur-lg" src="your-image.jpg" alt="Размытое изображение">

Для создания плавных анимаций и переходов между состояниями можно использовать классы transition и animate:

<button class="bg-blue-500 text-white p-2 rounded hover:bg-blue-700 transition-colors duration-300">
  Наведите на меня
</button>

Пару примеров использования

Адаптивная карточка продукта:

<!-- карточка продукта с использованием Tailwind CSS -->
<div class="max-w-sm rounded overflow-hidden shadow-lg m-4">
  <img class="w-full" src="/img/product-1.jpg" alt="Изображение продукта">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2"> названия продукта</div>
    <p class="text-gray-700 text-base">
      Описание продукта
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#тег1</span>
    <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#тег2</span>
  </div>
</div>

Адаптивная нав.панель:

<!-- навигационная панель с Tailwind CSS -->
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Название сайта</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Меню</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
        Документация
      </a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
        Примеры
      </a>
    </div>
  </div>
</nav>

Модальное окно:

<!-- модальное окно -->
<div class="fixed z-10 inset-0 overflow-y-auto hidden" id="modal">
  <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
    <!-- Оверлей -->
    <div class="fixed inset-0 transition-opacity" aria-hidden="true">
      <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>
    <!-- Контент модального окна -->
    <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
      <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="sm:flex sm:items-start">
          <!-- Содержимое -->
          <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">Заголовок модального окна</h3>
            <div class="mt-2">
              <p class="text-sm text-gray-500"> сообщение или содержание.</p>
            </div>
          </div>
        </div>
      </div>
      <!-- Действия -->
      <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-500 text-base font-medium text-white hover:bg-blue-700 focus:outline-none sm:ml-3 sm:w-auto sm:text-sm">
          Действие
        </button>
        <button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
          Закрыть
        </button>
      </div>
    </div>
  </div>
</div>

Формы с адаптивным дизайном:

<div class="max-w-md mx-auto mt-10">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Имя пользователя
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Пароль
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Войти
      </button>
    </div>
  </form>
</div>

В завершение хочу напомнить о том, что в календаре мероприятий OTUS, вы можете зарегистрироваться на ряд бесплатных вебинаров. Подробнее по ссылке.

Обзор синтаксиса Tailwind CSS