Tailwind

프론트의 꽃은 무엇인가

프론트의 틀을 짜놨다 근데 안 이쁘다..

“ 이걸 어떻게 예쁘게 꾸밀 것인가? ”

이때 등장하는 것이 바로 css다.

​

자바스크립트로 동작구현 따로 input border등 여러가지로 써놨다치자 이제 이걸 꾸며야된다

그때 쓰는게 css인데 순수 css만 써보면 막 놔눠야되는데 어떻게 구상하지?

막 쓰다보면 이거 저거 꼬이고 선언했던거 보면 코드가 더러워지고

그렇다고 해서 따로 script로 짠다해도 class로 가져온거 이거 어디 태그? 이렇게 찾게 되면서 굉장히 가독성이 떨어지고 ui설계 면에서 애초에 짰던가 싶어서 밑에 짜면서 코드는 점점 길어진다.

​

이러한 요건을 바꾸기 위해 제공되는것이 Tailwind

https://tailwindcss.com/

ui 개발 속도가 굉장히 빨라진다는데 자 코드로 알아보자

​

.title {
  font-size: 18px;
  font-weight: 600;
}
.btn {
  align-self: flex-start;
  padding: 8px 12px;
  border-radius: 8px;
  background: #2563eb;
  color: white;
  border: none;
  cursor: pointer;
}

.title {
  font-size: 20px;
  font-weight: 600;
}

자 순수 css는 클래스에서 선언하는걸 알 수 있는데 이것만 봐서는 음 그닥 나쁘지 않은데? 할 수도 있는데

잘 보면 클래스의 이름도 겹쳐있는데 이렇게 되면 코드가 덮어지면서 네이밍이 겹치는 코드가 늘어나게 되고 얼룩덜룩해진다.

또한 이게 몇 천줄이 되면 굉장히 가독성이 떨어진다.

css파일 하나에 저걸 다 박아둔다 굉장히 비효율적이고 또한 그렇다고 막 나눈다고 쳐도 양이 방대해서 하나하나 연결할 파일을 만들거나 아예 분리가 잘 안된 상태에서 js 코드 안에 넣어버리면 가독성 또한 저하된다.

​

<div className="flex flex-col gap-3 p-4 border rounded-xl bg-white">
  <h2 className="text-lg font-semibold">Zustand 소개</h2>
  <p className="text-sm text-gray-500">
    전역 상태 관리를 단순하게 해주는 라이브러리
  </p>
  <button className="self-start px-3 py-2 rounded-lg bg-blue-600 text-white">
    자세히 보기
  </button>
</div>

그에 반면 Tailwind는 이렇게 내가 수정하고 싶은 위치에 뭐 버튼을 바꾸고 싶다 그냥 짧게 적으면 된다.

그냥 뭐 선언하고 싶은 곳에 선언하면 된다 이 말씀

그리고 또한 굳이 순수css와 다르게 클래스 이름을 일일히 고민할 필요도 없고

작업 면에서는 굉장히 빠르고 수월해진다.

그냥 바로 설계 구현 수정 이 모든게 내가 지정한 곳에서 한번에 스르륵 해결된다는거다.

​

순수css가 나쁘다는건 아니다 그저 코드가 늘어나면 늘어날 수록 가독성 또한 저하되고 유지보수 또한 비용이 상승할 것이다.

반면 무조건 Tailwind또한 맞다는 건 아니다.

이 친구도 클래스가 길어질 수 있고 처음에는 따로 script로 분리하는게 아니다 보니 html이 지저분해 보일 수 있다.

하지만 컴포넌트 분리를 통해서 충분히 해결하며 이점이 더 크다 볼 수 있다.

​