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>