Arama kutuları, web sitelerinde en çok kullanılan bileşenlerden biridir. Hem şık hem de işlevsel bir arama kutusu oluşturmak, kullanıcı deneyimi açısından önemlidir. Bu yazıda, TailwindCSS kullanarak modern bir arama kutusu oluşturmayı adım adım öğreneceğiz. Ayrıca, neden klasik CSS yerine TailwindCSS kullandığımızı da daha iyi anlayacağız.

Neden TailwindCSS Kullanıyoruz?

Klasik CSS ile stillendirme yaparken her bileşen için ayrı ayrı sınıflar tanımlamak gerekir. Ancak bu, zamanla karmaşık hale gelebilir. TailwindCSS, modüler ve esnek bir yapı sunarak bu süreci hızlandırır. Yardımcı sınıflar sayesinde doğrudan HTML içinde stil tanımlayabiliriz ve tekrar eden CSS kurallarından kaçınmış oluruz.

Şimdi gelin, adım adım arama kutumuzu oluşturalım!

HTML İskeletini Oluşturma: İlk olarak, bir HTML dosyası oluşturup temel yapıyı yazalım. Sayfamızın başına TailwindCSS'in CDN bağlantısını eklememiz gerekiyor:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Search Box</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-600 flex items-center justify-center h-screen">
</body>
</html>

Yukarıdaki kodlar:

  • Sayfanın mobil uyumlu olmasını sağlıyor.
  • TailwindCSS'i projeye dahil ediyor.
  • Sayfayı ortalamak için flex ve justify-center gibi sınıfları kullanıyor.

Arama Kutusunu Ekleyelim: Şimdi arama kutusunun temel HTML kodlarını yazalım:

İlgili Makaleler
Tailwind CSS v4 ile Özel Renkler (Config Dosyasını Düzenlemeden) 

<div class="relative w-60">
    <input type="text" placeholder="Search..." 
        class="w-full px-4 py-2 rounded-full focus:outline-none">
</div>

Bu kodlar:

  • relative w-60 → Kutuyu belirli bir genişlikte ve konumlandırılabilir yapıyor.
  • w-full → Genişliği tam kaplamasını sağlıyor.
  • px-4 py-2 → İç boşlukları (padding) ayarlıyor.
  • rounded-full → Köşeleri yuvarlak hale getiriyor.
  • focus:outline-none → Tıklanınca oluşan çerçeveyi kaldırıyor.

Arama Butonunu Ekleyelim: Şimdi arama butonunu ekleyelim ve sağ tarafa konumlandıralım:

<button class="absolute right-0 top-0 mt-1 mr-2 bg-orange-500 text-white p-2 rounded-full hover:bg-black">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 
        stroke="currentColor" class="w-4 h-4">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
            d="M14 5l7 7m0 0l-7 7m7-7H3" />
    </svg>
</button>

Bu kodlar:

  • absolute right-0 top-0 mt-1 mr-2 → Butonu sağ üst köşeye hizalıyor.
  • bg-orange-500 text-white → Arka plan rengini turuncu, yazıyı beyaz yapıyor.
  • rounded-full → Butonun köşelerini yuvarlak yapıyor.
  • hover:bg-black → Üzerine gelince siyah olmasını sağlıyor.

Butonu Arama Kutusunun İçine Alalım: Butonun input alanının içinde görünmesini istiyoruz. Bunu yapmak için, arama kutusunun üstüne bir div ekleyip konumlandırma yapalım:

İlgili Makaleler
Etkileşimli Alt Çizgi Animasyonu: HTML ve CSS 

<div class="relative w-60">
    <input type="text" placeholder="Search..." 
        class="w-full px-4 py-2 rounded-full focus:outline-none pr-10">
    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-orange-500 text-white p-2 rounded-full hover:bg-black">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 
            stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
    </button>
</div>

Buradaki yeni değişiklikler:

  • pr-10 → Sağ tarafta butona yer açtık.
  • absolute right-2 top-1/2 transform -translate-y-1/2 → Butonu tam ortaladık.

Kullanıcı Deneyimini Artıralım: Şimdi kullanıcı deneyimini artırmak için bazı iyileştirmeler yapalım:

  • Hover efekti ile butonun rengi değişmeli.
  • Placeholder silinince butonun aktif olması sağlanabilir.
  • Gölgelendirme ekleyerek kutuyu daha modern hale getirebiliriz.

Bunun için shadow ve transition sınıflarını ekleyelim:

<div class="relative w-60">
    <input type="text" placeholder="Search..." 
        class="w-full px-4 py-2 rounded-full focus:outline-none pr-10 shadow-lg transition">
    <button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-orange-500 text-white p-2 rounded-full hover:bg-black transition">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" 
            stroke="currentColor" class="w-4 h-4">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                d="M14 5l7 7m0 0l-7 7m7-7H3" />
        </svg>
    </button>
</div>

Bu eklemelerle:

  • Gölge efekti (shadow-lg) kutuya modern bir görünüm kazandırdı.
  • Geçiş efekti (transition) ile renk değişimleri daha yumuşak oldu.

Bu yazıda TailwindCSS kullanarak modern, şık ve kullanıcı dostu bir arama kutusu oluşturduk. Basit bir HTML yapısıyla, CSS yazmadan doğrudan yardımcı sınıfları kullanarak hızlıca stil verdik. Artık projenizde, bu tekniği kullanarak responsive ve modern arama kutuları oluşturabilirsiniz.