Tailwind CSS로 로그인 양식 스타일 지정

6998 단어 tutorialtailwindcsscss
이전에는 material design card component 으로 Tailwind CSS 을 만드는 방법에 대해 썼습니다.

이 자습서에서는 완료되면 다음과 같은 로그인 양식의 스타일을 지정합니다.



빈 HTML 파일을 만들고 CDN을 통해 Tailwind를 로드하여 시작하겠습니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Tailwind CSS Login Form</title>
    <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" />    
  </head>
  <body>   
  </body>
</html>


다음으로 <body> 태그에 다음 클래스를 추가합니다.

<body class="flex h-screen bg-indigo-700">


  • flex h-screen – 로그인 양식을 수평 및 수직 중앙 정렬할 수 있습니다.
  • bg-indigo-700 – 배경 색상을 추가합니다. Tailwind에서 색상은 100(밝음)에서 900(어두움)까지의 값을 가질 수 있습니다.

    • 이제 머리글(로고), 양식 및 바닥글(CTA 링크)을 둘러싸는 다음 클래스와 함께 <div>를 추가합니다.

    <div class="w-full max-w-xs m-auto bg-indigo-100 rounded p-5">   
  <!-- header -->
  <!-- form -->
  <!-- footer --> 
</div>


  • w-full – <div>가 해당 크기 설정의 전체 너비에 걸쳐 있는지 확인합니다.
  • max-w-xs – 최대 너비를 매우 작게 설정합니다( 2rem ).
  • m-auto – margin:auto를 전체(x 및 y축 모두)에 적용하여 양식이 중앙에 오도록 합니다.
  • rounded – 표준 둥근 테두리 반경, 줄이거나( rounded-sm ) 늘릴 수 있습니다( rounded-lg ).
  • p-5 – 균일한 패딩을 정의합니다.

    • 래퍼<div> 내부의 첫 번째는 로고 이미지가 포함된 <header>입니다.

    <header>
  <img class="w-20 mx-auto mb-5" src="https://img.icons8.com/fluent/344/year-of-tiger.png" />
</header>


  • w-20 – 로고 이미지의 너비는 344픽셀이므로 너비를 보다 합리적인 5rem/80px로 제한합니다.
  • mx-auto – 로고가 가운데 정렬되도록 x축 여백(왼쪽 및 오른쪽)을 자동으로 설정합니다.
  • mb-5 – 로고 하단에만 여백을 적용합니다.

    • 사용자 이름 입력, 비밀번호 입력 및 제출 버튼이 포함된 양식은 다음과 같습니다.

    <form>
   <div>
    <label class="block mb-2 text-indigo-500" for="username">Username</label>
    <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="text" name="username">
  </div>
  <div>
    <label class="block mb-2 text-indigo-500" for="password">Password</label>
    <input class="w-full p-2 mb-6 text-indigo-700 border-b-2 border-indigo-500 outline-none focus:bg-gray-300" type="password" name="password">
  </div>
  <div>          
    <input class="w-full bg-indigo-700 hover:bg-pink-700 text-white font-bold py-2 px-4 mb-6 rounded" type="submit">
  </div>       
</form>


  • block - 입력 필드 위에 표시되도록 레이블을 display:block로 설정합니다.
  • border-b-2 border-indigo-500 – 텍스트 필드 하단에 2px 남색 테두리를 추가합니다.
  • outline-none focus:bg-gray-300 – 배경색을 적용하는 대신 기본 입력 포커스를 제거합니다.
  • hover:bg-pink-700 – 클래스 앞에 hover:를 추가하여 Tailwind의 호버 스타일을 적용합니다.

    • 마지막으로 "비밀번호 찾기"및 "계정 만들기"링크가 포함된 <footer>:

    <footer>
  <a class="text-indigo-700 hover:text-pink-700 text-sm float-left" href="#">Forgot Password?</a>
  <a class="text-indigo-700 hover:text-pink-700 text-sm float-right" href="#">Create Account</a>
</footer>


  • text-sm – 글꼴 크기를 기본 기본 글꼴 크기에서 약간 줄입니다.
  • float-left float-right – 표준 CSS 플로트를 적용합니다.
    • Redux 키트가 포함된 현대 React Redux 자습서 - 2020
    Javascript에서 소수점 - 재미있는 질문입니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage