Tailwind v4 ile Angular ve Nx Monorepo Konfigürasyonu

Giriş

Tailwind CSS v4, önemli basitleştirmeler getirdi: artık tailwind.config.js dosyasına gerek yok, minimum bağımlılık ve başlamak için basit bir CSS import'u yeterli. Ancak Tailwind v4'ü Angular ile bir Nx monorepo'da kullanıyorsanız, bir sorunla karşılaşabilirsiniz: production CSS'iniz gerekenden daha büyük olabilir.

Bu makale, Tailwind v4'ün tarama mekanizmasının Angular'ın PostCSS kurulumu ile nasıl çalıştığını, neden şişkin CSS çıktısına yol açabileceğini ve @source direktifleri ve Nx Sync Generators kullanarak nasıl optimize edileceğini açıklıyor.

Vite ile NPM Workspace Kullanıyor musunuz?

Angular yerine Vite (React, Vue, vb.) kullanıyorsanız, bunun yerine Tailwind v4 with Vite in an NPM Workspace rehberine göz atın.

İçindekiler

Tailwind v4'ü Angular ile Kurma
Problem: Monorepo'larda Aşırı Tarama
Bu Neden Oluyor?
PostCSS vs Vite Plugin Davranışını Karşılaştırma
Çözüm: @source Direktifleri ile Taramayı Kısıtlama
Nx Sync Generators ile @source'u Otomatikleştirme
Alternatif: PostCSS Plugin Yaklaşımı
Sonuç

Tailwind v4'ü Angular ile Kurma

Tailwind v4'ü Angular ile kurmak oldukça basittir. Hem Angular dokümanları hem de Tailwind dokümanları bunun için rehberlere sahip. Ancak bir monorepo'da çalışırken önemli bir noktayı kaçırıyorlar, bugün ele alacağımız konu da bu.

Angular, CSS işleme için PostCSS kullandığından, PostCSS eklentisine ihtiyacınız var.

Gerekli paketleri yükleyin:

json

// package.json
{
  "dependencies": {
    "@tailwindcss/postcss": "^4.1.13",
    "tailwindcss": "^4.1.13"
  }
}

Uygulamanızda PostCSS'i yapılandırın:

json

// apps/demoapp/.postcssrc.json
{
  "plugins": {
    "@tailwindcss/postcss": {}
  }
}

Tailwind'i stil giriş noktanıza import edin:

css

/ apps/demoapp/src/styles.css /
@import 'tailwindcss';

Bu kadar. Angular uygulamanız artık Tailwind v4 ile yapılandırılmış durumda. Ancak işte monorepo kurulumunda işler ilginçleşmeye başlıyor.

Problem: Monorepo'larda Aşırı Tarama

Tipik bir Nx workspace yapısını düşünün:

text

apps/
  demoapp/           # Angular uygulamanız
libs/
  ui-design-system/  # Paylaşılan UI bileşenleri (demoapp tarafından kullanılıyor)
  another-ui/        # Başka bir kütüphane (demoapp tarafından KULLANILMIYOR)

nx build demoapp komutunu çalıştırdığınızda, sadece demoapp ve bağımlılığı ui-design-system'den gelen Tailwind sınıflarının final CSS'e dahil olmasını beklersiniz. Ancak varsayılan olarak böyle olmuyor.

Diyelim ki another-ui şu şablona sahip bir bileşene sahip:

html

<!-- libs/another-ui/src/lib/another-ui/another-ui.html -->
<p class="text-red-500">AnotherUi works!</p>

demoapp hiçbir zaman another-ui'yi import etmese bile, production CSS çıktınızı kontrol ederseniz, text-red-500 sınıfını orada bulacaksınız. Bu, workspace'inizdeki her kütüphanedeki her kullanılmayan sınıf için geçerli.

Bu Neden Oluyor?

@tailwindcss/postcss eklentisi, varsayılan tarama tabanı olarak process.cwd() kullanır:

javascript

