Monorepo’lar Genelinde Tailwind’i Ölçeklendirme
Bir monorepo’daki birden çok paket arasında tek bir tailwind.config.js paylaşın, ortak belirteçler için ön ayarları kullanın ve çalışma alanına özgü genişletmeleri yönetin.
Monorepo’lar Genelinde Tailwind’i Ölçeklendirme, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Tailwind CSS Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
Tailwind için Monorepo Temelleri
Monorepo, Turborepo, Nx veya pnpm çalışma alanları gibi araçlarla yönetilen ve birden fazla paket ya da uygulama içeren tek bir depodur. Bir monorepo'daki birden fazla uygulama Tailwind kullanıyorsa yapılandırmayı paylaşmak önem kazanır. Paylaşım olmadığında her uygulama renk belirteçlerini, yazı tiplerini ve eklenti yapılandırmalarını kopyalar; bunlar zamanla birbirinden ayrılarak ürünler arasındaki arayüzün tutarsızlaşmasına yol açar.
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.jsonPaylaşılan Yapılandırma Paketi Oluşturma
Tailwind yapılandırmasını genellikle @repo/tailwind-config veya @acme/tailwind-config olarak adlandırılan özel bir pakete çıkarın. Bu paket, her tüketici uygulamanın içeri aktarıp genişlettiği bir temel yapılandırma nesnesi dışa aktarır. Paylaşılan paket, kendisini dahili bağımlılık olarak belirten kendi package.json dosyasıyla packages/tailwind-config/ içinde bulunur.
// 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: [],
};Paylaşılan Yapılandırmayı Kullanma
Her uygulama, paylaşılan yapılandırmayı require kullanarak içeri aktarır ve uygulamaya özgü geçersiz kılmalarla yayar veya birleştirir. Uygulamanın tailwind.config.js dosyası, kendi content yollarını (içerik yolları her zaman uygulamaya özgü olduğundan) ve yalnızca o uygulamaya ait uzantıları ekler. Paylaşılan yapılandırma tüm ortak tema belirteçlerini ve eklentileri yönetir.
// 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 Preset'lerini Kullanma
Tailwind'in preset sistemi, yapılandırmaları paylaşmak için resmî olarak desteklenen mekanizmadır. Preset, tüketici yapılandırmasındaki presets dizisine aktarılan bir nesnedir. Yapılandırma nesnesini yaymanın aksine preset'ler Tailwind tarafından akıllıca birleştirilir; tema uzantıları derinlemesine birleştirilir, eklentiler art arda eklenir ve içerik dizileri manuel yayma gerektirmeden birleştirilir.
// 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' },
},
},
};Paylaşılan Arayüz Paketi İçerik Yolları
Önemli bir monorepo tuzağı şudur: Tailwind sınıfları içeren bileşenleri dışa aktaran paylaşılan bir packages/ui bileşen kitaplığınız varsa tüketici uygulama bu paketin dosyalarını kendi content dizisine eklemelidir. Aksi hâlde JIT motoru paylaşılan bileşenleri taramaz ve orada kullanılan sınıflar üretim derlemesinden ayıklanır.
// 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}',
],
};Çalışma Alanı Bağımlılıklarını Ayarlama
Bir pnpm veya npm çalışma alanı monorepo'sunda paylaşılan yapılandırma paketini çalışma alanı protokolünü kullanarak geliştirme bağımlılığı olarak ekleyin. Bu, paketi npm'de yayımlamadan yerel pakete sembolik bağlantı oluşturur. Tüketici uygulamanın package.json dosyasında @acme/tailwind-config: workspace:* listelenir ve derleme araçları paketi otomatik olarak yerel pakete çözümler.
// 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 Derlemeleri için Turborepo Önbelleğe Alma
Bir Turborepo monorepo'sunda Tailwind derleme çıktılarını önbelleğe almak için turbo.json işlem hattını yapılandırın. Paylaşılan yapılandırma her uygulamanın derlemesinin bağımlılığı olduğundan packages/tailwind-config içindeki değişiklikler, tüm tüketici uygulamalarının derleme önbelleğini doğru şekilde geçersiz kılar. Bu, tasarım sistemi güncellendiğinde eski önbelleğe alınmış CSS'nin dağıtılmasını önler.
// 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İçerik Yolu Farklarını Yönetme
İçerik yolları paylaşılamayan tek yapılandırmadır; her uygulamaya özgü olmalıdır. Uygulamaların dizin yapıları farklıdır. İçerik yollarını paylaşılan yapılandırmaya koyma eğiliminden kaçının; bu, ya dosyaların gözden kaçmasına ya da çok geniş bir tarama yapılmasına neden olur. Paylaşılan yapılandırma yalnızca temayı, eklentileri ve preset'leri dışa aktarmalıdır. İçerik, her tüketici uygulamanın yapılandırmasında her zaman yerel olarak tanımlanır.
// 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'Paylaşılan Yapılandırmayı Sürümlendirme
Paylaşılan yapılandırma paketi özel olsa ve hiçbir zaman npm'de yayımlanmasa bile sürüm yönetimine özen gösterin. Her geriye dönük uyumsuz değişiklikte package.json içindeki sürümünü artırın; örneğin bir rengi kaldırırken, bir belirteci yeniden adlandırırken veya bir eklentiyi kaldırırken. Böylece preset tüketicileri belirli bir sürüme sabitleyebilir ve yükseltmeyi bilinçli biçimde yapabilir; geriye dönük uyumsuz değişiklikler sessizce tüm uygulamalara aynı anda yayılmaz.
// 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
}
}Paylaşılan Yapılandırma Değişikliklerini Test Etme
Değişiklikleri paylaşılan Tailwind yapılandırmasında birleştirmeden önce, bunu kullanan tüm uygulamalarda görsel gerileme testi çalıştırın. Marka rengindeki bir değişiklik veya bir aralık değerinin kaldırılması, tüm uygulamaları aynı anda etkiler. CI'da tüm uygulamaları derleyin (turbo build) ve önemli sayfalarda ekran görüntüsü karşılaştırması çalıştırın. Yapılandırma değişikliklerini uygulamalar arası geriye dönük uyumsuz değişiklikler olarak ele alın ve değişiklik günlüklerinde duyurun.
# 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=dashboardMonorepolarda Storybook Entegrasyonu
Bileşenleri belgelemek için paylaşılan kullanıcı arayüzü paketinde Storybook kullanıyorsanız Storybook'u aynı paylaşılan Tailwind ön ayarını kullanacak şekilde yapılandırın. Storybook Tailwind eklentisini (@storybook/addon-styling-webpack veya çerçeveye eşdeğerini) ekleyin ve paylaşılan yapılandırmaya yönlendirin. Böylece bileşenler, uygulamalarda kullandıkları belirteçlerle Storybook'ta da aynı şekilde görüntülenir.
// 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}'],
};Kısa Kontrol
Bu dersteki Tailwind CSS Uzmanlığı kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: akıllı derin birleştirme için resmî ön ayar sistemini kullanarak paylaşılan bir Tailwind yapılandırma paketi oluşturmayı, sınıfların ayıklanmasını önlemek için paylaşılan kullanıcı arayüzü paketi dosyalarını içerik yollarına dahil etmeyi ve sürümleme ile görsel gerileme testlerini kullanarak yapılandırma değişikliklerini uygulamalar arası geriye dönük uyumsuz değişiklikler olarak ele almayı. Sırada, bitirme projesi için eksiksiz bir Tailwind tasarım sistemi planlıyoruz.
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Monorepo’lar Genelinde Tailwind’i Ölçeklendirme” dersi ücretsiz mi?
Evet — “Monorepo’lar Genelinde Tailwind’i Ölçeklendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Tailwind CSS Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Tailwind CSS Academy kursu toplamda 4 dersten oluşur.
“Monorepo’lar Genelinde Tailwind’i Ölçeklendirme” dersinde ne öğreneceğim?
Bir monorepo’daki birden çok paket arasında tek bir tailwind.config.js paylaşın, ortak belirteçler için ön ayarları kullanın ve çalışma alanına özgü genişletmeleri yönetin. Tailwind CSS Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Tailwind CSS Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Tailwind CSS Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Monorepo’lar Genelinde Tailwind’i Ölçeklendirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Tailwind CSS Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Tailwind CSS Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Dosya ve Klasör Düzenleme
- Eski CSS ile Birlikte Çalışma
- CSS Modülleri ve Tailwind
- Monorepo’lar Genelinde Tailwind’i Ölçeklendirme