[CSS][Tailwind] Tailwindcss에서 theme 사용하기

Tailwindcss의 theme은 사용자가 직접 색상, 글꼴, 크기 등을 지정하여 변수처럼 사용할 수 있게 하는 기능입니다.

 

이렇게 정의된 변수를 theme variable이라고 합니다.

 

Theme은 기본적으로 css 파일(보통 최상단인 index.css에 작성합니다)에서 다음과 같이 선언함으로서 사용할 수 있습니다.

@theme {
    --[분류]-[variable 이름]: [variable 값];
}

 

분류에는 색상, 글꼴 등 스타일의 종류가 들어가며, 이름은 자유롭게 설정이 가능합니다.

 

예를 들어 다음과 같이 설정할 수 있습니다.

@theme {
    --color-main:  #3a4578;               // 색상 : main = #3a4578
    --text-size-title: 7.5rem;            // 크기 : size-title = 7.5rem
    --font-poppins: Poppins, sans-serif;  // 글꼴 : poppins = Poppins, sans-serif
}

이렇게 variable을 설정하면, tailwindcss에서 기본적으로 제공되는 프리셋처럼 사용할 수 있습니다.

<h1 class="bg-main text-size-title font-poppins">This headline will use Poppins.</h1>