Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?

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

Как же Taiwind CSS помогает в управлении стилями?

Что такое Tailwind?

Tailwind CSS — это “utility-first” (“полезность прежде всего”) CSS-фреймворк, предлагающий обширный каталог классов и инструментов для облегчения стилизации сайта или приложения.

Основная идея состоит в том, что при разработке проекта вам не нужно иметь дело с таблицами стилей и беспокоиться о том, как переопределить тот каскад из 10 селекторов, который вот уже 2 года преследует ваше приложение.

Чем Tailwind так хорош?

Taildwind предоставляет большое разнообразие CSS-классов, каждый из которых имеет собственную функцию. Вместо традиционного создания класса .btn путём добавления множества атрибутов в Tailwind можно просто применить классы bg-blue-500 py-2 px-4 rounded к кнопке или создать класс .btn и вместе с утилитарным классом применить его к селектору с помощью директивы @apply. 

О преимуществах Tailwind можно рассказывать ещё очень долго, мы же в этом руководстве сосредоточимся на основах. Поехали!

Часть 1: Подключение Tailwind CSS к статичной HTML-странице

Начнём с подключения Tailwind CSS напрямую к статичной HTML-странице. Думаю, что, уделяя основное внимание Tailwind, а не приложению, мы сможем лучше понять, что именно происходит с фреймворком.

Шаг 1: Создание новой страницы

Просто создайте новый HTML-файл. Выбор контента для него остаётся за вами. Я использую для этого fillerama.io, чтобы контент выглядел повеселее.

Новая HTML-страница с контентом

Чтобы упростить себе задачу, можете воспользоваться моим файлом.

Сверяйтесь с коммитом!

Шаг 2: Подключение Tailwind CSS через CDN

Чтобы получить полнофункциональную версию Tailwind, обычно рекомендуется подключение через npm. Мы же сейчас пока просто пытаемся понять, как он работает, поэтому давайте добавим ссылку на CDN в блок <head> нашего документа.

<link href="https://unpkg.com/[email protected]^1.0/dist/tailwind.min.css" rel="stylesheet">

Первое, что бросается в глаза после сохранения изменений и обновления страницы — все стили сбросились!

HTML-страница с подключенным Tailwind

Это ожидаемо. У Tailwind есть предустановленные стили для обеспечения кроссбраузерности. Они состоят из популярного normalize.css и надстроек над ним.

Но нам ведь необходимо узнать, как использовать Tailwind вместе с нашими собственными стилями.

Сверяйтесь с коммитом!

Шаг 3: Использование Tailwind CSS для добавления стилей на страницу

Теперь, когда Tailwind установлен, у нас появилась возможность использовать его огромную библиотеку утилитарных классов — с их помощью мы вновь стилизуем страницу.

Давайте начнём с добавления margin ко всем нашим параграфам (<p>) и спискам (<ol>, <ul>). Мы можем сделать это, присвоив каждому элементу класс .my-5:

<p class="my-5"> Bender, quit destroying the universe! Yeah, I do that with my stupidness. I never loved you. Moving along… Belligerent and numerous. </p>

Наименование класса строится по шаблону, который вы увидите и в остальных утилитарных классах: в данном случае m означает margin, применяемый по оси y (y), со значением 5 (Tailwind использует rem — стало быть, значение равно 5rem).

HTML-страница с базовыми стилями параграфов

Далее давайте сделаем так, чтобы заголовки выглядели, как подобает заголовкам. Начиная с h1, добавим следующее: 

<h1 class="text-2xl font-bold mt-8 mb-5">

Вот что здесь происходит:

  • text-2xl: установка размера шрифта (font-size) на значение 2xl (в Tailwind 2xl будет равняться 1.5rem);
  • font-bold: установка насыщенности шрифта (font-weight) на значение bold;
  • mt-8: подобно my-5 —  установка margin top (t) на значение 8rem;
  • mb-5: установка margin bottom (b) на значение 5rem.
HTML-страница со стилизованным заголовком H1

Давайте добавим те же классы, что мы применили к h1, и к остальным заголовкам, но с уменьшением уровня заголовков будем уменьшать и размер шрифта:

  • h2: text-xl;
  • h3: text-lg.
HTML-страница, на которой стилизованы все заголовки

Теперь займёмся списками. Сначала добавим классы ненумерованному списку (<ul>):

<ul class="list-disc list-inside my-5 pl-2">

Вот что мы сделали:

  • list-disc: задали list-style-stype значение disc (вид маркеров у пунктов списка);
  • list-inside: установили положение маркеров относительно пунктов списка, задали list-style-position самого списка значение inside;
  • my-5: задали margin по оси y значение 5rem;
  • pl-2: задали padding left значение 2rem.

После этого мы можем применить те же классы к нумерованному списку (<ol>), заменив list-disc на list-decimal, чтобы в качестве маркеров были цифры, поскольку это нумерованный список.

<ol class="list-decimal list-inside my-5 pl-2">

