Note

1@import "tailwindcss";
2
3@theme {            
4  // 테마 정의 (디자인 시스템)
5}
6@layer base {       
7  // 기본 스타일 - HTML 태그 기본값 (우선순위 하단 베이스)
8}
9@layer components { 
10  // 컴포넌트 스타일 - 반복되는 UI 조각 (우선순위 중간)
11}
12@layer utilities {  
13  // 유틸리티 스타일 - 아주 특수한 경우 (우선순위 가장 높음)
14}

1@import "tailwindcss";
2
3@theme {
4  /* 색상 추가(or 오버라이딩) */
5  --color-primary: #3b82f6;
6  --color-brand: #ff5a5f;
7  
8  /* 반응형 브레이크포인트 커스텀 */
9  --breakpoint-tablet: 768px;
10  --breakpoint-pc: 1280px;
11
12  /* 수치 커스텀 (w-150 등을 쓸 수 있게) */
13  --spacing-150: 37.5rem; /* 600px */
14}
15
16@layer base {
17  body {
18    @apply bg-white text-gray-900 antialiased;
19  }
20  
21  h1 {
22    @apply text-2xl font-bold;
23  }
24}
25
26@layer components {
27  .btn-base {
28    @apply px-4 py-2 rounded-md transition-all active:scale-95;
29  }
30}
31
32@layer utilities {
33  .text-gradient {
34    background: linear-gradient(to right, blue, purple);
35    -webkit-background-clip: text;
36    color: transparent;
37  }
38}