Основы работы с фреймворком Tailwind CSS

3 августа, 2022 11:18 дп 404 views | Комментариев нет

| | Комментировать запись

В этом материале мы поговорим о CSS фреймворке Tailwind. Это полностью независимая от стиля служебная библиотека для создания быстрых и адаптивных дизайнов. Tailwind настолько прост, что вам достаточно базово разобраться с соглашениями об именах и шаблонами, чтобы начать интуитивно использовать почти все функции, не нуждаясь в документации.

Все представленные здесь параметры можно более подробно изучить в официальной документации.

Установка Tailwind

Существует несколько различных способов установки Tailwind, – можно установить Gulp, postCSS или даже его собственный интерфейс командной строки. Но самый простой способ начать работу ради обучения — просто использовать этот URL-адрес CDN из unpkg.

Также вы можете установить библиотеку в свой проект, используя npm или Yarn:

$ npm i tailwindcss
# or, if Yarn is more your thing:
$ yarn add tailwindcss

Шаблон Tailwind

Вот простой шаблонный HTML-файл, который включает в себя Tailwind из unpkg:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css">
  <title>Tailwind CSS</title>
</head>
<body>

</body>
</html>

Цвета

Именование классов для определения цветов всегда одно и то же: element-color-intensity (intensity определяется числовым значением от 100 до 900). Таким образом, красный фон становится bg-red-500. Эти шаблоны применяются к границам, фону и тексту.

Посмотрим на простой пример:

<h1 class="text-blue-400">Hello World</h1>

<p class="text-white bg-indigo-900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.</p>

<!-- Border needs to be set before the border-color can be changed -->
<input type="text" class="bg-transparent text-white border border-red-600" placeholder="input...">

Размеры и интервалы

Ширина и высота, сокращенные до w и h, могут принимать значения от 0 до 64 (некоторые значения отсутствуют, их вы можете проверить в документации или IntelliSense) и несколько ключевых слов, (например, auto, full, чтобы задать 100%, screen для 100vw/vh). Параметр ширины также может использовать доли от 1 до 6 или от 12, поэтому записать 50% можно как 1/2, 2/4, 3/6 или 6/12.

Интервалы устанавливаются очень похоже: просто указываете свойство, сторону (сокращается по первым буквам), а затем значение. Итак, padding-bottom: 2rem; становится pb-8. Значение задается в диапазоне от 0 до 64. Для определения левой или правой стороны можно использовать t, b, l, r, x; верх или низ определяются при помощи y.

<div class="bg-green-700 h-16 w-auto mr-10"></div>
<div class="bg-blue-700 h-24 w-4/6 my-16"></div>
<div class="bg-red-700 h-40 w-6/12 mx-auto"></div>
<div class="bg-purple-700 h-56 w-2/12 ml-48"></div>

<div class="border border-white h-40 w-56 mt-10 mx-auto">
  <h1 class="text-white py-16 px-16">I'm a box</h1>
</div>

Макет Tailwind

Tailwind предлагает много удобных функций стандартного позиционирования CSS, такие как float, position и даже Flexbox. Они работают почти так же, как и обычно (за исключением того, что Flexbox нужно сначала инициализировать с помощью flex).

Читайте также: Основы работы с CSS Flexbox

Как и в случае с определением размеров, шаблон именования прост – property-value (например justify-content: center; станет justify-center).

<!-- Basic Navbar -->
<nav class="flex justify-between items-center px-16 bg-purple-800 text-white h-24">
  <h1>Title</h1>
  <ul class="flex justify-between w-56">
    <a href="#">
      <li>Link</li>
    </a>
    <a href="#">
      <li>Link</li>
    </a>
    <a href="#">
      <li>Link</li>
    </a>
  </ul>
</nav>

Шрифты

Помимо стандартных вещей, которые вы уже можете делать в CSS, Tailwind предлагает несколько способов быстрого доступа к довольно сложным и утомительным аспектам дизайна, например, к настройкам резервных шрифтов (которые доступны только с помощью font-sans, font-serif или font-mono).

Вместо единиц 0–64, которые используются в этом фреймворке повсеместно, параметр font-size (сокращенно text) принимает значения от xs, sm, base, lx и xl до 6xl.

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

<p class="text-md font-mono font-bold text-white">Hello World</p>
<p class="text-lg font-sans line-through text-white">Hello World</p>
<p class="text-4xl font-serif text-center text-white">Hello World</p>
<p class="text-6xl font-mono text-right italic font-extrabold text-white">Hello World</p>

Отзывчивость

Tailwind действительно существенно сокращает потребность в медиа-запросах. Он предоставляет ряд префиксов, с помощью которых можно ограничить работу класса определенной шириной. При этом версия без префикса, которую вы использовали ранее, будет работать для всего, что находится за пределами заданного диапазона.

  • sm 640px
  • md 768px
  • lg 1024px
  • xl 1280px
<body class="bg-gray-900 flex flex-col md:flex-row">
  <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-red-500 sm:bg-purple-800 bg-white"></div>

  <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-green-800 sm:bg-indigo-300 bg-white"></div>

  <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-blue-200 sm:bg-teal-600 bg-white"></div>
</body>

Итоги

Надеемся, вы узнали много полезного из нашей короткой статьи об этой простой библиотеке. Изучать Tailwind настолько просто, а его синтаксис настолько последователен, что вы можете начать создавать прекрасные дизайны, даже не глядя на CSS и не имея большого опыта.

Tags: ,

Добавить комментарий