Вот и всё — мы стилизовали списки.

HTML-страница со стилизованными списками

И наконец настало время сделать наш контент более читабельным — установим ему максимальную ширину и отцентрируем. Для этого к тегу <body> добавим следующее:

<body class="max-w-4xl mx-auto">

Примечание: Обычно эти классы не применяются напрямую к <body>. Вместо этого можно обернуть весь контент в тег <main>, но поскольку мы сейчас просто пытаемся понять, как работает фреймворк, то оставим всё, как есть. Если хотите, добавьте тег <main> и примените классы уже к нему.

Итак, наша страница готова.

HTML-страница с отцентрированным контентом

Сверяйтесь с коммитом!

Шаг 4: Добавление кнопки и других компонентов

Добавим кнопку в наш статичный пример.

Особенность Tailwind в том, что в нём заведомо нет готовых классов для компонентов: предполагается, что разработчики, скорее всего, будут переопределять их под свои потребности. Это значит, что нам нужно создавать собственные компоненты с помощью утилитарных классов.

Для начала добавим новую кнопку. Вставьте фрагмент кода, показанный ниже, в любое место на странице. Я вставлю его после тега первого параграфа (<p>):

<button>Party with Slurm!</button> HTML-страница с нестилизованной кнопкой

Вы можете заметить, что, как и другие элементы, кнопка не стилизована, однако если на неё кликнуть, она среагирует. Давайте зададим кнопке соответствующий внешний вид — добавим следующие классы:

<button class="text-white font-bold bg-purple-700 hover:bg-purple- 800 py-2 px-4 rounded"> Party with Slurm! </button>

Вот что здесь происходит:

  • text-white: установка для цвета текста значения white;
  • font-bold: установка насыщенности шрифта (font-weight) на значение bold;
  • bg-purple-700: установка значения purple с насыщенностью 700 для фонового цвета кнопки. 700 — величина по отношению к другим оттенкам цвета purple (можете ознакомиться с палитрами в официальной документации);
  • hover:bg-purple-800: установка значения purple с насыщенностью 800 для фонового цвета кнопки при наведении мыши. Tailwind предоставляет такие вспомогательные классы, которые позволяют с лёгкостью определять стили для интерактивных событий hover, focus и active;
  • py-2: установка padding по оси y на значение 2rem;
  • px-4: установка padding по оси x на значение 4rem;
  • rounded: скругление углов элемента с помощью установки border-radius. Tailwind задаёт border-radius значение .25rem.

Теперь у нас есть кнопка.

HTML-страница со стилизованной кнопкой

Вы можете применять эту методологию к любому другому компоненту, который захотите создать. И, хотя всё это выполняется вручную, скоро мы выясним, как упростить этот процесс при разработке более динамичных проектов, например тех, что созданы на React.

Часть 2: Подключение Tailwind CSS к React-приложению

Для большей реалистичности подключим Tailwind CSS к приложению, созданному с помощью Create React App.

Для начала давайте рассмотрим этапы, которые вам нужно будет пройти, чтобы подключить Tailwind к вашему проекту с установкой Create React App. Затем мы воспользуемся контентом из последнего примера, чтобы воссоздать его уже на React.

Шаг 1: Создание нового React-приложения

Я не собираюсь слишком подробно останавливаться на этом шаге. Суть в том, что мы запустим новое React-приложение при помощи Create React App.

Перед тем как начать, можете ознакомиться с инструкциями в официальной документации React.

После запуска сервера разработки вы должны увидеть приложение.

Стартовая страница Create React App

Теперь мы можем перенести в него весь наш старый контент. Для этого скопируйте всё содержимое тега <body> из статичного примера и вставьте в обёртку <div className="App"> в новом проекте на React.

Перенос кода в React-приложение

Заменим все атрибуты class=" из скопированного контента на className=" для соответствия атрибутам React.

Исправление названия атрибута class в контенте

И напоследок поменяем className App в обёртке <div> на классы, которые мы использовали в <body> из статичного примера.

Стилизация обёртки в приложении

Сохранив изменения и перезагрузив сервер, вы обнаружите, что страница выглядит хорошо. Но это впечатление обманчиво.

React-приложение с базовым контентом

У React есть собственные базовые стили, и, хоть страница и выглядит нормально, мы всё ещё не используем на ней Tailwind. Так давайте же установим его!

Сверяйтесь с коммитом!

Шаг 2: Подключение Tailwind CSS к React-приложению

Чтобы подключить Tailwind к приложению, нужно пройти несколько этапов. Убедитесь, что проходите их все — только так удастся создать нужную конфигурацию.

Для начала добавим зависимости:

yarn add tailwindcss postcss-cli autoprefixer # or npm install tailwindcss postcss-cli autoprefixer

