В этой статье мы рассмотрим мой любимый фреймворк дизайна: 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 действительно сияет, сокращая потребность в медиа-запросах. С помощью этих префиксов мы можем ограничить класс, чтобы он работал только выше определенной ширины, а версия без префикса, с которой мы работали до сих пор, работала для всего, что находится за пределами нашего диапазона.
sm
640 пикселейmd
768 пикселейlg
1024 пикселейxl
1280 пикселей
<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.
Это плюсы. есть и минусы: если у вас хоть сколько-нибудь сложный проект, очень быстро вы столкнётесь со списками классов элементов на две-три строки, от которых глаза будет рябить. Рефакторинг такого кода практически невозможен.