나는 tailwindcss로 멋진 UI 구성 요소를 구축하는 것이 얼마나 간단한지 보여주기 위해 이 기사를 작성하기로 결정했습니다. 사용자 정의 CSS가 필요하지 않습니다.

"하지만 내 구성 요소를 반응형으로 만드는 데 필요한 미디어 쿼리는 어떻습니까?"미디어 쿼리는 잊어버리세요. tailwindcss에는 responsive utility variants의 놀라운 세트가 있습니다.

Tailwind로 인터페이스를 구축하면서 개발 프로세스의 속도를 높이는 데 도움이 되는 4가지 유용한 스니펫을 보여드리겠습니다.

재사용 가능한 구성 요소로 코드 중복 방지

"너무 많은 중복 코드"라고 생각할 수 있는 몇 가지 시나리오가 있습니다. 그러나 Angular, React 또는 Vue와 같은 최신 JS 프레임워크로 작업하는 경우 재사용 가능한 구성 요소를 추출하여 중복 코드를 쉽게 줄일 수 있습니다. 이 주제에 대한 자세한 내용은 다음 게시물에서 제공됩니다.

반응형 그리드

1- 3열 그리드

<!-- Container -->
<div class="flex flex-wrap mt-2 mx-2">
    <!-- Item -->
    <div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
        <div class="bg-yellow-500 p-4">
            Your content here...
        </div>
    </div>
    <!-- Item -->
    <div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
        <div class="bg-yellow-500 p-4">
            Your content here...
        </div>
    </div>
    ...
</div>

각 그리드 요소에 대해 다음 유틸리티를 사용하고 있습니다.

w-full 폭을 적용합니다: 100%

md:w-1/2는 중간 화면 크기 이상에서 너비: 50%를 적용합니다

.

lg:w-1/3는 너비를 적용합니다: 대형 화면 크기 이상

에서 33,33%

2열 그리드

행당 2개의 열만 표시하려고 한다고 가정해 보겠습니다. 이 경우 코드에 약간의 변경이 필요합니다. 기본적으로 lg:w-1/3 유틸리티를 제거해야 합니다. 그런 식으로 각 항목은 중간 화면 크기 이상에서 width:50%를 적용합니다.

2- 3열 카드 그리드

<!-- Container -->
<div class="flex flex-wrap mt-2 mx-2">
    <!-- Item -->
    <div class="w-full md:w-1/2 lg:w-1/3 px-2 my-2">
        <div class="shadow-md bg-white">
            <img class="h-48 w-full object-cover" src="https://your-image-url.jpg" alt="">
            <div class="flex flex-col p-4">
                <p class="text-lg">Your title here...</p>
                <p class="text-gray-600">Your description here...</p>
                <button class="self-end mt-4">Show more...</button>
            </div>
        </div>
    </div>
    ...
</div>

이미지에서 object-cover 유틸리티를 사용하여 해당 컨테이너를 덮도록 요소의 콘텐츠 크기를 조정하고 있습니다.

컨테이너 내에서 이미지 위치를 변경해야 하는 경우 Object Position 유틸리티

를 확인하십시오.

3- 다채로운 노트

<!-- Orange note -->
<div class="bg-orange-100 text-orange-500 border-l-8 border-orange-500 p-4 mb-2">
    <p class="font-bold">Note</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...</p>
</div>

4- 버튼

<!-- Simple button -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mb-2">Button</button>
<!-- Outline button -->
<button class="hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded mb-2">Button</button>
<!-- Simple button with icon -->
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex mr-2 mb-2">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path class="heroicon-ui" fill="white" d="M9.3 8.7a1 1 0 0 1 1.4-1.4l4 4a1 1 0 0 1 0 1.4l-4 4a1 1 0 0 1-1.4-1.4l3.29-3.3-3.3-3.3z"/></svg>
    <span>Button</span>
</button>

hover:bg-blue-700를 사용하여 가리키기 상태

에 다른 배경색을 적용합니다.



tailwindcss를 사용해 보셨습니까? 그것에 대한 당신의 경험은 어땠습니까?