Согласно документации Tailwind, нам нужно иметь возможность обрабатывать стили, чтобы они были должным образом добавлены в поток. Поэтому выше мы сделали следующее:

  • tailwindcss: добавили основной пакет Tailwind;
  • postcss-cli: Create React App уже использует postcss, но нам необходимо сконфигурировать Tailwind так, чтобы он стал частью сборки и обрабатывал стили самостоятельно;
  • autoprefixer: в Tailwind нет вендорных префиксов, поэтому для решения этой задачи мы добавляем autoprefixer — он станет частью конфигурации postcss.

Также добавим две зависимости для разработки, чтобы облегчить себе работу с кодом:

yarn add concurrently chokidar-cli -D # or npm install concurrently chokidar-cli --save-dev
  • concurrently: пакет, который позволяет проводить несколько команд одновременно, что полезно, ведь нам нужно прослушивать и стили, и React-приложение;
  • chokidar-cli: с помощью этой зависимости можно прослушивать файлы и проводить команду при их изменениях — это позволит нам прослушивать CSS и при его изменении перезапускать сборку.

Теперь давайте зададим конфигурацию для postcss. Для этого создайте в корне проекта файл с именем postcss.config.js и скопируйте в него следующее:

// Содержание postcss.config.js module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer') ], };

Этот код добавит плагины Tailwindcss и Autoprefixer в конфигурацию postcss.

Нам необходимо сделать конфигурацию частью процессов прослушивания и сборки. В файле package.json добавьте следующие два определения к свойству scripts:

"build:css": "tailwind build src/App.css -o src/index.css", "watch:css": "chokidar 'src/App.css' -c 'npm run build:css'",

Также включите в скрипты start и build команды:

"start": "concurrently -n Tailwind,React 'npm run watch:css' 'react- scripts start'", "build": "npm run build:css && react-scripts build",

Конфигурация готова. Теперь давайте попробуем вернуть наши стили к тому состоянию, в каком мы оставили их в статичном примере.

Замените всё содержимое файла App.css на следующее:

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

Этот код импортирует базовые стили, компоненты и утилитарные классы Tailwind, чтобы он работал так, как от него и ожидается.

Также можно не импортировать App.css из App.js, поскольку теперь он напрямую внедряется в index.css. Уберите эту строку:

import './App.css';

Теперь самое время вернуться к серверу разработки. Если он уже запущен, перезапустите его, чтобы применились все изменения в конфигурации.

Страница должна выглядеть точно так же, как она выглядела в статичном примере.

React-приложение со стилизованным контентом

Сверяйтесь с коммитом!

Шаг 3: Создание нового класса для компонента кнопки с помощью Tailwind

Пусть у Tailwind и нет встроенных классов для компонентов, создать их очень просто.

Мы будем использовать кнопку, которую уже сделали в примере с созданием нового компонента. Мы напишем новый класс btn, а также дополняющий его модификатор цвета btn-purple.

Давайте откроем наш файл App.css , в котором мы и будем создавать новый класс. Добавим в него следующее:

.btn { @apply font-bold py-2 px-4 rounded; }

Если помните, в нашем HTML-файле мы уже добавляли эти классы к элементу <button>. Tailwind позволяет нам добавить стили, которые превращают эти утилитарные классы в новый класс — в данном случае класс .btn.

Теперь добавим этот класс к нашей кнопке:

<button className="btn text-white bg-purple-700 hover:bg-purple- 800"> Party with Slurm! </button>

При открытии страницы видно, что кнопка выглядит точно так же. Но, если открыть элемент в инспекторе, можно увидеть новый класс .btn, сгенерированный из стилей.

Класс .btn в React-приложении, созданный с помощью Tailwind

Далее создадим модификатор цвета. Подобно тому, что мы делали до этого, применим правила:

.btn-purple { @apply bg-purple-700 text-white; } .btn-purple:hover { @apply bg-purple-800; }

Таким образом мы добавляем нашему классу кнопки фоновый цвет и цвет текста. Также мы делаем фоновый цвет кнопки более тёмным при наведении мыши.

Необходимо добавить новый класс нашей кнопке в HTML и убрать ранее применённые:

<button className="btn btn-purple"> Party with Slurm! </button>

Можно видеть, что внешне опять-таки ничего не изменилось, но у нас появился новый класс для кнопки.

Стилизованная с помощью Tailwind кнопка в React

Сверяйтесь с коммитом!

Применение этих принципов для других компонентов

В этом пошаговом руководстве мы научились создавать новые классы с помощью директивы @apply в Tailwind. Она позволяет создавать классы для многократного использования в компонентах (например, в кнопках).

Мы можем применять такой подход к любому количеству компонентов в проекте. К примеру, если бы мы захотели, чтобы наши списки всегда выглядели так, как было задано, то мы могли бы создать класс .list-ul, который описывал бы ненумерованный список с применением утилит list-disc list-inside my-5 pl-2 из Tailwind.

Перевод статьи Colby Fayock: What is Tailwind CSS and How Can I Add it to my Website or React App?

Поделиться статьей:

Вернуться к статьям

Комментарии

    Ничего не найдено.
Нажмите для отмены.