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ılarakbase
,components
veutilities
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>