TailwindCSS로 추천 카드 만들기

소개하다.

안녕하세요, 제 블로그로 돌아온 것을 환영합니다.사람들이 기다리던 TailwindCSS 프로젝트가 여기 있습니다!!호리!그거 좋잖아.TailwindCSS 시리즈의 마지막 3편에서 우리는TailwindCSS의 기본 원리, 그의 장점과 단점을 토론했고TailwindCSS의 맞춤형 제작, 심지어TailwindCSS에서 우리만의 맞춤형 실용 프로그램과 맞춤형 클래스를 만들었다.이 문서에서는 다음을 다룹니다.

모바일 우선 디자인.

TailwindCSS의 모바일 응답 기능

서로 다른 효용 유형 조합의 사용

If this is your first time hearing about TailwindCSS, be sure to consume the following article and come back and join us here, we would be waiting for you:

• Getting Started with TailwindCSS - An Overview and Walkthrough Tutorial
• A gentle guide to customization in TailwindCSS
• Creating customized Utility and Components classes in TailwindCSS

본고에서 우리는 우리의 이름, 직업, 그리고TailwindCSS에 대한 멋진 증언이 적힌 증명 카드를 구축할 것이다.다음은 내 것이다.

정말 귀여워요?나는 어떤 CSS도 쓰지 않고 그것을 만들었다.저와TailwindCSS는 당신을 어떻게 구축하는지 배울 것입니다. 본고의 목적을 위해 저는 제가 좋아하는 색깔로 저를 재구성할 것입니다. 하지만 당신 쪽에서 저는 당신의 색깔, 당신의 아름다운 사진, 당신의 이름과 직업을 추가해서 당신을 변화시키기를 바랍니다. 제가 하는 것처럼.
우리는 Tailwind Playground를 사용할 것이다. 물론 당신이 좋아하는 온라인 환경을 선택할 수 있다. 로컬 기기에서 당신의 코드 편집기를 사용할 수도 있고 학습 과정을 통해 이 실천에 Tailwind를 설치할 수도 있다. 이것은 당신이 배운 것을 강화할 수 있기 때문에 이것article에서 설치 안내서를 사용할 수 있다.다른 온라인 코드 편집기를 사용하려면 Codepen 을 보십시오.코드pen을 사용한다면,TailwindCSS를 사용할 수 있는 설정을 추가하는 방법을 가르쳐 드리겠습니다.

펜을 열고 Settings 탭을 클릭합니다.

CSS를 클릭하고 아래로 스크롤Add External Stylesheets/Pens합니다.

그런 다음 TailwindCSS를 검색합니다.그런 다음 클릭하면 끝바람이 현재 Codepen에서 활성 상태입니다.너의 손바닥을 털어라.

Tailwind Playground 미풍이 박혀 있어 아무런 설정이 필요 없습니다.

우리가 만들자!!!

이제 구축을 시작하려면TailwindCSS가 하나의 프레임워크라는 것을 알아야 합니다. 이 프레임워크는 모바일 장치를 먼저 사용할 수 있는 기회를 줍니다.
우리가 원하는 모든 것을 설계하는 방법은 우리가 이 프로젝트에서 사용할 방법이기 때문이다.
우선 카드의 모든 항목을 포함하는 용기section를 만듭니다.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">

</section>

그럼 우리 위에서 뭐 했어?우리는 용기 apadding-top4를 주고 그 다음에 흰색 배경을 주었다. 경계 반경은TailwindCSS류rounded-xl를 사용했다. 이것은 0.75rem와 같다. 카드에 음영을 추가했다. mx-auto는 x축(왼쪽과 오른쪽)의 경계를 사용하여 페이지에 중심을 잡고 가장자리 10의 경계를 포함하여 페이지로 밀어낸다.그리고 우리는 너비w-4/5를 증가시켰다. 이것은 너비가 80%와 같은 순풍 등급이다.완성좋아.
현재, section 에서, 우리는 우리의 증명 성명을 보존하기 위해 blockquote 를 만들 것입니다.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">
<blockquote class="m-8">
    <p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
  </blockquote>

</section>

우리는 수업blockquote의 각 방면에 8의 간격을 늘렸고 수업semi-bold에서 증명 성명을 했다font-semi-bold.이제 카드는 다음과 같습니다.

