소스 파일에서 클래스 감지하기

개요

Tailwind는 프로젝트 내의 유틸리티 클래스를 스캔한 후, 실제로 사용한 클래스들에 기반해 필요한 모든 CSS를 생성하는 방식으로 동작합니다.

이 방식을 통해 CSS 파일 크기를 최소화할 수 있으며, 임의 값 사용과 같은 기능도 가능해집니다.

클래스가 어떻게 감지되는지

Tailwind는 여러분의 소스 파일을 모두 일반 텍스트로 취급하며, 파일을 코드로 파싱하려고 시도하지 않습니다.

대신 Tailwind는 파일 내에서 클래스 이름으로 예상되는 문자를 기반으로 클래스일 가능성이 있는 토큰을 찾습니다:

export function Button({ color, children }) {  const colors = {    black: "bg-black text-white",    blue: "bg-blue-500 text-white",    white: "bg-white text-black",  };  return (    <button className={`${colors[color]} rounded-full px-2 py-1.5 font-sans text-sm/6 font-medium shadow`}>      {children}    </button>  );}

그런 다음 Tailwind는 이러한 모든 토큰에 대해 CSS를 생성하려고 시도하며, 프레임워크가 알고 있는 유틸리티 클래스에 매핑되지 않는 토큰은 버립니다.

동적 클래스 이름

Tailwind는 소스 파일을 일반 텍스트로 스캔하기 때문에, 여러분이 사용하는 프로그래밍 언어에서 문자열을 연결하거나 보간하는 방식을 이해할 수 없습니다.

<div class="text-{{ error ? 'red' : 'green' }}-600"></div>

위 예제에서 text-red-600과 text-green-600 문자열은 존재하지 않기 때문에, Tailwind는 해당 클래스를 생성하지 않습니다.

대신, 사용하는 클래스 이름이 완전히 존재하는지 확인하세요:

<div class="{{ error ? 'text-red-600' : 'text-green-600' }}"></div>

React나 Vue와 같은 컴포넌트 라이브러리를 사용한다면, props를 사용해 클래스를 동적으로 생성하지 마세요:

function Button({ color, children }) {  return <button className={`bg-${color}-600 hover:bg-${color}-500 ...`}>{children}</button>;}

대신, props를 빌드 타임에 정적으로 감지할 수 있는 완전한 클래스 이름에 매핑하세요:

function Button({ color, children }) {  const colorVariants = {    blue: "bg-blue-600 hover:bg-blue-500",    red: "bg-red-600 hover:bg-red-500",  };  return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

이 방식은 예를 들어, 다른 props 값을 다른 색상 음영에 매핑할 수 있는 추가적인 이점을 제공합니다:

function Button({ color, children }) {  const colorVariants = {    blue: "bg-blue-600 hover:bg-blue-500 text-white",    red: "bg-red-500 hover:bg-red-400 text-white",    yellow: "bg-yellow-300 hover:bg-yellow-400 text-black",  };  return <button className={`${colorVariants[color]} ...`}>{children}</button>;}

코드에서 항상 완전한 클래스 이름을 사용한다면, Tailwind는 매번 모든 CSS를 완벽하게 생성할 것입니다.

어떤 파일들이 스캔되나요

Tailwind는 프로젝트 내 모든 파일을 클래스 이름을 찾기 위해 스캔합니다. 단, 다음과 같은 경우는 제외됩니다:

• .gitignore 파일에 포함된 파일
• 이미지, 동영상, zip 파일 같은 바이너리 파일
• CSS 파일
• 일반적인 패키지 관리자 lock 파일

Tailwind가 기본적으로 무시하는 파일을 스캔해야 한다면, 명시적으로 소스를 등록할 수 있습니다.

소스 경로 명시적으로 등록하기

Tailwind가 기본적으로 무시하는 소스 경로를 명시적으로 등록하려면 @source를 사용하세요:

@import "tailwindcss";@source "../node_modules/@acmecorp/ui-lib";

이 방법은 Tailwind로 빌드된 외부 라이브러리를 스캔해야 할 때 특히 유용합니다. 일반적으로 의존성은 .gitignore 파일에 나열되어 Tailwind가 무시하기 때문입니다.

기본 경로 설정하기

Tailwind는 기본적으로 클래스 이름을 검색할 때 현재 작업 디렉토리를 시작점으로 사용합니다.

소스 탐지를 위한 기본 경로를 명시적으로 설정하려면, CSS에서 Tailwind를 임포트할 때 source() 함수를 사용하세요:

@import "tailwindcss" source("../src");

이 방법은 모노레포에서 작업할 때 유용합니다. 모노레포의 루트에서 빌드 명령을 실행하는 경우, 각 프로젝트의 루트가 아닌 모노레포의 루트를 기준으로 경로를 설정할 수 있습니다.

자동 감지 비활성화

모든 소스를 명시적으로 등록하고 싶다면 source(none)을 사용해 자동 소스 감지를 완전히 비활성화할 수 있습니다:

@import "tailwindcss" source(none);@source "../admin";@source "../shared";

이 방법은 여러 개의 Tailwind 스타일시트가 있는 프로젝트에서 유용합니다. 각 스타일시트가 필요한 클래스만 포함하도록 보장할 수 있습니다.