2023.05.31(Wed.) tailwindcss를 알아보자

이제 없이 코딩하라고 하면 마치 왼손만 쓰면서 밥을 먹는것 같은 느낌이 듭니다. 그만큼 강합니다.

1. tailwind css?

• https://tailwindcss.com/
• 기가 막힌 css-in-js를 가능하게 하는 라이브러리이다.
• bootstrap과 비슷하게 미리 정해진 속성을 className안에 부여해서 css파일을 따로 두지 않아도 인라인으로 코드를 짤 수 있다.
• 일반적인 css와 쓰는 방법이 조금 다르지만, 빠르게 적응할 수 있고 다양한 설정도 가능해 매우 편하다. 

	.container {
		height: 16px;
        width: 16px;
        border: 1px solid;
        border-radius: 16px
	}

• css로 작성하면 이렇게 되지만,

<div className='w-4 h-4 border-1 rounded-2xl'/>

• tailwind는 이렇게 한 줄이 끝이다.

2. 장점 (feat. 왜 나는 환장하는가?)

• tsx파일과 css파일을 오고 가고 할 필요 없이 한 번에 적어서 시간절약에 탁월하다.

export const box = `flex flex-col items-center w-6 h-6 border-1 border-white bg-red-200`

<div>
	<span className={box}>안녕</span>
    <span className={box}>잘가</span>
</div>

• className을 고민하지 않아도 된다. 반복해서 사용해야 하는 스타일 일 경우 string으로 스타일 자체를 설정해서 여기저기 파일에서 import 해서 사용할 수 도 있다. 위의 코드처럼 사용하며, 추가로 다른 스타일을 넣어 줄 수도 있다.
• 자체 스타일 가이드를 제공하여 동일한 사이즈와 컬러로 통일시켜서 디자인 할 수 있다.

3. 단점

• 가독성이 나쁘다.
  • 스타일 자체를 변수로 잘 선언해서 재사용한다면 어느정도 커버가 가능하다.
  • config 파일을 고쳐서 일정한 커스텀한 스타일을 추가로 넣어줄 수도 있다. ex) text-14 text-white => text(14 white)
• 어디에 어떤 속성을 넣었는지 혹은, 관심사 분리가 떨어져 유지보수가 곤란한 경우가 생긴다.
  • 작업자들 간의 사용을 문서화하고, 잘 협의한다면 크게 문제가 되지 않는다. (사실 config 파일을 잘 살펴보면 모두 일정한 규칙이 있을 것이므로 크게 어렵진 않다. 그리고 디자이너와 협업하는 경우라면 스타일 가이드를 만들어 주기 때문에 그 스타일 대로 공용 컴포넌트 등을 작업해 놓으면 통일시켜서 사용할 수 있다)

4. 한발짝 더 나가기 (feat. twind)

tailwind + emotion + styled componets, 진국의 짬뽕탕

• https://twind.dev/
• tailwind처럼 css-in-js와 컴포넌트화 및 추가 스타일 설정등 거의 무적의 css 라이브러리 끝판왕이다.
• 이미 이전에 tailwind와 emotion을 사용한 적이 있는 나의 경우 러닝 커브는 없었다. 다양한 라이브러리를 알 고 있으면 알고 있을수록 유리하다.

import { tw, css, apply } from '@/twind';

const tempBox = apply`w-4 h-4 border-1 border-white bg-red-100`;

const App = () => {
	return (
    	<>
			<div className={tw`w-4 h-4 border-1 border-white bg-red-100`}>하이?</div>
            <div className={tw(tempBox)}>하이?</div>
            <div className={tw(tempBox, css`
            	${apply`w-10`}
                posision: absolute;
                top: 0;
                left: 50%;
            `)}>반가워</div>
        </>
    )
}

• 위와 같이 혼용해서 사용가능하다. 가독성 및 재사용이 개선될 수 있다.