TailwindCSS 적용기
그간 블로그에 CSS에 대해 따로 적거나 다룬경험이 적고, 이를 표현하는데 부족함을 느껴 따로 기록해두려 작성하려한다.
나는 주로 스타일링 적용하는 부분중에 tailwind를 자주 채용하였고, 지금도 애용하는 프레임워크다.
회사에서 Stack을 선정하는 과정을 거치며, 라이브러리들에 대해 조사하였는데,
이전 소스코드에는 CSS가 어디서 적용되고, 찾아가는 부분에 대해 굉장히 어렵고 난잡한 상황이었다.
이를 직관적으로 찾고 수정할 수 있는 프레임워크를 찾다 Tailwind의 가장 큰 특징인 tag in css에 매료되어 이를 선정하였고, 같이 개발하는 동료와 수긍하여 적용했었다.
Tailwind는 Bootstrap처럼 컴포넌트를 제공하는 방식이 아니라,
원자적(atomic) 클래스들을 조합해서 직접 UI를 구성하는 방식이다.
왜 Tailwind를 썼는가?
<!-- Tailwind 예시 -->
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
버튼
</button>위는 Tailwind 작성 방식이다. 기존 CSS와 다른건 CSS를 직접 작성하는 방식이 아닌 tag안에 class를 선언해주는 tag in 방식으로 독특한 방식인데,
내가 사용하면서 주관적으로 편리하다 느낀건 스타일이 어떤게 적용되고 있는지, 기존에 CSS파일을 찾는 방식과 달리 직관적으로 확인 할 수 있었고, 빠른 스타일 적용이 가능해서 생산성이 좋았다고 느꼈다.
다음은 실제 적용했던 스타일 방식이었다.
// tailwind.config.js
plugins: [
function ({ addComponents }) {
addComponents({
'.nc-diag-btn-custom': {
width: 'theme(spacing.btn-width)',
height: 'theme(spacing.btn-height)',
// marginTop: 'theme(spacing.btn-mt)',
// marginRight: 'theme(spacing.btn-mr)',
// marginBottom: 'theme(spacing.btn-mb)',
// marginLeft: 'theme(spacing.btn-ml)',
borderRadius: '8px', // 버튼 테두리 둥글기
backgroundColor: 'theme(colors.btn-bg)',
// display: 'flex', // 버튼을 flex 컨테이너로 설정
// alignItems: 'center', // 세로 정렬
// justifyContent: 'center', // 가로 정렬
},
// jsx
<button className="nc-diag-btn-custom">
Button
</button>다음과 같이 설정 파일에서 컴포넌트화 시켜, 만약 스타일이 많아지고 길어지거나 반복되는 경우에 묶어주고 이를 적용할 수 있었다.
단점은 다음과같이 컴포넌트화 시키지 않는다면, 클래스가 많아질수록 복잡해질 염려가 있어서, 스타일을 다량으로 적용하게 되거나 추후 디자인시스템을 적용할때, 스타일을 전달 받을때 작업해야 될게 굉장히 많았고, 만약 다른 컴포넌트 라이브러리를 사용할때 충돌하거나 tailwind를 적용하는데 어려움을 겪었다. 내가 적용했던 회사 프로젝트에선 커버가 가능했지만 스타일이 많거나 복잡해 지는 경우에는 다시한번 고려해봐야 하는 경우도 생긴다.
