Theme.css Kullanımı

Bu dökümantasyon, theme.css dosyasındaki yapıların ve Tailwind CSS özelliklerinin kullanımını açıklamaktadır.

En çok tercih edilen kütüphanelerden birisi olan tailwind kütüphanesi kullanıldığından dolayı https://tailwindcss.com/docs/installation/using-vite adresi incelenerek tailwind hakkında detaylı bilgi sahibi olunabilir.

---

Genel Bilgiler

• Amaç: Bu dosya, temaya özel CSS yazmak ve mevcut CSS’yi geçersiz kılmak için kullanılır.
• Yapı: Tailwind CSS’in @layer özelliği kullanılarak base, components ve utilities katmanları tanımlanmıştır.

---

@layer Kullanımı

1. @layer base

• Amaç: Temel stil tanımlamaları yapılır.
• Örnek:

  @layer base {
      :root {
         --radius: 0px;
          --container: 1170px;
          --form-radius: var(--radius); 
      }
      body {
          background-color: #ffffff;
      }
  }

---

2. @layer components

• Amaç: Bileşenler için özel stiller tanımlanır.

  • Başlık ve alt başlık stilleri.

    .block-title {
        .title {
            @apply font-semibold text-xl lg:text-2xl;
        }
        .subtitle {
            @apply text-gray-500 text-xs lg:text-sm font-light;
        }
    }
    

---

3. @layer utilities

• Amaç: Yardımcı sınıflar tanımlanır.
  • Checkbox için özel arka plan maskesi. Genel olarak bu alan çok fazla kullanılmaz. Site genelindeki checboxların değişimi için kullanılabilir.

    .bg-checkbox {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
        -webkit-mask-size: contain;
        mask-size: contain;
    }

---

Özel Medya Sorguları

• Amaç: Farklı ekranlar için özel düzenlemeler yapılır.
• Örnek:

  @media (min-width: theme('screens.2xl') ) {

  }
   

  @media (min-width: 768px ) {

  }

---

Düz Css Kullanımı

Tailwind harici kullanım

• Amaç: @layer kullanmadan da kulanım sağlanabilir. Eğer layer dışına bir css yazılırsa daha baskın olacağı için @layer içine yazılana göre daha öncelikli haldedir.

• Örnek:

 .block.title{
  color:#dddddd;
  font-size:16px;
 }

---

JS İle Sonradan Eklenen Classlar

Safelist’e custom- ile başlayan classlar eklenmiştir. Bu yüzden sonradan DOM’a müdahale ile class eklenmesi gerekirse custom- ile başlaması tavsiye edilir.

<div class="custom-"></div>

---