기본 제공된 스케일만 사용하는 단계를 넘어, 실무에서는 회사 로고 색상을 이식하거나 커스텀 폰트를 추가해 나만의 맞춤형 Tailwind 를 빌드해야 합니다. 루트 디렉토리의 tailwind.config.js 설정 파일 설계법을 통제하면 프레임워크 한계를 넘어 극도의 확장이 가능합니다.
Tailwind Config Node Structure
module.exports = { ... }
content: [ ]
템플릿 파일 감지
HTML, JS, TSX
경로 지정
theme: { ... }
extend: { colors: ... }
기존 스케일 보존하며 추가 확장
plugins: [ ]
공식 플러그인
라인 클램프
가로세로 비율
⚠️ 경고: theme 노드 바로 밑에 색상을 선언하지 말 것
테마 커스텀 색상을 추가하기 위해 theme: { colors: { brand: '#ff0000' } } 형태로 extend 노드를 건너뛰고 최상단에 직접 색상을 선언하면 절대 안 됩니다! 이렇게 선언하면 Tailwind가 기본 제공하는 수십만 개의 훌륭한 색상 팔레트 전체가 삭제되는 오버라이트 참사가 발생합니다. 반드시 theme: { extend: { colors: { ... } } } 형태로 extend 블록 내부에 작성 하여 기본값을 계승 보존하세요!
설정 노드 명칭
역할과 목적
실전 설정 구성 예시
content실제 배포 빌드 시 클래스가 들어있는 템플릿 파일들의 경로 필터링 (트리쉐이킹 용도)
['./src/**/*.{html,js,jsx,tsx}']
theme.extend기본 테마 레이아웃 스케일을 모두 살려두고, 나만의 색상, 크기, 폰트만 안전하게 이식
extend: { colors: { 'brand-blue': '#0ea5e9' } }
darkMode다크 모드를 가동할 동작 모드(Media vs Class) 정의
darkMode: 'class'
plugins비공식/공식 패키지 기능 추가 (라인 클램프 텍스트 자르기, 양식 폼 초기화 등)
[require('@tailwindcss/typography')]
index.html script.js style.css
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Custom Theme config Play</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'brand-corp': '#0ea5e9',
'brand-accent': '#f43f5e'
}
}
}
}
</script>
</head>
<body class="bg-slate-900 min-h-screen p-8 flex items-center justify-center font-sans">
<div class="max-w-md w-full bg-slate-800 rounded-3xl p-6 border border-slate-700 shadow-2xl space-y-6">
<div class="border-b border-slate-700 pb-4 text-center">
<span class="text-xs font-bold text-brand-corp tracking-widest uppercase">Tailwind CLI config</span>
<h2 class="text-2xl font-black text-white mt-1">Corporate Custom Theme</h2>
</div>
<div class="space-y-4">
<p class="text-sm text-slate-400">
아래의 예쁜 하늘색 버튼은 기본 Tailwind 스케일이 아닌, 자바스크립트 config를 통해 동적으로 주입된 <code class="text-brand-corp">bg-brand-corp</code> 클래스를 이용해 다듬어졌습니다!
</p>
<button onclick="console.log('💎 커스텀 테마 버튼 클릭됨!')" class="w-full bg-brand-corp hover:bg-sky-400 text-white font-bold py-3 rounded-xl transition-all shadow-lg shadow-sky-500/30">
브랜드 컬러 버튼 (bg-brand-corp)
</button>
</div>
</div>
</body>
</html>