PF pavelfilippov.ru

Справошная ★ Поиск

Что такое Tailwind CSS

CSS

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

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

Установка

Хотя существует несколько различных способов настройки Tailwind, таких как Gulp, postCSS или даже их собственный интерфейс командной строки, самый простой способ начать работу ради обучения — просто использовать URL-адрес CDN из unpkg: unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css.

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

 

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

 

Шаблон

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

index.html

 

<!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. Таким образом, красный фон становится bg-red-500с числовым значением от 100 до 900. Эти шаблоны применяются к границам, фону и тексту.

Вот простой пример:

 

<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 VSCode ) и несколько ключевых слов, таких как 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 предлагает нам многие удобства стандартного позиционирования CSS, такие как float, position и даже Flexbox . Их использование почти такое же, как и следовало ожидать, за исключением того, что с Flexbox вам просто нужно flexсначала инициализировать его.

Подобно размеру, шаблон именования просто property-value, поэтому правый поплавок становится float-rightи 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 действительно сияет, сокращая потребность в медиа-запросах. С помощью этих префиксов мы можем ограничить класс, чтобы он работал только выше определенной ширины, а версия без префикса, с которой мы работали до сих пор, работала для всего, что находится за пределами нашего диапазона.

  • sm640 пикселей
  • md768 пикселей
  • lg1024 пикселей
  • xl1280 пикселей
<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.

Это плюсы. есть и минусы: если у вас хоть сколько-нибудь сложный проект, очень быстро вы столкнётесь со списками классов элементов на две-три строки, от которых глаза будет рябить. Рефакторинг такого кода практически невозможен.

Связанные ссылки