[Tailwind] @tailwind와 @layer를 사용한 Tailwind 기본 세팅

Tailwind CSS란?

Tailwind CSS는 클래스 기반으로 스타일링할 수 있는 CSS 프레임워크이다. 우리가 기존에 CSS를 줄 때 클래스 이름에 대한 스타일을 먼저 CSS 파일 안에 만들어두고, 그다음 클래스 이름을 HTML 요소에 추가하는 방식이었다면,

Tailwind CSS는 바로 HTML 요소에 클래스 이름(text-3xl font-bold...)으로 직접 스타일링을 하는 방식이다.

 

굳이 CSS 파일을 따로 만들지 않고 직접 요소에 줄 수 있다는 점과 클래스 이름을 고민하지 않아도 된다는 점에서 개인적으로 선호하는 스타일링 방식이기도 하다.

 

@tailwind로 Tailwind 불러오기

@tailwind base;
@tailwind components;
@tailwind utilities;

tailwind CSS를 사용하려면, 먼저 tailwind 속성들을 불러와줘야 한다. base는 기본 reset이라고 생각하면 되고, components는 버튼과 같은 컴포넌트 요소들, utilities는 클래스 이름으로 스타일링을 하기 위해 기본적으로 제공되는 클래스라고 생각하면 된다. 이것들을 모두 불러와야 비로소 tailwind CSS를 사용할 수 있는 준비가 된 것이다.

 

한마디로 @tailwind는 import 역할을 한다고 생각하면 된다. 만약, Tailwind에서 기본적으로 제공하는 base, components, utilities가 마음에 들지 않으면 어떻게 해야 할까?

 

@layer로 새로운 스타일 추가하기

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 기본 HTML 요소의 스타일을 수정하고 싶을 때 */
@layer base {
    h1 {
        font-size: 30px;
    }
}

/* 컴포넌트 클래스를 수정, 추가하고 싶을 때 */
@layer components {
    .btn-red-round {
        background: red;
        border-radius: 20px;
    }
}

/* 기존 유틸리티 클래스를 수정, 추가하고 싶을 때 */
@layer utilities {
    .text-2xl {
        font-size: 40px;
    }
}

@layer를 이용해서 기존에 @tailwind로 불러온 기본 스타일을 수정 혹은 새롭게 추가할 수 있다.

@layer base {...}에서는 HTML 태그의 기본 스타일을 수정할 수 있고, @layer components {...}에서는 기존 컴포넌트의 스타일 수정 및 새로운 컴포넌트 클래스를 추가할 수 있으며, @layer utilities {...}에는 tailwind에서 제공하는 기본 유틸리티 클래스들을 수정할 수 있게 해 준다.

@layer components {
    .primary-button {
        @apply text-white p-10 bg-red-500 rounded-md;
    }
}

@apply를 사용하면 tailwind의 유틸리티 클래스를 새로운 클래스 안에서 스타일로써 사용할 수 있다. 

 

Tailwind에서 기본적으로 제공하는 클래스 및 스타일만 사용하면, 중복되는 스타일의 요소가 있을 때 매번 유틸리티 클래스 이름들을 모두 적어야 해서 번거로운 경우가 생길 수 있다. 이때, @layer를 이용해서 컴포넌트 클래스를 만들어서 사용하면 더욱더 효율적으로 tailwind CSS를 사용할 수 있을 것이다.

 

1. @tailwind를 이용해서 tailwind CSS를 import 해줘야 tailwind CSS를 사용할 수 있다.
2. 기본으로 불러온 스타일이 마음에 들지 않거나, 새롭게 추가하고 싶다면 @layer를 이용해서 추가하면 된다.
3. 이때, @apply를 사용하면 유틸리티 클래스를 클래스 안에서도 사용할 수 있다.