// @tailwindcss/postcss kaynak kodu
let base = opts.base ?? process.cwd();

nx build demoapp komutunu çalıştırdığınızda, process.cwd() workspace kökünüzdür. Tailwind oradan taramaya başlar ve tüm monorepo'nuzdaki tüm .html, .ts ve diğer şablon dosyalarını bulur.

Bu, Vite config root'unu (genellikle uygulama dizini) tabanı olarak kullanan @tailwindcss/vite eklentisinden farklıdır. Vite ile tam tersi bir probleminiz var: varsayılan olarak yeterli dahil edilmiyor, bu yüzden kütüphane kaynaklarını açıkça eklemeniz gerekiyor. React veya diğer frameworkler ile Vite kullanıyorsanız, Tailwind v4 with Vite in an NPM Workspace rehberine göz atın.

PostCSS yapılandırmanızda base özelliğini sağlayarak taramayı kısıtlayabilirsiniz:

json

// apps/demoapp/.postcssrc.json
{
  "plugins": {
    "@tailwindcss/postcss": {
      "base": "./apps/demoapp/src"
    }
  }
}

Ancak bu durumda tüm kütüphane bağımlılıklarınız için manuel olarak @source direktifleri eklemeniz gerekir. Daha otomatik bir yaklaşıma bakalım.

PostCSS vs Vite Plugin Davranışını Karşılaştırma

Plugin	Varsayılan Taban	Monorepo Davranışı	Kütüphaneler için @source gerekli mi?
@tailwindcss/postcss	process.cwd()	Tüm workspace'i tarar	Sadece source() ile kısıtlarsanız
@tailwindcss/vite	config.root	Sadece uygulama dizinini tarar	Evet, her zaman

PostCSS eklentisi ile tüm kütüphanelerden tüm sınıfları alırsınız. Vite eklentisi ile sadece uygulamadan sınıfları alırsınız ve kütüphane kaynaklarını açıkça eklemeniz gerekir. Her iki yaklaşım da @source direktiflerini yönetmek için otomasyondan faydalanır.

Çözüm: @source Direktifleri ile Taramayı Kısıtlama

Tailwind v4, hangi dizinlerin taranacağını kontrol etmek için source() fonksiyonu ve @source direktifi sağlar.

Adım 1: Otomatik Taramayı Kısıtlayın

Otomatik taramayı sadece uygulamanızla sınırlamak için stil giriş noktanızı güncelleyin:

css

/ apps/demoapp/src/styles.css /
@import 'tailwindcss' source('./app');

source("./app") değiştirici, Tailwind'e sadece bu CSS dosyasına göre app alt dizinini otomatik olarak taramasını söyler.

Adım 2: Kütüphane Bağımlılıklarını Ekleyin

Şimdi kütüphane bağımlılıklarınızı açıkça eklemeniz gerekiyor:

css

/ apps/demoapp/src/styles.css /
@import 'tailwindcss' source('./app');

@source "../../../libs/ui-design-system/src";

Bu yapılandırma ile:

apps/demoapp/src/app/ içindeki sınıflar dahil edilir (source("./app") ile)
libs/ui-design-system/src/ içindeki sınıflar dahil edilir (@source ile)
libs/another-ui/ içindeki sınıflar dahil EDİLMEZ

Production CSS'iniz artık sadece gerçekten kullandığınız şeyleri içerir.

Nx Sync Generators ile @source'u Otomatikleştirme

@source direktiflerini manuel olarak yönetmek işe yarar, ancak bakım yükü getirir:

Yeni bağımlılıklar eklerken unutmak kolay
Eksik stiller build'leri bozmaz (sadece görsel hatalara neden olur)
Her ekip üyesinin yolları güncellemeyi hatırlaması gerekir

Nx Sync Generators, @source direktiflerinizi proje bağımlılıklarınızla otomatik olarak senkronize tutarak bu sorunu çözer.

@juristr/nx-tailwind-sync Kullanımı

