TailwindCSS 4’e gelen yenilikler

TailwindCSS 4'e gelen yeni özellikler, TailwindCSS’i yazmamızı kolaylaştırıyor. Kod çakışmalarını ve çok kod yazmamızı engelliyor.

Ayrıca, artık yüksek performanslı yeni bir motor (engine) ile derlenecek. Tüm derlemelerde 5 kat hızlı olacak.

TailwindCSS v4 (Resim, I.)

1 — İlk başta en çok kullandığımız @tailwindcss utils yerine

@tailwind base;
@tailwind components;
@tailwind utilities;

bunu kullanıyoruz:

@import "tailwindcss";

2 — Sadece bunlarla sınırlı değil, tailwindcss.config.js ‘deki

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#4ade80',
      },
      spacing: {
        72: '18rem',
      },
    },
  },
};

tanımlama yerine artık her şey CSS’de tanımlanacak:

:root {
  --color-primary: #4ade80;
}

.button {
  @apply bg-[color:var(--color-primary)] text-white p-2 rounded;
}

3 — Artık, tailwindcss.config.js ‘de taratma için dosya yolu belirtmemize gerek yok, otomatik tarama yapıyor.

4- Artık stil yazımında not operatörü kullanabileceksiniz, örnek olarak:

<button class="bg-green-500 not-hover:bg-red-500 p-2">
  Hover olmadığı zaman kırmızı ol
</button>

5- Artık renk karıştırma fonksiyonu eklendi, color-mix() ile farklı renk kodlarıyla yeni bir renk elde edebilirsiniz:

<div class="bg-[color:color-mix(in srgb,red 50%,blue 50%)] text-white p-2">
  Renk karışımı: mor
</div>

6- container, özelliği getirildi:

<div class="container">
  <h1 class="text-2xl font-bold">Merhaba Dünya</h1>
  <p>Bu içerik container içinde ortalanır.</p>
</div>

7- Input validation ve Pointer özelliklerine ekleme:

<button class="pointer-hover:bg-blue-500 any-pointer-active:bg-red-500 p-2">
  Fare veya dokunmatik ile stil değişir
</button>

<input class="user-valid:border-green-500 user-invalid:border-red-500 p-2" 
 placeholder="Doğru/yanlış">

8- Yazı Gölgesi ve Mask özellikleri:

<div class="mask-image-[url('/mask.png')] p-4 bg-blue-500 text-white">
  Maske kullanımı
</div>

<p class="text-shadow-lg text-black">
  Shadowlu yazı
</p>

9- 3D ve transform yardımcılarının gelmesi:

<div class="rotate-45 rotate-x-12 rotate-y-12 perspective-500 p-4 border">
  3D Döndürme örneği
</div>

10- Yönlü CSS:

<div class="margin-inline-start-4 margin-block-end-2 border p-2">
  Yönlü margin (ltr/rtl uyumlu)
</div>

inline-start → yazı yönünün başlangıcı (LTR: sol, RTL: sağ)
inline-end → yazı yönünün sonu (LTR: sağ, RTL: sol)
block-start → blok yönünün başlangıcı (genellikle üst)
block-end → blok yönünün sonu (genellikle alt)

padding-block-start Blok başına padding (üst)
padding-block-end Blok sonuna padding (alt)

11- @starting-style kullanmak:

Bu özellik bir element DOM’a render edildiği anda hangi stil ile başlayacağını belirlemene izin verir.

bg-gray-200 @starting-style:bg-red-600

En kullanışlı ve önemli özellikleri saydık.

Beğenmeyi unutmayın :)