우리 잘했어!!!이제 이름, 사진, 직업을 포함하는 부분으로 넘어가겠습니다.우리는 이미지와 우리의 이름 + 직업을 포장하기 위해 div를 만들 것입니다.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">

<blockquote class="m-8">
    <p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
  </blockquote>


 <div class= "text-white bg-pink-600 p-8 rounded-b-xl">

    </div>

</section>

div의 배경색은 분홍색이고 밀도는 600이며 텍스트는 흰색이며 주위는 8로 채워지고 밑부분은 원형(테두리 반경은 0.75rem)으로 배경색을 선택할 수 있습니다.
이제 사진과 글을 한 장 추가합시다. 이것은 우리의 이름과 직업입니다.나는 Unsplash의 그림을 사용할 것이다.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5">

<blockquote class="m-8">
    <p class= "font-semibold"> "I had no design skills prior to using TailwindCSS, but with this amazing tools, I got better at CSS and design in general, it is an amazing tool" </p>
  </blockquote>


 <div class= "text-white bg-pink-600 p-8 rounded-b-xl">

     <img src="https://images.unsplash.com/photo-1591258739299-5b65d5cbb235?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="" class="w-24 h-24 rounded-full border-4 border-white " >

     <div>
       <p class= "font-bold"> Franklin Okolie</p>
       <p> Software Engineer</p>
     </div>
    </div>

</section>

우리의 이미지는 한 등급w-24이 있는데 이것은 너비가 6rem이고 높이가 6rem인 이미지가 한 등급h-24이 있다는 것을 의미한다.우리는 rounded-full를 동그라미로 만들고 그 주위에 흰색 테두리를 둘렀다. 나는 내 이름+직업을 하나div에 포장하여 코드를 간결하고 쉽게 읽을 수 있도록 했다.이제 카드는 다음과 같습니다.

호리!우리는 손바닥을 털고 계속 전진할 수 있지만, 데스크톱에 더 많은 스타일을 추가해야 합니다. 이 스타일은 데스크톱 화면에 기본적으로 적용됩니다. 설령 우리가 이동을 우선시하는 방법을 사용했다 하더라도.section에 다음을 추가합니다.

<section class= "pt-4 bg-white rounded-xl shadow mx-auto my-10 w-4/5 md:w-3/5">
</section>

우리는 방금 md:w-3/5를 추가했는데 이것은 중등 및 이상 스크린에 대해 이 부분의 너비는 w-3/5로 60%의 너비와 같다는 것을 의미한다.우리div가 그림과 텍스트를 손에 들고 있을 때, 우리는 중간 화면에서 그림 위쪽과 우리의 이름 + 직업을 나란히 하기를 희망한다.따라서 flexbox 스타일을 추가하고 가운데에 배치할 수 있습니다.

<div class= "text-white bg-pink-600 p-8 rounded-b-xl md:flex md:items-center">
</div>

그림% 1개의 캡션을 편집했습니다.

  <img src="https://images.unsplash.com/photo-1591258739299-5b65d5cbb235?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80" alt="" class="w-24 h-24 rounded-full border-4 border-white md:mr-4">

우리 끝났어!휴대전화에서 데스크톱까지의 모든 화면에 우리의 카드는 고정되어 있어 응답 속도가 매우 빠르다.이거 달콤하지 않아요?우리는 어떤 CSS도 작성하지 않고 이 모든 것을 완성했다.이것은 세계 8대 기적일 것이다.

결론

나는 네가 이 문장을 좋아하길 바란다. 나는 정말 지체없이 너의 추천 카드를 보고 싶다. 너는 평론 구역에서 나에게 보여줄 수 있니?내가 좀 더 보여줄게.

내 순풍 인증카드here

내 코드 펜 추가 카드here

그것들이 예쁜지 말해 주세요.TailwindCSS와 다른 주제에 대한 더 많은 글이 곧 발표될 것이니, 제가 발표할 때의 알림을 주목해 주십시오.만약 네가 이 문장이 매우 유용하다고 생각한다면, 공유하고 좋아하며 평론할 수 있다.
Go, Javascript,TailwindCSS, 소스 오픈, 본문에 대해 궁금한 것이 있다면?너는 여기서 나를 찾을 수 있다.다음에 봐요.감사합니다.