Краткое руководство по Tailwind

Web Development

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

Что такое Tailwind CSS?

Tailwind CSS – это набирающий популярность CSS-фреймворк, позволяющий вносить изменения в оформление веб-сайтов и приложений, не покидая HTML-разметку (причем как в соответствующих файлах, так и в компонентах типа React или Svelte) и не используя тег <style>.

Идея заключается в том, чтобы прописывать стили напрямую в директиву class, а не под селекторами в CSS-файле. Это выглядит так:

<div class="flex justify-center font-bold text-red-400">Tailwind</div>
<div class="flex justify-center font-bold text-red-400">Tailwind</div>

Технически это похоже на применение inline-классов, когда вы описываете дизайн элемента внутри его тега. Например, так:

<div style="display: flex; justify-content: center; font-weight: 700; color: rgba(248, 113, 113, var(--tw-text-opacity));">Tailwind</div>
<div style="display: flex; justify-content: center; font-weight: 700; color: rgba(248, 113, 113, var(--tw-text-opacity));">Tailwind</div>

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

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

html-код:

<div class="flex justify-center flex-col border text-blue-200">Tailwind</div>
<div class="flex justify-center flex-col border text-blue-200">Tailwind</div>

css-код:

.flex \{ display: flex; }
.justify-center \{ justify-content: center; }
.flex-col \{ flex-direction: column; }
.border \{ border: 1px black solid; }
.text-blue-200 \{ --tw-text-opacity: 1; rgba(191, 219, 254, var(--tw-text-opacity)); }
.flex \{ display: flex; }
.justify-center \{ justify-content: center; }
.flex-col \{ flex-direction: column; }
.border \{ border: 1px black solid; }
.text-blue-200 \{ --tw-text-opacity: 1; rgba(191, 219, 254, var(--tw-text-opacity)); }

Установка

Для работы желательно установить расширение для VS Code - Tailwind CSS IntelliSense

Можете использовать любой JS-фреймворк по вашему выбору. В этом руководстве используется Create React App.

Создание навигационной панели а-ля Discord

Основной контейнер

Создайте строку flexbox, просто добавив класс flex к родительскому элементу.

App.js
function App() {
  return (
    <div className="flex">
    </div>
  );
}
function App() {
  return (
    <div className="flex">
    </div>
  );
}

Позиционирование боковой панели

Объедините служебные классы Tailwind для размещения боковой панели. При наведении курсора на каждый класс в VS Code он будет отображать свои истинные значения CSS.

SideBar.js
const SideBar = () => {
  return (
    <div className="fixed top-0 left-0 h-screen w-16 m-0 flex flex-col bg-gray-900 text-white shadow-lg">
    </div>
  );
};
const SideBar = () => {
  return (
    <div className="fixed top-0 left-0 h-screen w-16 m-0 flex flex-col bg-gray-900 text-white shadow-lg">
    </div>
  );
};

Добавление кнопки со значками

Чтобы быстро добавить кнопку со значком на навигационную панель, установите react-icons.

terminal
$ npm install react-icons
$ npm install react-icons
SideBar.js
import { BsPlus, BsFillLightningFill } from 'react-icons/bs';
import { FaFire, FaPoo } from 'react-icons/fa';
 
const SideBar = () => {
  return (
    <div className="...">
      <SideBarIcon icon={<FaFire size="28" />} />
      <SideBarIcon icon={<BsPlus size="32" />} />
      <SideBarIcon icon={<BsFillLightningFill size="20" />} />
      <SideBarIcon icon={<FaPoo size="20" />} />
    </div>
  );
};
 
const SideBarIcon = ({ icon }) => (
  <div className="sidebar-icon group">
    {icon}
  </div>
);
import { BsPlus, BsFillLightningFill } from 'react-icons/bs';
import { FaFire, FaPoo } from 'react-icons/fa';
 
const SideBar = () => {
  return (
    <div className="...">
      <SideBarIcon icon={<FaFire size="28" />} />
      <SideBarIcon icon={<BsPlus size="32" />} />
      <SideBarIcon icon={<BsFillLightningFill size="20" />} />
      <SideBarIcon icon={<FaPoo size="20" />} />
    </div>
  );
};
 
const SideBarIcon = ({ icon }) => (
  <div className="sidebar-icon group">
    {icon}
  </div>
);

Создание пользовательских классов

Директива @apply позволяет создавать пользовательские классы CSS путем объединения классов Tailwind.

index.css
@layer components {
  .sidebar-icon {
    @apply relative flex items-center justify-center 
      h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
      bg-gray-800 text-green-500
      hover:bg-green-600 hover:text-white
      rounded-3xl hover:rounded-xl
      transition-all duration-300 ease-linear
      cursor-pointer;
  }
}
@layer components {
  .sidebar-icon {
    @apply relative flex items-center justify-center 
      h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
      bg-gray-800 text-green-500
      hover:bg-green-600 hover:text-white
      rounded-3xl hover:rounded-xl
      transition-all duration-300 ease-linear
      cursor-pointer;
  }
}

Анимированные подсказки

Создание контейнера для всплывающих подсказок

Каждая кнопка со значком имеет дочерний класс для всплывающей подсказки.

SideBar.js
const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
  <div className="sidebar-icon">
    {icon}
 
    <span class="sidebar-tooltip">{text}</span>
  </div>
);
const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
  <div className="sidebar-icon">
    {icon}
 
    <span class="sidebar-tooltip">{text}</span>
  </div>
);
index.css
.sidebar-tooltip {
  @apply absolute w-auto p-2 m-2 min-w-max left-14
  rounded-md shadow-md
  text-white bg-gray-900 
  text-xs font-bold
  transition-all duration-100 scale-0 origin-left;
}
.sidebar-tooltip {
  @apply absolute w-auto p-2 m-2 min-w-max left-14
  rounded-md shadow-md
  text-white bg-gray-900 
  text-xs font-bold
  transition-all duration-100 scale-0 origin-left;
}

Анимировние группы элементов

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

Класс group не работает с @apply, поэтому его следует использовать явно.

SideBar.js
const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
  <div className="sidebar-icon group">
    {icon}
 
    <span class="sidebar-tooltip group-hover:scale-100">{text}</span>
  </div>
);
const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
  <div className="sidebar-icon group">
    {icon}
 
    <span class="sidebar-tooltip group-hover:scale-100">{text}</span>
  </div>
);

Ссылки и дополнительная информация

csscmsreact

предыдущая запись

следующая запись

Коментарии

Остались вопросы, появились идеи для обсуждения или просто хотите оставить отзыв? Буду рад любой обратной связи!

Вместо авторизации в приложении giscus , вы также можете оставлять комментарии непосредственно на GitHub, с которым связанна данная ветка комментариев.

Похожие записи

Доступ к Docker Hub

Обход блокировки досутпа к Docker Hub с помощью прокси-сервера

Комментарии в блоге с Giscus

Система комментариев на основе GitHub Discussions.