tailwind-css 사용해보기

YunShin·2024년 3월 16일

사용해보기

목록 보기

1/1

🚩 들어가면서..

스타일 라이브러리라곤 styled-components 밖에 몰랐었지만, 이번 주에 tailwind-css 를 처음으로 사용해봤습니다. 사실 emotion 이라는 라이브러리도 사용해봤는데, styled-components 와 사용 형식이 비슷하고 같은 css-in-js 방식이라고 하니 딱히 큰 감흥은 없었어요...😬

nextjs 에서도 웬만하면 tailwind 사용을 권장한다고 하니, 이번에 경험했던 것을 바탕으로 앞으로 조금씩 익숙해져 보겠습니다.!🫡

⚒️ 설치 및 사용법

[환경]

핵심 라이브러리: React

언어: TypeScript

패키지관리: Yarn

빌드 도구: Vite

⚒️ 설치

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

autoprefixer 는 vender-prefix 를 일일히 명시하지 않아도 자동으로 붙혀주는 라이브러리 입니다.
postcss 의 플러그인 형태로 동작하기 때문에 함께 import 했습니다.

* [참고]
vender-prefix 는 브라우저 별로 지원하는 css 동작이 다르기 때문에 동일한 스타일을 적용하기 위해 명시해주는 접두사 입니다:) 아래는 그 예시입니다.
* {
	-webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
	-ms-transition: all 4s ease;
	-o-transition: all 4s ease;
}

⛺️ 초기화

npx tailwind init -p

위의 명령어 실행 시, tailwind 설정파일 자동으로 생성됩니다.

//tailwind.config.ts

/** @type {import('tailwindcss').Config} */
export default {
	content: [],
	theme: {
		extend: {
		},
	},
	plugins: [],
}

content 속성에는 유틸리티에 접근할 수 있는 파일을 지정할 수 있습니다. 😑 리엑트로 해당 실습을 진행했던 저는 src 하위의 모든 .js, .jsx, .ts, .tsx 파일을 설정했습니다.
theme 속성에 객체형태로 디자인 토큰을 등록할 수 있습니다. extend 로 한번 더 감쌀 경우, 등록한 디자인 토큰 이외에 tailwind 에서 설정해놓은 유틸리티 클래스에 접근할 수 있습니다. 👍

design-token

tailwind.config.ts

🍎 적용

src 하위에 index.css 파일을 두고, 다음과 같은 tailwind-css 지시어를 작성했습니다. 지시어는 각 스타일을 활성화/커스텀하는 데에 사용됩니다.

저는 프로젝트 전반에 사용할 기본 스타일 layer 를 추가했습니다.

index.css

이제 main.tsx 에 해당 css 파일을 import 하면 해당 프로젝트에서 tailwind-css 를 사용할 수 있습니다.

👍 좋았던 점

styled-components 를 사용할 때보다, 전체적인 설정이 간소화 되었다고 느꼈어요. 예를들어 ThemeProvider 설정을 별도로 하지 않아도 쉽게 디자인 토큰 값에 바로 접근(자동완성!!) 을 할 수 있습니다.
또한 스토리북에 컴포넌트를 인벤토리화 함에 있어 추가적인 plugin 을 추가할 필요없이, .storybook > preview.ts 에 css 파일 하나만 불러오면 react 실행 시 보여지는 디자인과 동일하게 확인할 수 있어서 좋았어요. 👍

😓 힘들었던 점

제일 별로였던 건, 세팅된 유틸리티 클래스명을 잘 몰라 계속 찾아봐야한다는거 였습니다. 텍스트 색상을 변경하는 간단한 것조차, color: #000 를 머리에 품으며 손으로는 text-black 을 써야하는게 참 곤혹스러웠습니다;;😅. (다른 사람들도 이런 부분에서 발생하는 러닝커브를 단점으로 말씀하시더라구요.)

🥅 마치며..

styled-components 와 같이 css-in-js 의 경우, 번들에 스타일을 정의하는 코드 + 해당 라이브러리의 코드가 포함되어야, 스타일 코드 해석 후 document의 style 태그를 추가하는 등의 과정이 일어날 수 있다고 합니다. 즉, 번들 용량과 최초 페이지 랜더링 시간이 모두 증가하는 단점이 있죠..
server-side-rendering 을 지원하는 라이브러리(nextjs) 에서는 특히나 이런 문제가 크리티컬💥 한가 봅니다..

tailwind-css 는 미리 정의된 스타일 구성 요소를 가져와서 사용하고, 빌드 시에 사용하지 않는 클래스는 제거됨으로 위에서 제기된 문제를 효과적으로 줄일 수 있다고 합니다. 앞으로 tailwind 의존성을 높혀보겠습니다..

참고 및 기타

YunShin

😎👍