[HTML/CSS] Tailwind CSS 클래스 패턴 재활용 / 기본 테마 수정&확장

반복적으로 사용하는 Tailwind CSS 클래스 패턴을(특정 요소에 정의한 클래스 그룹을 여러 곳에서 사용할 때) 하나의 커스텀 클래스로 추출해서 사용할 수 있다

 

배경 지식 — Tailwind CSS 3계층

---

Tailwind는 CSS 우선순위를 제어하기 위해 base, components, utilities 3개의 계층(layer)으로 구분한다. 이렇게 계층을 구분해두면 각 스타일이 어떻게 상호작용하는지 더 쉽게 이해할 수 있으며, @layer 지시문(해당 스타일이 어떤 계층에 속할지 지정)을 사용해 원하는 방식으로 선언 순서를 제어할 수 있게 된다. — 참고

 

base

일반 HTML 요소에 적용되는 재설정 규칙(reset rules) / 기본 스타일을 위한 레이어. base 계층엔 특정 엘리먼트의 기본 스타일을 정의하기 적절하다.

/* styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  /* ... */
}

 

components

유틸리티를 사용해 재정의할 수 있는, 클래스(class) 기반 스타일을 위한 레이어. 아래는 theme 함수를 이용한 예시(참고). 닷노테이션 문법으로 Tailwind Config에 정의해둔 값에 접근할 수 있다. 

/* styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme("colors.white"); /*  Tailwind config 값 접근 */
    border-radius: theme("borderRadius.lg");
    padding: theme("spacing.6");
    box-shadow: theme("boxShadow.xl");
  }
  /* ... */
}

 

써드파티 컴포넌트에서 제공하는 클래스를 수정할 때도 components 계층에 정의하면 좋다

/* styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .select2-dropdown {
    @apply rounded-b-lg shadow-md;
  }
  .select2-search {
    @apply border border-gray-300 rounded;
  }
  .select2-results__group {
    @apply text-lg font-bold text-gray-900;
  }
  /* ... */
}

 

utilities

다른 스타일보다 우선시되는 단일 목적 클래스를 위한 레이어. utilities 계층엔 Tailwind가 제공하지 않는 커스텀 유틸리티(클래스)를 정의하기 좋다. 

/* styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .content-auto {
    content-visibility: auto;
  }
}

 

Tailwind의 플러그인 시스템을 이용해 유틸리티 클래스를 정의할 수도 있다.

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addUtilities }) {
      const newUtilities = {
        '.content-auto': {
          'content-visibility': 'auto',
        },
      };
      addUtilities(newUtilities);
    }),
  ],
};

 

🔍️ 커스텀 스타일을 정의할 때 @layer 지시문을 사용하면, @tailwind 지시문으로 자동 재배치돼서 선언 순서를 제어하는데 도움을 주며, 커스텀 스타일에도 modifiers 및 tree shaking 기능이 적용된다.

 

• Modifiers 기능 : hover, responsive breakpoints, dark mode 등을 핸들링하는 Tailwind 문법
  ex) hover:bg-sky-700, lg:dark:content-auto
• Tree shaking 기능 : 사용하지 않은 클래스는 compiled CSS에 포함되지 않는 기능. @layer 지시문 없이 정의한 커스텀 스타일은 항상 compiled CSS에 포함됨

 

클래스 패턴 추출

---

@apply 지시문 사용

💡 공식문서에선 @apply 지시문(directive)을 사용한 클래스 추상화는 form 조작이나 button 처럼 “재사용성이 높은 작은 부분”에 대해서만 사용할 것을 권고한다. @apply를 사용하면 CSS 번들 크기가 커지고 클래스 이름을 고려해야 되는 등 Tailwind 프레임워크가 가진 장점을 상쇄하기 때문이다 — 참고  

 

@apply 지시문은 커스텀 스타일内 유틸리티 클래스를 적용할 때 사용한다. ➊@apply 지시문으로 자주 사용하는 클래스 패턴을 추출해 새로운 커스텀 클래스를 만들거나, ➋기존 클래스(써드파티 라이브러리가 이미 정의해둔 클래스 등)에 새로운 스타일을 덮어쓸 수 있다.

 

@apply 지시문 안에 작성한 클래스 스타일은 기본적으로 모든 !important 속성을 제거한다. — 참고

/* styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-confirm {
    /* 확인 버튼에 대한 커스텀 클래스 */
    @apply bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600;
  }

  .btn-cancel {
    /* 취소 버튼에 대한 커스텀 클래스 */
    @apply bg-transparent hover:bg-gray-500 text-blue-700 hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded;
    /* @apply btn-confirm ... -> 다른 커스텀 클래스를 적용할 수도 있다 */
  }
}

<!-- Button.tsx -->
<!-- index.css에 정의한 커스텀 클래스 사용 -->
<button type="button" className="btn-confirm">확인</button>
<button type="button" className="btn-confirm">취소</button>

 

플러그인 시스템 사용

