В этом материале мы поговорим о 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 и не имея большого опыта.