Eski CSS ile Birlikte Çalışma
Tailwind’i eski CSS veya başka bir çerçeve içeren mevcut bir projeye entegre edin; özgüllük çakışmalarını ve aşamalı geçişi yönetin.
Eski CSS ile Birlikte Çalışma, CoddyKit'te ücretsiz bir Tailwind CSS Academy dersidir. Bu, 4 dersinin 2. 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.
Birlikte Çalışma Zorluğu
Gerçek dünyadaki birçok proje, mevcut tüm stilleri aynı anda yeniden yazamaz. Bootstrap, kurum içinde geliştirilmiş bir CSS çerçevesi veya binlerce satır düz CSS kullanan bir projeyi devralabilirsiniz. Böyle bir projeye Tailwind eklemek, iki sistemin birbirini bozmadan birlikte çalışması gerektiği anlamına gelir. Sorunsuz ve aşamalı bir geçiş için özgüllüğü, sınıf adı çakışmalarını ve katman sıralamasını anlamak çok önemlidir.
CSS Özgüllük Çakışmalarını Anlama
Tailwind yardımcı sınıfları, 0,1,0 özgüllüğüne sahip tek sınıflı seçiciler kullanır. Eski CSS ise çoğu zaman daha yüksek özgüllüğe sahip .header .nav a gibi alt öğe seçicileri kullanır. Her iki stil de aynı öğeyi hedeflediğinde, kaynak sırasından bağımsız olarak daha yüksek özgüllüğe sahip eski kural kazanır. Bu nedenle eski bir alt öğe kuralı onu geçersiz kılıyorsa text-blue-600 gibi bir Tailwind yardımcı sınıfı etkisiz görünebilir.
/* Legacy CSS — specificity 0,2,1 */
.header .nav a {
color: #333333;
}
/* Tailwind utility — specificity 0,1,0 */
/* .text-blue-600 { color: #2563eb; } */
<!-- This Tailwind class LOSES because legacy has higher specificity -->
<header class="header">
<nav class="nav">
<a class="text-blue-600">Will still be #333333</a>
</nav>
</header>Özgüllüğü Yönetmek için @layer Kullanma
Tailwind'in @layer yönergesi, kuralları CSS Basamak Katmanları içine yerleştirir. @layer base ve @layer utilities içindeki stiller, yardımcı sınıf aynı özgüllüğe sahip olsa bile katman dışındaki (eski) stillerden daha düşük önceliğe sahiptir. Bu, !important kullanmaya gerek kalmadan eski stillerin doğal olarak kazanacağı anlamına gelir. Buna karşılık @layer utilities aracılığıyla eklediğiniz yeni Tailwind yardımcı sınıfları mevcut CSS'yi yanlışlıkla bozmaz.
/*
Order of precedence (highest to lowest):
1. !important declarations
2. Unlayered styles (legacy CSS)
3. @layer utilities
4. @layer components
5. @layer base
Legacy CSS in a separate file wins by default over Tailwind layers.
*/
/* legacy.css — unlayered, wins over Tailwind layers */
.btn { background-color: navy; }
/* tailwind output — in @layer components, loses to legacy */
/* @layer components { .btn { ... } } */Tailwind'i Eski CSS ile Birlikte İçe Aktarma
Tailwind'i ve eski CSS'yi doğru sırayla içe aktarın. Ana giriş dosyasında önce Tailwind çıktısını (PostCSS aracılığıyla), ardından eski CSS'yi içe aktarın. Böylece stil sayfasında eski stiller Tailwind çıktısından sonra tanımlanır ve özgüllük eşit olduğunda önceliği onlar alır. Tailwind'in eski stilleri geçersiz kılmasını istemiyorsanız eski CSS'yi asla Tailwind'den önce içe aktarmayın.
/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Import legacy styles AFTER Tailwind so they can override when needed */
@import './legacy/reset.css';
@import './legacy/typography.css';
@import './legacy/components.css';
/* New component styles using @apply where needed */
@import './components.css';Sınıf Adı Çakışmalarından Kaçınma
Tailwind'in yardımcı sınıf adları tipik eski sınıf adlarıyla nadiren çakışır, ancak çakışmalar meydana gelebilir. Yaygın bir örnek, eski .container sınıfının Tailwind'in .container yardımcı sınıfıyla çakışmasıdır. Önek kullanmak resmî çözümdür: tailwind.config.js içinde bir önek ekleyerek tüm Tailwind sınıflarını tw-flex, tw-bg-blue-500 gibi adlara dönüştürün ve eski stillerle ad çakışmasını tamamen önleyin.
// tailwind.config.js
module.exports = {
prefix: 'tw-', // All Tailwind classes prefixed with 'tw-'
content: ['./src/**/*.{html,js}'],
theme: { extend: {} },
};
<!-- In HTML: use tw- prefix on all Tailwind classes -->
<div class="tw-flex tw-items-center tw-gap-4 tw-bg-blue-500">
<!-- Legacy classes work normally alongside -->
<div class="legacy-card header-title tw-text-white">
</div>Aşamalı Geçiş Stratejisi
Bileşenleri tamamen yeniden yazmaya çalışmak yerine, her seferinde bir bileşeni taşıyın. Düşük riskli bir bileşen seçin — örneğin yeni bir düğme veya rozet — ve stilini tamamen Tailwind ile oluşturun. Çevresindeki eski kodu değiştirmeyin. Bu yaklaşımın kararlı olduğu kanıtlandıktan sonra eski bileşenleri teker teker ve kademeli olarak değiştirin. Böylece olası sorunların etkisi sınırlanır ve taşıma süreci boyunca projenin dağıtılabilir durumda kalması sağlanır.
<!-- BEFORE: legacy button -->
<button class="btn btn-primary btn-lg">Save</button>
<!-- AFTER: new Tailwind button (legacy .btn class removed) -->
<button class="rounded-lg bg-blue-600 px-6 py-3 font-semibold text-white
transition hover:bg-blue-700">Save</button>
<!-- DURING MIGRATION: both can coexist temporarily -->
<button class="btn btn-primary tw-ring-2 tw-ring-offset-2">Save</button>Tailwind Preflight'ı Devre Dışı Bırakma
Tailwind Preflight'ı (normalize.css temel alınarak oluşturulmuş bir CSS sıfırlaması), tarayıcı varsayılanlarını kapsamlı biçimde sıfırlar. Eski bir projede bu sıfırlamalar mevcut stilleri bozabilir; başlık boyutlarını kaldırabilir, liste stillerini temizleyebilir ve kenar boşluklarını birleştirebilir. Tüm Tailwind yardımcı sınıflarını kullanmaya devam ederken eski tarayıcı varsayılanlarını korumak için yapılandırmada Preflight'ı devre dışı bırakabilirsiniz.
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false, // Disable the CSS reset
},
content: ['./src/**/*.{html,js}'],
theme: { extend: {} },
plugins: [],
};Tailwind Kapsamını Seçici Olarak Belirleme
Eski bir sayfanın yalnızca bir bölümünde Tailwind yardımcı sınıflarını kullanmanız gerekiyorsa Tailwind çıktısını belirli bir CSS seçicisiyle sınırlayabilirsiniz. Üç @tailwind yönergesini PostCSS kullanarak bir seçici kapsamının içine yerleştirin. Oluşturulan tüm yardımcı sınıflar bu seçicinin altında iç içe yerleştirilir ve böylece eski sayfanın geri kalanına sızmaları önlenir. Bu, mümkün olan en hassas entegrasyondur.
/* Using postcss-scopify or similar — scope Tailwind to .tw-scope */
.tw-scope {
@tailwind base;
@tailwind components;
@tailwind utilities;
}
<!-- In HTML: only elements inside .tw-scope use Tailwind -->
<div class="tw-scope">
<div class="flex items-center gap-4 bg-blue-500">
<!-- Tailwind works here -->
</div>
</div>
<!-- Outside .tw-scope: legacy CSS only -->
<div class="old-header"><!-- legacy --></div>Her Taşıma Adımından Sonra Test Etme
Her bileşeni taşıdıktan sonra hiçbir şeyin bozulmadığını doğrulamak için görsel regresyon testi çalıştırın. Playwright'ın ekran görüntüsü karşılaştırması veya Chromatic gibi tarayıcı tabanlı araçlar, istenmeyen stil değişikliklerini otomatik olarak yakalar. En azından, sonraki taşıma hedefine geçmeden önce taşınan bileşeni desteklenen tüm tarayıcılarda ve önemli kırılma noktalarında manuel olarak inceleyin. Uzun süren bir taşıma sürecinde otomatik testlerin getirisi büyüktür.
// Playwright visual regression example
import { test, expect } from '@playwright/test';
test('button renders correctly', async ({ page }) => {
await page.goto('/components/button');
await expect(page.locator('.btn-primary')).toHaveScreenshot('button.png');
});
// Run comparison:
npx playwright test --update-snapshots // First run: capture baseline
npx playwright test // Subsequent: compareEski CSS'yi Güvenle Kaldırma
Bir bileşen Tailwind'e tamamen taşındığında eski CSS kurallarını silin. Belirli bir sayfada hiç kullanılmayan CSS kurallarını belirlemek için tarayıcı DevTools'un Coverage sekmesini kullanın; bu, kuralların kullanılmadığına dair güçlü bir kanıttır. PurgeCSS ayrıca eski dosyanızdaki hiçbir içerikle eşleşmeyen seçicileri raporlayabilir ve kullanılmayan CSS'nin güvenle kaldırılmasına yardımcı olabilir.
# Check CSS coverage in Chrome DevTools:
# 1. Open DevTools > Coverage tab (Ctrl+Shift+P → 'Show Coverage')
# 2. Start recording, interact with the page
# 3. Red bars indicate unused CSS rules — safe to delete if confirmed
# PurgeCSS analysis:
npx purgecss --css legacy.css --content 'src/**/*.html'
# Rules absent from the output were matched — keep
# Rules still in output were never matched — remove candidatesTaşıma İlerlemesini İletişimle Paylaşma
Ekip projelerinde taşıma ilerlemesini görünür biçimde takip edin. Her bileşeni ve durumunu (Başlanmadı, Devam ediyor, Taşındı, Eski kod silindi) listeleyen basit bir elektronik tablo veya proje panosu, ekibin koordinasyonuna yardımcı olur. Hâlâ kullanılan eski sınıfları, ileride silinmek üzere işaretleyen bir yorumla belgeleyin; böylece bu sınıfların yanlışlıkla yeniden kullanılmaları veya yeni özellikler tarafından bağımlılık olarak alınmaları önlenir.
/* MIGRATION STATUS: IN PROGRESS
Component: .header-nav
Tailwind replacement: planned in Sprint 12
Owner: @alice
Note: Used in _header.html and email-template.html
*/
.header-nav {
display: flex;
align-items: center;
gap: 1rem;
}Hızlı Kontrol
Bu dersteki Tailwind CSS Mastery kavramlarını anlayıp anlamadığınızı test edin.
Ders Özeti
Bu derste şunları öğrendiniz: geçiş katmanlarını kullanarak Tailwind ile eski CSS arasındaki özgüllük çakışmalarını yönetmeyi, mevcut stilleri bozmamak veya onlarla çakışmamak için Preflight'ı devre dışı bırakmayı ve bir ön ek eklemeyi ve görsel regresyon testleriyle ilerlemeyi takip ederek bileşenleri aşamalı olarak taşımayı. Sırada Tailwind ile birlikte CSS Modules kullanımını inceleyeceğiz.
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
“Eski CSS ile Birlikte Çalışma” dersi ücretsiz mi?
Evet — “Eski CSS ile Birlikte Çalışma” 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.
“Eski CSS ile Birlikte Çalışma” dersinde ne öğreneceğim?
Tailwind’i eski CSS veya başka bir çerçeve içeren mevcut bir projeye entegre edin; özgüllük çakışmalarını ve aşamalı geçişi 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 2. dersidir.
“Eski CSS ile Birlikte Çalışma” 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