Tailwind의 플러그인 시스템을 사용하면 스타일 시트에 삽입될 새로운 스타일을 자바스크립트를 이용해서 등록할 수 있다. 기본적으로 아래처럼 사용한다. — plugin 함수의 각 파라미터 설명

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addUtilities, addComponents, e, prefix, config }) {
      // addUtilities({ ... }) -> for registering new static utility styles (utilities layer)
      // addComponents({ ... }) -> for registering new static component styles (components layer)
      // ...
    }),
  ],
};

 

components 계층(layer)에 등록할 스타일이므로 addComponents에 클래스명과 스타일을 정의한다. 속성명은 camelCase를 사용하고 속성 값은 theme 함수를 이용하거나, '...'문자열 형태로 입력한다.

 

💡 theme 함수에서 Tailwind config 값에 접근할 땐 - 대시가 아닌 . 온점을 사용한다. 숫자 2.5 같은 .온점이 들어간 값을 적을 땐 Braket Notation [...]을 사용한다.

• background-color: theme('colors.blue.500');
• height: calc(100vh - theme('spacing[2.5]'));

 

// tailwind.config.js
const plugin = require('tailwindcss/plugin');

module.exports = {
  // ...
  plugins: [
    plugin(function ({ addComponents, theme }) {
      addComponents({
        '.btn-confirm': {
          borderRadius: theme('spacing.1'), // '0.25rem'
          backgroundColor: theme('colors.blue.500'), // '#3b82f6'
          color: theme('color.white'), // '#fff'
          padding: `${theme('spacing.2')} ${theme('spacing.4')}`, // '0.5rem 1rem 0.5rem 1rem'
          '&:hover': {
            backgroundColor: theme('colors.blue.600'), // '#2563eb'
          },
        },
      });
    }),
  ],
};

 

🔍️ 위와 동일한 방법으로 tailwind.config.js 파일에 유틸리티 클래스를 등록할 수도 있다.

 

기본 테마 수정 / 확장

---

Tailwind에선 범용적으로 사용할 수 있는 default theme를 제공한다. 원한다면 tailwind.config.js의 theme 속성에서 기본 테마를 수정하거나 확장할 수도 있다. theme 속성엔 screens, colors, spacing 등의 key가 포함되어 있다. 전체 key 리스트는 링크에서 확인할 수 있다.

// tailwind.config.js - 기본 테마 확장
module.exports = {
  theme: {
    extend: {
      // Adds a new breakpoint in addition to the default breakpoints
      screens: {
        '3xl': '1600px',
      },
    },
  },
};

 

기본 테마를 수정할 때 명시하지 않은 key는 기본 테마를 그대로 상속받는다. 아래에선 opacity(투명도) key만 수정했으므로 colors, spacing, border-radius 등에 대한 기본 테마 구성은 모두 유지된다. — 참고  

Any keys you do not provide will be inherited from the default theme

 

// tailwind.config.js - 기본 테마 수정
module.exports = {
  theme: {
    // Replaces all of the default `opacity` values
    opacity: {
      0: '0',
      20: '0.2',
      40: '0.4',
      60: '0.6',
      80: '0.8',
      100: '1',
    },
  },
};

 

theme() 함수는 다른 config 값에 접근할 수 있으므로 테마를 수정할 때도 사용할 수 있다. — 참고

module.exports = {
  theme: {
    fill: ({ theme }) => ({
      gray: theme('colors.gray'),
    }),
  },
};

인피니티산스 Regular를 기본 폰트로, 인피니티산스 Bold를 <h1> 태그 폰트로 바꾸는 예시.

/* styles/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* @font-face 지시문으로 새로 추가할 폰트 다운로드 */
  @font-face {
    font-family: 'InfinitySans-RegularA1';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-RegularA1.woff')
      format('woff');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'InfinitySans-BoldA1';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-BoldA1.woff')
      format('woff');
    font-weight: normal;
    font-style: normal;
  }

  body {
    /* tailwind.config.js에서 수정한 fontFamily.sans 속성을 기본 폰트로 지정 */
    @apply font-sans;
  }

  h1 {
    /* tailwind.config.js에서 추가한 fontFamily.heading 속성을 기본 폰트로 지정 */
    @apply font-heading;
  }
}

// tailwind.config.js - 기본 테마 확장 예시
const { fontFamily } = require('tailwindcss/defaultTheme'); // 기본 테마의 fontFamily 속성 import

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      fontFamily: {
        // fontFamily.sans 속성 변경(regular 굵기). font-sans 클래스로 사용
        // fontFamily 속성은 기본적으로 sans, mono, seif 속성을 포함함
        sans: ['InfinitySans-RegularA1', ...fontFamily.sans],
        // fontFamily.heading 속성 추가(bold 굵기). font-heading 클래스로 사용
        heading: ['InfinitySans-BoldA1', ...fontFamily.sans],
      },
      keyframes: {
        blink: { '50%': { opacity: '0' } },
      },
      animation: {
        blink: 'blink 1s step-end infinite',
      },
      colors: {
        'primary-blue': '#464ea3',
        'primary-red': '#f2542d',
        // ...
      },
      screens: {
        ss: '450px', // @media (min-width: 450px) {...}
        // ...
      },
    },
  },
  plugins: [],
};

 

레퍼런스

---

Reusing Styles - Tailwind CSS  

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요