# NativeWind Nedir? Expo'da Tailwind Benzeri Stil Kullanımı

> Web'deki Tailwind çalışma biçimini React Native'e taşımak isteyenler için NativeWind güçlü bir seçenek. Fakat her projede şart değil.

Yayıncı: FaturaTik
Son gözden geçirme: 2026-09-05
Kanonik HTML: https://www.faturatik.net/tr/blog/nativewind-expo-kurulumu

React Native'de web tarayıcısındaki CSS kullanılmaz. Buna rağmen Tailwind'in utility class yaklaşımını seven ekipler için NativeWind benzer bir geliştirme deneyimi sunar.

NativeWind resmi dokümantasyonunda Expo ve framework-less React Native projelerini destekler; Expo tarafında kurulum akışı daha doğrudan olabilir.

## NativeWind neden kullanılır?

Klasik React Native:

```tsx
<View style={styles.container}>
  <Text style={styles.title}>Merhaba</Text>
</View>
```

Utility yaklaşımı:

```tsx
<View className="flex-1 items-center justify-center">
  <Text className="text-xl font-semibold">Merhaba</Text>
</View>
```

Özellikle Tailwind geçmişi olan ekipler için ikinci yaklaşım daha hızlı okunabilir.

## Her projede gerekli mi?

Hayır.

NativeWind eklemek mantıklı olabilir eğer:

- ekip Tailwind convention'larına alışkınsa,
- çok sayıda utility style kullanılıyorsa,
- tasarım sistemi class tabanlı kurulacaksa.

Basit bir uygulamada React Native StyleSheet de yeterlidir.

## AI coding ile neden uyumlu?

AI modelleri Tailwind class pattern'lerini iyi tanır. Bu yüzden UI prototipleme oldukça hızlı olabilir.

Ancak AI'a şu kısıtı vermek faydalıdır:

```text
yalnız projede desteklenen class'ları kullan
mevcut spacing ve color token'larını bozma
inline rastgele hex renk üretme
```

Aksi halde ekranlar arasında görsel tutarsızlık oluşur.

## Tasarım token'ı kullanın

Her componentte bağımsız renk kararları vermek yerine tasarım token'ları belirleyin.

Örneğin:

```text
background
surface
text
muted
border
accent
danger
```

Bu yaklaşım light/dark tema ve marka değişikliklerini kolaylaştırır.

## Component sistemi daha önemlidir

NativeWind hızlı stil yazdırır fakat component mimarisinin yerini tutmaz.

Örneğin:

```text
Button
Card
Input
EmptyState
Badge
Modal
```

gibi ortak componentler tanımlamak, her ekranda utility class kopyalamaktan daha sürdürülebilirdir.

## Sonuç

NativeWind'i “React Native'de Tailwind çalıştırmak” şeklinde basitleştirmek yerine utility-first stil katmanı olarak düşünmek daha doğrudur.

Ekip bu çalışma modelini seviyorsa Expo projelerinde geliştirme hızını artırabilir. Sevmiyorsa StyleSheet'ten geçmek için tek başına güçlü bir ürün nedeni yoktur.


## Bilgilendirme

Bu içerik genel bilgilendirme amaçlıdır. Üçüncü taraf ürünlerin özellikleri, fiyatları ve mağaza kuralları zaman içinde değişebilir; üretime geçmeden önce resmi dokümantasyonu kontrol edin.

## Sıkça sorulan sorular

### React Native'de Tailwind kullanılabilir mi?

Web Tailwind'i birebir çalışmaz; NativeWind gibi araçlar Tailwind benzeri utility class deneyimi sağlar.

### NativeWind Expo ile çalışır mı?

Evet. NativeWind dokümantasyonu Expo projeleri için kurulum akışı sunar.

### NativeWind kullanmak zorunlu mu?

Hayır. React Native StyleSheet veya farklı styling çözümleri de kullanılabilir.

## Kaynaklar

- [NativeWind — Installation](https://www.nativewind.dev/docs/getting-started/installation)

## İlgili rehberler

- [expo-ile-mobil-uygulama-yapma](https://www.faturatik.net/tr/blog/expo-ile-mobil-uygulama-yapma/index.md)
- [supabase-react-native-kurulumu](https://www.faturatik.net/tr/blog/supabase-react-native-kurulumu/index.md)
- [ai-ile-mobil-uygulama-nasil-yapilir](https://www.faturatik.net/tr/blog/ai-ile-mobil-uygulama-nasil-yapilir/index.md)