[CSS] Tailwind활용 팁

insung·2025년 4월 17일

CSS intellisense tailwind

CSS

목록 보기

7/14

학습자료 : https://youtu.be/H27N2PgtjUM?si=3tYjHj0C6V9LwWG0

Tailwind CSS는 미리 정의된 유틸리티 클래스를 활용하여 빠르고 효율적으로 스타일링할 수 있도록 도와주는 강력한 도구.

하지만 때로는 Tailwind가 제공하지 않는 스타일이나 동적인 스타일링이 필요할 때가 있음.

Tailwind CSS의 유연성을 극대화하는 몇 가지 팁을 정리해보았음

1. Arbitrary Values (자유로운 값 사용)

Tailwind CSS는 w-12, w-48과 같이 미리 정의된 width 유틸리티 클래스를 제공.
하지만 원하는 정확한 값이 없을 때는 대괄호 [] 안에 직접 값을 입력하여 사용할 수 있음.

// width, height
<div className="w-[10rem]"></div>
<div className="h-[250px]"></div>

// bg image
<div className="bg-[url('./assets/react.svg')]"></div>

// custom color:
<div className="bg-[rgb(31,120,50)]"></div>

지원하지 않는 CSS 속성 직접 사용
- Tailwind CSS에서 기본적으로 제공하지 않는 CSS 속성도 []를 사용하여 직접 적용할 수 있음.
- 예를 들어 border-image 속성은 기본적으로 지원하지 않지만 다음과 같이 사용할 수 있음.
  - 주의: 띄어쓰기는 하면 안됨.

<div className="[border-image:url('./assets/border.svg')_30_stretch]"></div>

2. Conditional Styling (조건부 스타일링)

UI 개발 시 특정 조건에 따라 스타일을 변경해야 하는 경우가 많음.
Tailwind CSS에서는 다음과 같은 방법을 통해 조건부 스타일링을 효율적으로 처리할 수 있음.

2.1. clsx

clsx는 여러 개의 클래스 이름을 조건부로 결합하는 유틸리티 함수.
조건에 따라 클래스를 추가하거나 제거하는 데 유용.

import clsx from 'clsx';

function MyComponent({ isActive }) {
  return (
    <div className={clsx('py-2 px-4 rounded', { 'bg-blue-500 text-white': isActive, 'bg-gray-200 text-gray-700': !isActive })}>
      {isActive ? '활성화됨' : '비활성화됨'}
    </div>
  );
}

2.2. twMerge

twMerge는 Tailwind CSS 클래스 이름들을 병합하고 충돌하는 스타일을 올바르게 처리하는 유틸리티 함수.
특히 clsx와 함께 사용하면 조건부 스타일링 시 클래스 충돌 문제를 방지하고 가독성을 높일 수 있음

import { twMerge } from 'tailwind-merge';
import clsx from 'clsx';

function MyComponent({ isLarge }) {
  return (
    <button className={twMerge('py-2 px-4 rounded bg-indigo-500 text-white font-semibold', isLarge && 'py-3 px-6 text-lg')}>
      {isLarge ? '큰 버튼' : '작은 버튼'}
    </button>
  );
}

function AnotherComponent({ isActive }) {
  return (
    <div className={twMerge('py-2 px-4 rounded', clsx({ 'bg-blue-500 text-white': isActive, 'bg-gray-200 text-gray-700': !isActive }))}>
      {isActive ? '활성화됨' : '비활성화됨'}
    </div>
  );
}

clsx vs twMerge 비교:

clsx

여러 클래스 이름을 조건부로 조합하는 데 초점.
Tailwind CSS 클래스뿐만 아니라 일반적인 문자열 클래스에도 사용 가능.

twMerge

Tailwind CSS 클래스 이름들을 병합하고 충돌을 해결하는 데 초점.
조건부 스타일링 결과로 생성된 Tailwind 클래스들의 우선순위를 관리하는 데 유용.
일반적으로 clsx로 조건부 클래스를 생성하고, 최종적으로 twMerge를 사용하여 Tailwind 클래스들의 충돌을 방지하는 방식으로 함께 사용하는 것이 좋음.

3. Tailwind Validity 및 Intellisense (유효성 검사 및 자동 완성)

Tailwind CSS를 사용하는 주요 장점 중 하나는 IDE 확장을 통해 유효성 검사와 자동 완성 (Intellisense) 기능을 활용할 수 있다는 점.
이를 통해 오타를 방지하고 사용 가능한 Tailwind 클래스를 쉽게 탐색하여 생산성을 크게 향상시킬 수 있음
Tailwind CSS IntelliSense 익스텐션을 설치하여 활용할 수 있음.

4. CSS Variables and Arbitrary Calcs (CSS 변수 및 자유로운 계산)

Tailwind CSS는 CSS 변수(Custom Properties)와 calc() 함수를 활용하여 더욱 동적이고 유연한 스타일링을 지원

4.1. CSS Variables

부모 컨테이너에 CSS 변수를 정의하고, 자식 요소에서 var() 함수를 사용하여 해당 변수를 참조할 수 있음.
이를 통해 컴포넌트 간의 스타일 일관성을 유지하고, 반응형 디자인에도 유용하게 활용할 수 있음

<div className="[--container-gap:15px] sm:[--container-gap:15px] md:[--container-gap:20px] lg:[--container-gap:30px] space-x-[var(--container-gap)]">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

위 예시에서 --container-gap이라는 CSS 변수를 정의하고, 화면 크기에 따라 다른 값을 적용
자식 요소에서는 space-x-[var(--container-gap)]를 사용하여 간격을 동적으로 조절.

4.2. Dynamic Calculations (calc())

calc() 함수를 사용하면 CSS 속성 값에 대한 동적인 계산이 가능.
Tailwind CSS 클래스 내에서도 []와 함께 calc()를 활용하여 복잡한 레이아웃이나 크기 조정을 처리할 수 있음

<div className="[--header-height:6rem] [--sidebar-width:12rem] flex">
  <header className="h-[var(--header-height)] w-full bg-gray-100"></header>
  <aside className="w-[var(--sidebar-width)] bg-gray-200"></aside>
  <main className="flex-1 ml-[var(--sidebar-width)] mt-[var(--header-height)] p-4"></main>
</div>