TIL 2022-09-04 TailwindCSS Svelte

Svelte 프로젝트에 Tailwind CSS를 적용하기로 하였다.

 

가장 큰 이유는 Svelte의 inline style에서의 하위 컴포넌트로의 상속이 안되는데, Tailwind에서는 classname만 넘겨주면 알아서 style를 적용해주기 때문...

 

뭐 Tailwind 식 스타일링의 장점이라고 하면

 

- 클래스 이름을 의미있게 지을 필요 없음

- HTML, CSS 오갈 필요 없음

- 빠르게 쓸수 있음

등이 있겠지만....

 

물론 클래스네임 시맨틱하게 적는게 상당히 머리 아픈 일이긴 한데,

최근에 많이 사용하고 있는 css module 같은 경우에는 모듈 단위로 나누면 되니 그렇게까지 긴 클래스 네임을 가지는 일은 드문거 같다.

 

HTML CSS가 한번에 붙어있는것은 솔직히 양날의 검인데, 한눈에 볼수 있다는 것은 장점이지만 반면에 스타일, 그리고 HTML 구조에 대한 관심사가 분리가 덜 되었다고 볼수도 있을 것이다.

물론 최근에 그렇게 복잡한 HTML 구성을 한눈에 볼 일은 없어서 하나로 퉁치는게 더 나을수도 있겠지만...  Javascript 로직이 들어가서 분기를 탄다던지, 반복문을 돌린다던지, 로직이 복잡해지는 경우에는 가독성이 발목을 잡을수도 있을거 같다.

 

확실히 Tailwind에 적응이 되어있으면 적는데 빠르긴 빠르다. 위 클래스네임 시맨틱할 필요 없음, HTML CSS 오갈 필요 없음. 위 두 장점 덕분에 훨씬 빠르게 작성할수 있다. 다만 Tailwind 고유의 문법을 벗어나야 하는 일이 생기는 순간 좀 애매하긴 하다.

 

당장 width만 하더라도 100 이상의 px을 사용하려면 arbitrary value를 사용하거나, tailwind config의 extend 기능을 사용해줘야하는데, arbitrary value를 사용하기 시작하면 점점 안 이뻐지는 느낌이고, extend를 사용하기엔 너무 많은 기능들을 사전에 extend해줘야한다.

 

extend 량이 늘어날수록 build 시간이나 HMR이 느려지지 않을까? (확인해보면 좋을거 같음)

 

// tailwind.config.js
const px0_10 = { ...Array.from(Array(11)).map((_, i) => `${i}px`) };
const px0_100 = { ...Array.from(Array(101)).map((_, i) => `${i}px`) };
const px0_200 = { ...Array.from(Array(201)).map((_, i) => `${i}px`) };

module.exports = {
  theme: {
    extend: {
      borderWidth: px0_10,
      fontSize: px0_100,
      lineHeight: px0_100,
      minWidth: px0_200,
      minHeight: px0_200,
      spacing: px0_200,
      ...
    }
  }
}

출처: https://fe-developers.kakaoent.com/2022/220303-tailwind-tips/

 

약간 불편한 점은 추가로 기본값들이 rem으로 지정되어있는데, 만약 디자인팀이랑 소통할떄 머리 아플거 같음...