Vue 3 프로젝트에서 버튼 스타일을 공통으로 지정하고 재사용성을 높이려면 TailwindCSS의 장점을 살리는 동시에 프로젝트 구조를 유지하는 것이 중요합니다. 이 글에서는 두 가지 접근법인 TailwindCSS 클래스 조합과 일반 CSS 활용을 소개합니다.
1. TailwindCSS 클래스 조합으로 정의하기
@apply를 사용한 공통 클래스 정의
@apply를 활용하면 TailwindCSS의 유틸리티 클래스를 결합하여 공통 스타일을 정의할 수 있습니다.
공통 CSS 파일에 버튼 스타일을 정의하고, Vue 컴포넌트에서 해당 클래스를 적용하면 됩니다. 이를 통해 버튼 스타일을 일관되게 유지할 수 있습니다.
공통 css 파일 작성
/* src/assets/styles/common.css */
.btn {
@apply bg-blue-500 text-white font-bold py-2 px-4 rounded-lg;
@apply hover:bg-blue-600 active:bg-blue-700;
@apply transition duration-300 ease-in-out;
}Vue에서 사용
<template>
<button class="btn">클릭하세요</button>
</template>
<script>
import "@/assets/styles/common.css";
</script>TailwindCSS 구성 파일로 확장하기
TailwindCSS의 theme.extend를 활용하면 프로젝트 전체에서 사용 가능한 공통 스타일을 구성할 수 있습니다.
구성 파일에서 버튼 색상과 스타일을 확장하여 유틸리티 클래스를 사용해 직관적으로 스타일을 적용할 수 있습니다.
Tailwind 구성 파일 설정
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
primary: {
DEFAULT: '#007bff',
hover: '#0056b3',
active: '#003d80',
},
},
},
},
plugins: [],
};Vue에서 사용
<template>
<button class="bg-primary text-white font-bold py-2 px-4 rounded-lg
hover:bg-primary-hover active:bg-primary-active">
클릭하세요
</button>
</template>2. 일반 CSS 파일로 공통 스타일 작성하기
TailwindCSS의 유틸리티 스타일을 사용하지 않고, 전통적인 방식으로 공통 스타일을 정의할 수도 있습니다. 이 방법은 TailwindCSS를 보완하거나 더 정교한 스타일이 필요한 경우에 적합합니다.
CSS 파일에 버튼 스타일을 명시적으로 정의한 후 Vue 컴포넌트에서 해당 클래스를 적용하여 사용합니다. 이는 TailwindCSS가 제공하지 않는 세부적인 스타일링을 추가하는 데 유용합니다.
공통 CSS 파일 작성
/* src/assets/styles/common.css */
.btn {
background-color: #007bff; /* 기본 파란색 */
color: #ffffff; /* 텍스트 흰색 */
border: none;
border-radius: 8px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.2s ease;
}
.btn:hover {
background-color: #0056b3; /* hover 시 어두운 파랑 */
}
.btn:active {
background-color: #003d80; /* active 시 더 어두운 파랑 */
box-shadow: inset 0px 2px 4px rgba(0, 0, 0, 0.2); /* 눌린 효과 */
transform: scale(0.95); /* 살짝 눌리는 효과 */
}Vue에서 사용
<template>
<button class="btn">클릭하세요</button>
</template>
<script>
import "@/assets/styles/common.css";
</script>3. 어떤 방법을 선택해야 할까?
-
재사용성을 높이고 유지보수를 간단히 하려면?
- TailwindCSS의
@apply를 사용해 공통 클래스를 정의하거나 Tailwind 구성 파일에서 색상 및 스타일을 확장.
- TailwindCSS의
-
TailwindCSS를 보완하거나 정교한 스타일이 필요하다면?
src/assets/styles/common.css에 전통적인 CSS로 정의.
결론
Vue 3와 TailwindCSS를 함께 사용할 때 공통 스타일을 정의하는 방법은 프로젝트 요구사항에 따라 달라질 수 있습니다. @apply를 활용한 클래스 정의는 TailwindCSS의 유틸리티 중심 스타일링 철학을 따르며, 구성 파일을 활용한 확장은 더 큰 유연성을 제공합니다. 필요에 따라 TailwindCSS와 일반 CSS를 조합하여 사용하세요!
