İçindekiler

  1. Theme.css Kullanımı
  2. Genel Bilgiler
  3. @layer Kullanımı
    1. 1. @layer base
    2. 2. @layer components
    3. 3. @layer utilities
  4. Özel Medya Sorguları
  5. Düz Css Kullanımı
    1. Tailwind harici kullanım
    2. JS İle Sonradan Eklenen Classlar

Theme.css Kullanımı

Bu dokü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>