이제 Tailwind css로의 이동을 마치기 위해서는
AuthInputs.jsx 파일로 돌아가겠습니다
그 안으로 이동한 후
ControlContainer의 style 부분을 제거하겠습니다
그것을 더 이상 사용하지 않기 때문입니다
그 대신, 여기 아래에 다시 원래대로
닫는 태그와 마찬가지로 일반적인 div로 바꿔줍니다
지금부터는 여기에 새로운 클래스들을 추가하는 것에 대한 것들입니다
여기 메인 div에 추가하는 것처럼 말입니다
예를 들어 여기에서, 저는 이것이
가져갈 수 있는 최대한의 너비이자
이 요소에 max-w-sm을 설정함으로서 가져갈 수 있는
24 rem의 최대 너비를 가지도록 확실하게 하고 싶습니다
여러분은 p-8을 활용해 모든 방향에 여백을 추가할 수 있고
정확히 하자면 이 경우에는 2 rem의 여백을 말합니다
rounded 유틸리티 클래스를 추가하여 둥근 모서리를 추가할 수 있습니다
shadow-md를 이용해 배경 화면에 약간의 그림자를 추가할 수 있습니다
이곳을 보시면 다양한 그림자 강도를 사용하실 수 있습니다
여기서 저는 중간 그림자를 사용하겠습니다
그 다음에 저는 이 div에서 배경에 약간의 기울기를 주고 싶은데
이는 Tailwind를 사용하여 쉽게 얻을 수 있습니다
bg-gradient를 사용하여
위부터 아래까지 기울기를 만들어 줄 것입니다
이 유틸리티 클래스가 하는 일이 그것입니다
그 다음 시작하는 색을 from-stone-700을 통해 설정하고
이 기울기의 목표 색을 to-stone-800으로 설정해 줄 것입니다
다시 말씀드리지만, 이것은 Tailwind를 사용해 작업하기 이전에
추측하거나 알 수 있는 것이 아닙니다
하지만 당연히 기울기를 적용하는 것도
공식 문서 자료를 통해 배울 수 있습니다
그래서 이것을 저장하시면
이렇게 멋있는 배경 화면을 얻을 수 있습니다
당연하게도 가운데로 정렬되어야 하기 때문에
수평 여백을 자동으로 설정해주는
mx-auto를 사용하여 정렬할 수 있습니다
이것은 CSS에서 무언가를 가운데로 정렬할 때 쓸만한 방법입니다
또한 저는 입력하는 칸 사이의 공간이 더 넓었으면 좋겠습니다
그것을 위해서, 여러분은 입력을 관리하는 이 div로 와서
Flexbox를 다시 사용할 것인데
felx-col을 통해 요소들을 수직축 위에 위치하고
아래의 요소들 사이에 공간을 추가합니다
예를 들어 입력들 사이에 2의 공백을 추가합니다
그 다음 아래쪽에 여백을 추가하여
입력 밑에
버튼까지의 거리가 조금 있도록 합니다
이렇게 해서 더 괜찮아 보이도록 합니다
tailwind로 이동을 마무리하기 위해서, 저는 이 버튼의 서식을 정하고
버튼들이 오른쪽으로 위치할 수 있도록 확실히 하고 싶습니다
그리고 그것은 현재 actions라는
클래스 이름을 가진 div로 가서 달성할 수 있습니다
그리고 이 이름을 Flexbox를 사용하기 위해 flex로 바꾸어 줍니다
하지만 이번엔 기본값인 수평축을 따라 사용할 것입니다
여러분은 justify-end를 활용해 요소들을 끝으로 밀어낼 수 있습니다
그들 사이에 gap-4를 사용해 4의 공백을 만들어 줍니다
그리고 text-button을 text-amber-400와 같은
Tailwind CSS 클래스들로 바꿔서
다른 버튼의 서식을 설정합니다
그리고 hover 서식을 추가하여 그 색을
예를 들어 text-amber-500으로 바꿀 수 있습니다
그것을 통해 제가 보기엔 더 괜찮아진 것 같습니다
그리고 이것이 Vanilla CSS나 서식화된 요소들이 아닌
Tailwind CSS를 사용한 완성된 앱입니다