Tailwind CSS로 사이드바 만들기

Tailwind는 CSS 프레임워크입니다. 이를 사용하면 응용 프로그램의 스타일을 지정하기 위해 사용자 지정 CSS를 작성할 필요가 없습니다. Tailwind는 패딩, 여백, 색상, 글꼴 등을 제어하여 아름다운 맞춤형 디자인을 구축할 수 있는 CSS 도구 및 클래스의 심층 카탈로그를 제공합니다.

Tailwind를 사용하여 사이드바를 만드는 방법을 살펴보겠습니다.

다른 모든 태그가 포함될 첫 번째 태그는 div 이며 여기에 클래스를 작성할 것입니다.

min-h-0 (min-height: 0px)

flex-1 (flex: 1 1 0%)

overflow-hidden (overflow: hidden)

<div class="min-h-0 flex-1 flex overflow-hidden">
....
</div>

첫 번째 태그div 내부의 두 번째 태그는 다음 클래스가 포함된 nav입니다.

hidden lg:block (모바일에서 사이드바를 숨기고 더 큰 화면에서 볼 수 있도록)

flex-shrink-0 (플렉스 아이템이 수축되는 것을 방지하기 위해)

bg-gray-800 (background-color: rgb(31 41 55))

overflow-y-auto (필요한 경우 수직 스크롤을 허용하기 위해)

<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)

p-3 (padding: 0.75rem; /* 12px */)

<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로 작성된 것과 동일합니다.

최종 사이드바는 다음과 같습니다.