base, utility, component, layer

tailwind에서 제공하는 스타일은 base, utility, component 3가지의 유형으로 나뉜다.

@base

base 클래스는 기본 html 요소에 대한 css 속성을 정의한다. 예를 들어 모든 span 요소의 글자 크기를 정하고 싶은 경우,

span {
    @apply text-3xl font-bold;
}

처럼 사용이 가능하다.

@utilities

utility 키워드는 특정 스타일 속성을 클래스로 정의한 것을 의미한다.

<div className='flex flex-col items-center'>hi</div>

div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

하나는 tailwind를 사용해 inline으로 css를 적용한 것이고, 아래는 같은 스타일을 기본 css를 사용해서 적용한 것이다.

flex-direction: column 을 flex-col 클래스로 사용하는 것들이 바로 utility 클래스 들이다. 기본적으로 tailwind 를 사용하여 css를 적용하게 될 경우, 대부분의 클래스가 바로 utility 클래스에 해당한다.

@components

component 클래스는 재사용가능한 컴포넌트 ui를 정의하는 클래스이다. tailwind는 inline으로 css 를 작성해야 하기 때문에 많은 css 가 들어가게 되면 필연적으로 html이 길어질수 밖에 없다. 따라서 반복적으로 사용되는 component에 대해 클래스를 적용해 가독성과 재사용성을 높일수 있다.

@layer components{
    .custom-button {
        @apply p-3 rounded-lg bg-red-300 hover:bg-red-500 cursor-pointer text-center;
    }
}

@layer

위 2개의 클래스를 사용해도 기본적으로 inline 으로 css를 적용하기 때문에 html이 길어져 가독성이 떨어질수밖에 없다.

이럴때 사용가능한것이 바로 layer 키워드인데, 이 키워드를 통해 특정 클래스에 커스텀 css 를 지정하는것이 가능하다.

@layer utilities {
    .sort-vertical-flex {
        @apply flex flex-col items-center
    }
    .sort-row-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
    }
}
@layer components {
    .custom-button {
        @apply p-3 rounded-lg bg-red-300 hover:bg-red-500 cursor-pointer text-center;
    }
}
@layer base {
    html {
        font-family: 'sans-serif;
        font-size: 20px;
        font-weight: 100;
        color: #2e2e2e;
    }
}

@layer utilities를 보면 flex 를 이용해 정렬하는 css를 하나의 클래스로 묶어 사용할수 있도록 한다.

여기서 사용된 @apply 키워드는 tailwind 클래스를 사용하여 커스텀 css를 정의할수 있도록 해주며, 해당 키워드를 사용하지 않고 기본 css만 사용해서 정의할수도 있다.

추가적으로 layer 키워드는 tailwind의 base, utility, component 클래스에만 사용이 가능하다.