Tailwind — это фреймворк CSS. При его использовании вам не придется писать пользовательский CSS для стилизации вашего приложения. Tailwind предоставляет глубокий каталог инструментов и классов CSS для управления отступом, полями, цветом, шрифтом и многим другим для создания красивого пользовательского дизайна.
Давайте посмотрим, как можно создать боковую панель с помощью Tailwind.
Первый тег, внутри которого будут находиться все остальные теги, — это div
, в который мы запишем классы:
min-h-0 (min-height: 0px)
flex-1 (flex: 1 1 0%)
<div class="min-h-0 flex-1 flex overflow-hidden">
....
</div>
Второй тег, внутри первого div
— это nav
со следующими классами:
bg-gray-800 (background-color: rgb(31 41 55))
<div class=" min-h-0 flex-1 flex overflow-hidden">
<nav aria-label="Sidebar" class="narrow-sidebar hidden lg:block lg:flex-shrink-0 lg:bg-gray-800 lg:overflow-y-auto">
....
</nav>
</div>
Третий тег, внутри nav
— еще один div
, со следующими классами:
relative (position: relative)
w-20 (width: 5rem; /* 80px */)
flex (display: flex)
space-y-16 (margin-top: 4rem; /* 64px */)
flex-col (to position flex items vertically)
<div class=" min-h-0 flex-1 flex overflow-hidden">
<nav aria-label="Sidebar" class=" hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
<div class="relative w-20 flex space-y-16 flex-col p-3">
....
</div>
</nav>
</div>
Теперь осталось добавить иконки и их именование. В этом посте я сделал боковую панель только с тремя иконками, чтобы показать базовый пример. Окончательный код для данного примера будет таким:
<div class=" min-h-0 flex-1 flex overflow-hidden">
<nav aria-label="Sidebar" class="hidden lg:block flex-shrink-0 bg-gray-800 overflow-y-auto">
<div class="relative w-20 flex space-y-16 flex-col p-3">
<a href="#" class="text-gray-400 hover:text-red-700">
<div class="flex-shrink-0 inline-flex items-center justify-center w-14">
<i class="fa fa-house"></i>
</div>
<div class="text-center text-xs font-normal ">Home</div>
</a>
<a href="#" class="text-gray-400 hover:text-red-700">
<div class="flex-shrink-0 inline-flex items-center justify-center w-14">
<i class="fa fa-cog"></i>
</div>
<div class="text-center text-xs font-normal ">Settings</div>
</a>
<a href="#" class="text-gray-400 hover:text-red-700">
<div class="flex-shrink-0 inline-flex items-center justify-center w-14">
<i class="fa fa-envelope"></i>
</div>
<div class="text-center text-xs font-normal ">Messages</div>
</a>
</div>
</nav>
</div>
Как мы видим, использование Tailwind означает написание всего необходимого кода в html. Конечный результат будет таким же, как если бы он был написан с помощью CSS.
Окончательный вид боковой панели выглядит следующим образом: