Tailwind CSS

v4'te tailwind.config.js diye bir dosya yok

Tailwind CSS v4 yapılandırmayı JavaScript'ten CSS'e taşıdı. Tema değişkenleri artık @theme bloğunda tanımlanıyor, JS yapılandırma dosyaları hâlâ destekleniyor ama otomatik olarak bulunmuyor; kullanacaksanız @config ile elle göstermeniz gerekiyor (bkz. Tailwind CSS, Upgrade guide).

Bu sitenin gerçek giriş dosyası, resources/css/app.css:

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}

Derleme @tailwindcss/vite eklentisiyle yapılıyor; v4 ile Vite projelerinde önerilen yol PostCSS eklentisi değil, bu özel eklenti.

Blade projelerinde sınıfların kaybolmasının sebebi neredeyse her zaman .gitignore

v4'ün otomatik kaynak taraması şu dosyaları bilerek atlar: .gitignore içindekiler, node_modules, ikili dosyalar, CSS dosyaları ve paket yöneticisi kilit dosyaları (bkz. Tailwind CSS, Detecting classes in source files).

Laravel'de bu kuralın iki doğrudan sonucu var ve ikisi de yeni kurulumlarda kafa karıştırır:

1. vendor/ sürüm kontrolüne girmez. Laravel'in kendi sayfalama görünümleri oradadır; taranmazsa sayfalama düğmeleri stilsiz çıkar.
2. storage/framework/views/ sürüm kontrolüne girmez. Derlenmiş Blade dosyaları oradadır; bazı koşullu sınıflar yalnızca derlenmiş çıktıda görünür.

Yukarıdaki @source satırları tam olarak bu iki boşluğu kapatmak için duruyor. Üretim derlemesinde eksik çıkan bir sınıf gördüğünüzde önce bu dosyanın .gitignore'da olup olmadığına bakın; hata ayıklama süresini dakikalara indirir.

Sınıf adını çalışma zamanında birleştirmeyin. "bg-" . $renk . "-500" gibi bir ifade kaynak taramasında görünmez. Tam sınıf adlarını yazın veya @source inline(...) ile açıkça üretilmesini isteyin.

v4'ün tarayıcı tabanı bir iş kararıdır, teknik detay değil

Tailwind v4 "Safari 16.4, Chrome 111 ve Firefox 128 için tasarlandı" ve @property ile color-mix() gibi modern CSS özelliklerine bağımlı olduğu için eski tarayıcılarda çalışmaz. Bu, v4'ün en sert kısıtı.

Kararı analytics verinizle verin, tahminle değil. Ziyaretçilerinizin anlamlı bir kısmı bu eşiğin altındaysa (kurumsal içi uygulamalarda ve kamu erişimli sitelerde görülür) v4'e geçmeyin, v3.4 hattında kalın. Trafik eşiğin üstündeyse geçişin önündeki engel isim değişiklikleridir:

Tehlikeli olanlar shadow ve ring gibi sessizce kayan adlar. Kod derlenir, sayfa açılır, gölge bir tık farklıdır ve kimse fark etmez. Geçişten sonra görsel karşılaştırma turu yapın.

Aynı depoda v3 ve v4 yan yana durabilir

Bu monorepo'da ana site Tailwind v4 ile, ajans paneli ise Tailwind 3.4.17 ile derleniyor; panelin kendi tailwind.config.ts, postcss.config.mjs ve autoprefixer kurulumu var. Bunu bilinçli bıraktık: panel bir Next.js uygulaması ve sürüm yükseltmesi ana sitenin yayın takvimine bağlanmamalı.

Çok paketli bir depoda uygulanabilir kural: yükseltmeyi paket paket yapın, deponun tamamı için tek seferde değil. Tek istisna, paketler arasında paylaşılan bir bileşen kütüphanesi varsa; o durumda kütüphane ile onu kullanan uygulamalar aynı ana sürümde olmalıdır.

Geçiş eforu tarafında: orta ölçekli bir arayüzün v3'ten v4'e taşınması, görsel regresyon turu dahil, tipik olarak 3-8 adam-gün arasında bir iştir ve bunu ayrı bir kalem olarak planlamak gerekir. Adam-gün birim fiyatımız 300-400 USD.

İlgili sayfalar: UI/UX tasarım hizmeti, React geliştirme, Next.js geliştirme, teknik borç temizliği, tüm teknolojiler.