Tailwind v4 with Vite in an NPM Workspace makalesinde, @source direktif yönetimini otomatikleştirmek için özel bir sync generator nasıl oluşturulacağını açıkladım. Bunu doğrudan kullanabilmeniz için @juristr/nx-tailwind-sync paketine dönüştürdüm.

Yükleyin:

bash

npm install @juristr/nx-tailwind-sync

Sync generator'ı uygulamanızın project.json dosyasına kaydedin:

json

// apps/demoapp/project.json
{
  "name": "demoapp",
  "targets": {
    "build": {
      "executor": "@angular/build:application",
      "syncGenerators": ["@juristr/nx-tailwind-sync:source-directives"],
      ...
    },
    "serve": {
      "executor": "@angular/build:dev-server",
      "syncGenerators": ["@juristr/nx-tailwind-sync:source-directives"],
      ...
    }
  }
}

Şimdi nx build demoapp veya nx serve demoapp komutunu çalıştırdığınızda, sync generator:

1. Uygulamanızın bağımlılık grafiğini analiz eder 2. Her bağımlılık için @source direktifleri oluşturur 3. styles.css dosyanızı otomatik olarak günceller

Stil dosyanız yönetilen işaretleyiciler alır:

css

/ apps/demoapp/src/styles.css /
@import 'tailwindcss' source('./app');

/ nx-tailwind-sources:start /
@source "../../../libs/ui-design-system";
/ nx-tailwind-sources:end /

Yeni bir kütüphane bağımlılığı eklediğinizde, bir sonraki build veya serve komutu değişikliği algılar ve direktifleri otomatik olarak günceller.

Sync Generators Nasıl Çalışır?

Sync generators, belirli target'lardan (build veya serve gibi) önce çalışır ve oluşturulan dosyaların kaynak kodunuzla senkronize olup olmadığını kontrol eder. Bir şey senkronize değilse, Nx değişiklikleri uygulamanız için sizi uyarır.

Bu, Nx'in TypeScript proje referanslarını bağımlılık grafiğinizle senkronize tutmak için kullandığı mekanizmanın aynısıdır. Sync Generators dokümanlarında daha fazla bilgi edinin.

Alternatif: PostCSS Plugin Yaklaşımı

Topluluk üyesi Poul Hansen, sync generator'lar yerine build zamanında benzer otomasyon sağlayan bir PostCSS eklentisi oluşturdu.

Bu yaklaşım, PostCSS işleme aşamasında kaynakları dinamik olarak enjekte etmek için @nx/angular/tailwind'den createGlobPatternsForDependencies fonksiyonunu kullanır. Uygulama detayları için gist'e göz atın.

Tailwind v4'ün basitleştirilmiş kurulumu tek başına projeler için harika, ancak monorepo'larda dikkat gerektirir. Angular'ın PostCSS tabanlı kurulumu ile varsayılan davranış tüm workspace'inizi tarar ve potansiyel olarak production CSS'inizi kullanılmayan sınıflarla şişirebilir.

source() kısıtlamalarını @source direktifleri ile birleştirerek ve bakımlarını Nx Sync Generators aracılığıyla otomatikleştirerek, manuel bakım olmadan optimal CSS çıktısı elde edersiniz.

Önemli Çıkarımlar

Monorepo'larda varsayılan davranış: PostCSS eklentisi tüm workspace'i tarar, bu da gereksiz CSS'e yol açabilir
source() ile kısıtlama: Otomatik taramayı uygulama dizininizle sınırlayın
@source direktifleri: Kütüphane bağımlılıklarını açıkça ekleyin
Otomasyon: Nx Sync Generators ile manuel bakımdan kaçının
Alternatifler: PostCSS plugin yaklaşımı da mevcut

Tailwind v4, Angular ve Nx monorepo kombinasyonu güçlü bir geliştirme deneyimi sunar. Doğru yapılandırma ile hem geliştirici deneyiminden hem de production performansından en iyi şekilde yararlanabilirsiniz.