tailwindcss 중복 클래스 줄이기 (@layer, @apply)

tailwindcss의 가장 큰 문제점은 스타일이 많이 들어가면, 태그에 클래스 이름이 너무나도 길어진다는 점이다.

이를 해소하기 위해서 여러 방법을 사용할 수 있겠지만, 여기서는 @layer와 @apply를 사용하여 중복 클래스를 글로벌하게 사용하는 법에 대해서 다룬다.

 

tailwindcss를 설정하고 나서 기본적인 globals.css의 내용은 다음과 같을 것이다.

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

/* reset css https://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

tailwindcss는 기본적으로 최상단의 @tailwind base, components, utilities를 통해 세 종류로 나뉜 스타일을 CSS에 삽입하게 된다.

여기에 @layer와 @apply를 사용하여 추가적으로 커스텀 클래스를 지정할 수 있다.

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

@layer base {
    /* reset css https://meyerweb.com/eric/tools/css/reset/ */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
        display: block;
    }
    body {
        line-height: 1;
    }
    ol, ul {
        list-style: none;
    }
    blockquote, q {
        quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }
    table {
        border-collapse: collapse;
        border-spacing: 0;
    }
}

우선 기존의 CSS 초기화를 위해 작성된 스타일은 base에 넣어준다.

base에는 기본 스타일이 등록된다.

 

그리고 컴포넌트의 클래스에 주입될 스타일을 다음과 같이 작성할 수 있다.

/* 생략 */

@layer components {
  .custom-div {
    @apply border-4 border-emerald-500 p-2 m-4 text-lg hover:bg-blue-600 active:translate-y-1;
  }
}

@layer를 사용하여 커스텀 클래스 셋이 속한 버킷(base, components, utilities)을 지정한다.

@apply를 통해서 커스텀 tailwindcss를 클래스명에 적용할 수 있다.

 

위와 같이 작성된 .custom-div는 어떤 컴포넌트에서도 사용될 수 있으며, 잘 적용되는 것을 확인할 수 있다.

 

🌸 utilities는 유틸리티와 관련된 클래스가 지정되는 곳으로, 공식문서의 예제로는 filter가 된 요소와 되지 않은 요소의 스타일 차이를 줄 때 사용될 수 있다.

 

꼭 @layer로 구분하지 않아도, @apply를 통해서 추가으로 유틸리티 클래스를 설정할 수 있다.

 

 

https://tailwindcss.com/docs/functions-and-directives#layer

Functions & Directives - Tailwind CSS