fix: use color variable which is described in tailwind.config.js

YoonKeumJae · YoonKeumJae · commit 692ad744baa9 · 2025-06-27T15:58:51.000+09:00
diff --git a/index.html b/index.html
@@ -29,6 +29,9 @@
   <body
     class="bg-background-light dark:bg-background-dark h-full flex-col text-base dark:text-white"
   >
+    <!-- 숨겨진 div: Tailwind가 사용할 클래스들을 강제 인식하게 함 -->
+    <div class="hidden bg-docker-primary bg-docker-hover text-docker-link"></div>
+    
     <!-- 최상단 헤더 -->
     <header-component></header-component>
 
diff --git a/src/scripts/components/button-component.ts b/src/scripts/components/button-component.ts
@@ -21,7 +21,7 @@ export default class ButtonComponent extends HTMLElement {
 
     this.innerHTML = `
             <button type="button" class="not-prose my-4">
-                <a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-[#086dd7] hover:bg-[#2560ff] text-white!">
+                <a href="${href}" class="cursor-pointer py-2 px-4 rounded bg-docker-primary hover:bg-docker-hover text-white!">
                     ${title}
                 </a>
             </button>
diff --git a/src/scripts/components/footer-component.ts b/src/scripts/components/footer-component.ts
@@ -5,7 +5,7 @@ class FooterComponent extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-      <footer class="w-screen text-center py-4 bg-[#086dd7] text-white relative bottom-0">
+      <footer class="w-screen text-center py-4 bg-docker-primary text-white relative bottom-0">
         © 2025 Docker 한국어 문서 프로젝트 |
         <a href="https://github.com/docker-ko/docker-ko.github.io" class="hover:underline text-[#b0c4de]">GitHub</a>
       </footer>
diff --git a/src/scripts/components/header-component.ts b/src/scripts/components/header-component.ts
@@ -24,7 +24,7 @@ class HeaderComponent extends HTMLElement {
 
   connectedCallback() {
     this.innerHTML = `
-      <header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-[#086dd7]">
+      <header class="w-full sticky top-0 z-20 h-16 px-6 text-white bg-docker-primary" style="background-color: #086dd7;">
             <div class="max-w-[1920px] mx-auto flex lg:gap-8 gap-2 h-full items-center justify-between">
                 <div class="flex h-full items-center lg:gap-8 gap-2">
                     <div>
diff --git a/src/styles/content_style.css b/src/styles/content_style.css
@@ -65,6 +65,7 @@
 #content pre {
   padding: 0.5rem;
   border: 2px solid #e1e2e6;
+  background: #f8f9fa;
   border-radius: 8px;
   overflow-x: auto;
   line-height: 1.5;
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,4 +6,48 @@ module.exports = {
     './public/**/*.md',
     './src/scripts/components/*.{js,ts,jsx,tsx}'
   ],
+  safelist: [
+    'bg-docker-primary',
+    'bg-docker-hover',
+    'text-docker-link',
+    'border-border-light',
+    'border-border-primary',
+    'bg-surface-card',
+    'bg-surface-code',
+    'border-surface-code-border'
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // Docker 브랜드 색상
+        'docker-primary': '#086dd7',    // 메인 브랜드 블루
+        'docker-hover': '#2560ff',      // 호버 시 블루
+        'docker-link': '#007bff',       // 링크 색상
+        
+        // 배경 색상
+        'bg-light': '#ffffff',      // 라이트 모드 배경
+        'bg-dark': '#1a1a1a',      // 다크 모드 배경
+        'bg-sidebar': '#f9f9fa',   // 사이드바 배경
+        
+        // 텍스트 색상
+        'txt-primary': '#222222',    // 메인 텍스트
+        'txt-secondary': '#444444',  // 서브 텍스트
+        'txt-muted': '#555555',     // 음소거된 텍스트
+        'txt-inverse': '#ffffff',   // 역방향 텍스트 (다크 배경에서)
+        'txt-black': '#000000',     // 순수 검정
+        
+        // 테두리 색상
+        'border-light': '#e1e2e6',     // 기본 테두리
+        'border-primary': '#007bff',   // 강조 테두리 (blockquote 등)
+        
+        // 회색 계열 (다크모드 지원)
+        'gray-dark-100': '#2d2d2d', // 다크모드 회색
+        
+        // 상태별 색상
+        'surface-card': '#ffffff',       // 카드 배경
+        'surface-code': '#f8f9fa',      // 코드 블록 배경
+        'surface-code-border': '#e1e2e6', // 코드 블록 테두리
+      }
+    }
+  }
 };

Original file line number	Diff line number	Diff line change
`@@ -29,6 +29,9 @@`
`29`	`29`	`<body`
`30`	`30`	`class="bg-background-light dark:bg-background-dark h-full flex-col text-base dark:text-white"`
`31`	`31`	`>`
	`32`	`+ <!-- 숨겨진 div: Tailwind가 사용할 클래스들을 강제 인식하게 함 -->`
	`33`	`+ <div class="hidden bg-docker-primary bg-docker-hover text-docker-link"></div>`
	`34`	`+`
`32`	`35`	`<!-- 최상단 헤더 -->`
`33`	`36`	`<header-component></header-component>`
`34`	`37`