모노레포 전반으로 Tailwind 확장하기
모노레포의 여러 패키지에서 하나의 tailwind.config.js를 공유하고, 공유 토큰에는 프리셋을 사용하며, 작업 공간별 확장을 관리합니다.
모노레포 전반으로 Tailwind 확장하기은(는) CoddyKit의 무료 Tailwind CSS Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Tailwind CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
Tailwind 모노레포 기초
모노레포는 Turborepo, Nx 또는 pnpm 작업 영역과 같은 도구로 관리되는 여러 패키지나 애플리케이션을 포함한 단일 저장소입니다. 모노레포의 여러 앱에서 Tailwind를 사용할 때는 설정을 공유하는 것이 중요합니다. 공유하지 않으면 각 앱이 색상 토큰, 글꼴, 플러그인 설정을 중복해서 관리하게 되고, 점차 서로 달라져 제품 전반의 UI가 일관되지 않게 됩니다.
monorepo/
├── apps/
│ ├── web/ # Next.js marketing site
│ └── dashboard/ # React admin app
├── packages/
│ ├── ui/ # Shared component library
│ └── tailwind-config/ # ← Shared Tailwind config
├── package.json # Workspace root
└── turbo.json공유 설정 패키지 만들기
Tailwind 설정을 일반적으로 @repo/tailwind-config 또는 @acme/tailwind-config라고 부르는 전용 패키지로 추출하세요. 이 패키지는 각 사용 앱이 가져와 확장하는 기본 설정 객체를 내보냅니다. 공유 패키지는 packages/tailwind-config/에 자체 package.json을 포함해 내부 의존성으로 표시한 상태로 둡니다.
// packages/tailwind-config/package.json
{
"name": "@acme/tailwind-config",
"version": "0.0.1",
"private": true,
"main": "./tailwind.config.js",
"devDependencies": {
"tailwindcss": "^3.4.0"
}
}
// packages/tailwind-config/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: {
brand: { 500: '#3b82f6', 900: '#1e3a8a' },
},
},
},
plugins: [],
};공유 설정 사용하기
각 앱은 require를 사용해 공유 설정을 가져온 다음 앱별 재정의 설정을 펼쳐 넣거나 병합합니다. 앱의 tailwind.config.js에는 자체 content 경로를 추가하고(콘텐츠 경로는 항상 앱별로 다르므로) 해당 애플리케이션에만 필요한 확장도 추가합니다. 공유 설정은 모든 공통 테마 토큰과 플러그인을 처리합니다.
// apps/web/tailwind.config.js
const sharedConfig = require('@acme/tailwind-config');
/** @type {import('tailwindcss').Config} */
module.exports = {
// Merge shared config
...sharedConfig,
// App-specific content paths (NEVER shared — paths differ per app)
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./public/**/*.html',
],
theme: {
...sharedConfig.theme,
extend: {
...sharedConfig.theme.extend,
// App-specific extensions
backgroundImage: {
'hero-gradient': 'linear-gradient(to bottom, #eff6ff, #ffffff)',
},
},
},
};Tailwind 프리셋 사용하기
Tailwind의 프리셋 시스템은 설정을 공유할 때 공식적으로 지원되는 방식입니다. 프리셋은 사용하는 설정의 presets 배열에 전달하는 객체입니다. 설정 객체를 펼쳐 넣는 방식과 달리 프리셋은 Tailwind가 지능적으로 병합합니다. 테마 확장은 깊게 병합되고 플러그인은 연결되며 콘텐츠 배열은 수동으로 펼치지 않아도 결합됩니다.
// packages/tailwind-config/tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
colors: { brand: { 500: '#3b82f6' } },
},
},
plugins: [require('@tailwindcss/forms')],
};
// apps/dashboard/tailwind.config.js
module.exports = {
presets: [require('@acme/tailwind-config')], // ← official preset
content: ['./src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
// Deep-merged with preset's theme.extend automatically
spacing: { 18: '4.5rem' },
},
},
};공유 UI 패키지의 콘텐츠 경로
모노레포에서 자주 발생하는 중요한 문제는 다음과 같습니다. Tailwind 클래스가 적용된 컴포넌트를 내보내는 공유 packages/ui 컴포넌트 라이브러리가 있다면 사용하는 앱은 해당 패키지의 파일을 content 배열에 포함해야 합니다. 그렇지 않으면 JIT 엔진이 공유 컴포넌트를 검사하지 않아 그곳에서 사용한 클래스가 프로덕션 빌드에서 제거됩니다.
// apps/web/tailwind.config.js
module.exports = {
presets: [require('@acme/tailwind-config')],
content: [
// App's own files
'./src/**/*.{js,ts,jsx,tsx}',
// ⬇ CRITICAL: include shared UI package files
'../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
],
};작업 영역 의존성 설정
pnpm 또는 npm 작업 영역 모노레포에서는 작업 영역 프로토콜을 사용해 공유 설정 패키지를 개발 의존성으로 추가하세요. 그러면 패키지를 npm에 게시하지 않고도 로컬 패키지로 연결하는 심볼릭 링크가 생성됩니다. 사용하는 앱의 package.json에는 @acme/tailwind-config: workspace:*가 기록되고 빌드 도구가 이를 자동으로 로컬 패키지로 확인합니다.
// apps/web/package.json
{
"name": "web",
"devDependencies": {
"@acme/tailwind-config": "workspace:*",
"tailwindcss": "^3.4.0"
}
}
// Install all workspace packages from the monorepo root:
pnpm install
# or
npm install --workspacesTailwind 빌드를 위한 Turborepo 캐싱
Turborepo 모노레포에서는 Tailwind 빌드 출력을 캐시하도록 turbo.json 파이프라인을 설정하세요. 공유 설정은 각 앱 빌드의 의존성이므로 packages/tailwind-config가 변경되면 사용하는 모든 앱의 빌드 캐시가 올바르게 무효화됩니다. 이를 통해 디자인 시스템이 업데이트되었을 때 오래된 캐시 CSS가 배포되는 것을 방지할 수 있습니다.
// turbo.json
{
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": [".next/**", "dist/**", "!.next/cache/**"]
},
"type-check": {
"dependsOn": ["^build"]
}
}
}
# Build only what has changed since last run:
npx turbo build
# Turbo caches CSS output and invalidates when tailwind-config changes콘텐츠 경로 차이 처리하기
콘텐츠 경로는 공유할 수 없는 유일한 설정이며 각 앱에 로컬로 지정해야 합니다. 앱마다 디렉터리 구조가 다르기 때문입니다. 공유 설정에 콘텐츠 경로를 넣고 싶은 유혹을 피하세요. 그렇게 하면 일부 파일을 놓치거나 지나치게 넓은 범위를 검사하게 됩니다. 공유 설정은 테마, 플러그인, 프리셋만 내보내야 합니다. 콘텐츠는 사용하는 각 앱의 설정에서 항상 로컬로 정의하세요.
// packages/tailwind-config/tailwind.config.js
// ⚠ DO NOT include content paths here
module.exports = {
// content: [] ← Leave this OUT of the shared config
theme: {
extend: { colors: { brand: { 500: '#3b82f6' } } },
},
plugins: [],
};
// Each app defines its own content:
// apps/web: './src/**/*.{js,ts,jsx,tsx}'
// apps/dashboard: './pages/**/*.tsx', './components/**/*.tsx'공유 설정 버전 관리하기
공유 설정 패키지가 비공개이고 npm에 게시되지 않더라도 버전을 엄격하게 관리하세요. 색상 제거, 토큰 이름 변경, 플러그인 제거와 같은 호환성을 깨뜨리는 변경이 있을 때마다 package.json의 버전을 올리세요. 그러면 프리셋 사용자가 특정 버전에 고정하고 의도적으로 업그레이드할 수 있어 호환성을 깨뜨리는 변경이 모든 앱에 한꺼번에 조용히 전파되는 일을 막을 수 있습니다.
// packages/tailwind-config/package.json
{
"name": "@acme/tailwind-config",
"version": "1.3.0", // ← bump on breaking changes
"private": true,
"main": "./tailwind.config.js"
}
// apps/dashboard/package.json — pin to a specific version
{
"devDependencies": {
"@acme/tailwind-config": "workspace:^1.2.0" // pin minor version
}
}공유 설정 변경 테스트하기
공유 Tailwind 설정을 병합하기 전에 이를 사용하는 모든 앱에서 시각적 회귀 테스트를 실행하십시오. 브랜드 색상을 변경하거나 간격 값을 제거하면 모든 앱에 동시에 영향을 줍니다. CI에서 모든 앱을 빌드하고(turbo build) 주요 페이지의 스크린샷을 비교하십시오. 설정 변경은 여러 앱에 걸친 호환성 파괴 변경으로 간주하고 변경 로그에 알리십시오.
# Run all affected builds when tailwind-config changes
npx turbo build --filter='...[origin/main]'
# Turborepo detects which apps depend on the changed package
# and builds only those apps
# Run visual regression on changed apps:
npx playwright test --project=web
npx playwright test --project=dashboard모노레포에서 스토리북 통합
공유 UI 패키지에서 스토리북을 사용해 컴포넌트를 문서화한다면, 스토리북이 동일한 공유 Tailwind 프리셋을 사용하도록 구성하십시오. 스토리북 Tailwind 애드온(@storybook/addon-styling-webpack 또는 해당 프레임워크에 맞는 동등한 애드온)을 추가하고 공유 설정을 가리키도록 지정하십시오. 이렇게 하면 스토리북에서 컴포넌트가 앱에서 사용하는 것과 동일한 토큰으로 렌더링됩니다.
// packages/ui/.storybook/main.js
module.exports = {
addons: ['@storybook/addon-styling-webpack'],
framework: '@storybook/react-webpack5',
};
// packages/ui/.storybook/preview.js
import '../src/styles/globals.css'; // imports Tailwind
// packages/ui/tailwind.config.js
module.exports = {
presets: [require('@acme/tailwind-config')],
content: ['./src/**/*.{js,ts,jsx,tsx}'],
};빠른 확인
이 레슨에서 다룬 Tailwind CSS 숙련도 개념에 대한 이해도를 확인하십시오.
레슨 요약
이 레슨에서는 공식 프리셋 시스템을 사용해 지능적으로 깊은 병합을 수행하는 공유 Tailwind 설정 패키지 만들기, 클래스 제거를 방지하기 위해 콘텐츠 경로에 공유 UI 패키지 파일 포함하기, 그리고 버전 관리와 시각적 회귀 테스트를 적용해 설정 변경을 여러 앱에 걸친 호환성 파괴 변경으로 다루기를 배웠습니다. 다음으로 최종 프로젝트를 위한 완전한 Tailwind 디자인 시스템을 설계합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 30
- 레슨
- 120
자주 묻는 질문
“모노레포 전반으로 Tailwind 확장하기” 강의는 무료인가요?
네 — “모노레포 전반으로 Tailwind 확장하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Tailwind CSS Academy 강의 전체를 잠금 해제할 수 있습니다. Tailwind CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“모노레포 전반으로 Tailwind 확장하기”에서 뭘 배우나요?
모노레포의 여러 패키지에서 하나의 tailwind.config.js를 공유하고, 공유 토큰에는 프리셋을 사용하며, 작업 공간별 확장을 관리합니다. 브라우저에서 직접 실행하는 실습 코드로 Tailwind CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Tailwind CSS Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Tailwind CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“모노레포 전반으로 Tailwind 확장하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Tailwind CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Tailwind CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- 파일 및 폴더 구성
- 레거시 CSS와 함께 사용하기
- CSS Modules와 Tailwind
- 모노레포 전반으로 Tailwind 확장하기