Tailwind CSS
사용자이자 개발자가 앱을 더 빠르고 쉽게 만들 수 있도록 설계된 유틸리티 우선 프레임 워크.
m-1, flex와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로, HTML 코드 내에서 스타일링을 할 수 있다.
/* 예시 코드 */
<button class="py-2 px-4 rounded-lg shadow-md text-white bg-blue-500">
Click me
</button>😋 장점
1. CSS를 덜 작성한다.
HTML에 직접 클래스에 적용하여 요소의 스타일을 지정할 수 있어, CSS를 따로 작성하지 않고도 사용자 정의 디자인을 작성할 수 있다.
2. CSS 파일을 최소로 유지한다.
CSS-in-JS의 경우 컴포넌트 파일마다 CSS 파일 생성이 뒤따르지만, Tailwind는 HTML의 클래스에서 스타일을 지정할 수 있기 때문에 프로젝트에 최소한의 CSS 파일을 남길 수 있다.
3. 클래스 이름 고민의 최소화
특히 styled-components를 사용할 때마다, 해당 컴포넌트의 이름을 고민하는 데 꽤나 많은 시간이 걸렸다. Tailwind를 사용한다면 이름을 붙여줄 필요가 없이 바로 태그에 스타일 지정이 가능하기 때문에, 클래스 이름을 정하기 위해 고민할 필요가 없다!
4. 반응형
Tailwind는 기본적으로 모바일 우선 접근 방식을 사용하는데, 유틸리티 클래스를 사용할 수 있어 복잡한 반응형 레이아웃을 더 쉽게 자유롭게 구축할 수 있다는 장점이 있다.
5. 커스터마이징
Tailwind는 러닝커브가 있는 문법을 가지고 있지만, 그럼에도 불구하고 플러그인을 사용해서 CSS 대신 JS를 사용해 사용자만의 스타일 등록이 가능하다. 덕분에 디자인 시스템이나 다크 모드의 구현도 가능!
😕 단점
1. 러닝 커브
Tailwind 작성 시, 기존 css 문법과 다른 Tailwind만의 문법으로 작성해야 하기 때문에 초기 적응에 시간이 걸림!
2. 동적 렌더링 시, 문자열 일부 변경이 어렵다.
조건에 따라 문자열 전체 변경하는 것만 가능하다.
/* ${} 안에 변수를 넣어서 일부 변경이 어렵다는 뜻 */
className={`py-2 px-8 text-white font-bold border-none rounded-md leading-4 ${
red ? "bg-red-500" : "bg-sky-500"
} ${disabled && "brightness-75"}`}3. 코드의 가독성 저하
파일에 적용할 css를 따로 css 파일로 작성한 후 import하는 방법과 달리, 태그에 직접 적용하는 Tailwind는 코드의 가독성을 저하시킬 수 있다.
🤔 첨언
나는 지금껏 리액트 프로젝트를 하며 styled-components만 사용해왔다. 다른 CSS 적용 방식을 왜 제대로 찾아볼 생각을 못 했을까?
이번 Next.js 프로젝트를 하며 Tailwind에 대해 제대로 알아보고 열심히 사용해봐야겠다.
Tailwind의 twMerge❓
Last Conflicting Class Wins ✨
맨 마지막에 적용시킨 클래스가 적용된다는 뜻!
import { twMerge } from 'tailwind-merge'
const className = twMerge('p-2 p-3 p-4')
return <div className={className}>안녕하세요</div>tailwind와 twmerge가 모두 설치되어있어야 하는 건 당연!
위와 같이 작성할 경우 div 태그에는 어떤 게 적용될까?
➡️ 가장 마지막에 적용된 p-4가 적용된다.
