Ders bittikten sonra örneği mobilde görüntülediğimde dropdown'ın açılmadığını fark ettim, belki :focus-within desteğindendir emin değilim ama önemli değil birkaç ayarla çalışır hale gelir. Ek olarak hala eski safari versiyonlarında scroll olayı sıkıntılı olduğu için 1-2 utility eklemek durumunda kaldım düzgün scroll olabilsin diye github'dan bakabilirsiniz yaptığım değişikliklere commit geçmişinden. Başka bir seride görüşmek üzere dostlar, kanala destek olmak için KATIL'abilir ya da prototurk.com daki reklamlara günde bir kere ne yapacağınızı biliyorsunuz :) Kolay gelsin. github: github.com/tayfunerbilen/tailwindcss-ornegi demo: tailwind-ornek.netlify.app/
Tailwindcss mobil öncelikli olduğu için önce mobile versiyonu yapıp sonrasında diğer ekran boyutlarına göre çalışma yaparsanız daha az zorlanırsınız. xl: md: gibi break pointsler kullanmadan verdiğiniz tüm kodlar mobile öncelikli çalışır. Örneğin grid yapısı için şu yolu kullanmanız lazım. grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gibi gitmeniz gerekiyor. sm: için tanımlama yapmanıza gerek kalmıyor. Çünkü grid-cols-2 direk devreye girecek.
Mesela o calc olayını scss ile de yapmak mümkün ama bir sürü css sınıfı oluşturuyor. Lakin burada her daim sadece kullandıklarına göre build alıyor. Bende sevdim gibi. Bakalım sitenin yeni temasında kullanacağım.
Windows10 renkler bölümünde yer alan koyu temayı seçtiğimde bazı siteler otomatik olarak koyu tema aktif oluyor. (youtube, github gibi). Konuyla ilgili bişeyler bulur ve video çekersen süper olur 😁
tailwind'de onu yapmak için tailwind.config.js'de dark: 'media' diye belirtmen yeterli. ayrıca kanalda da bununla ilgili içeriğim var. prefers-color-scheme ile yapılıyor css'de, bakmak istersen: ruclips.net/video/sWrYl6lQpMA/видео.html
Abi sinirden evde bagiriyorum bu card lar var ya bi turlu bende overflow-x ile scroll olmadi section hepsi tasiyor grid veriyorum normale donuyor flex veriyorum section boka donuyor cozemedim artik yeniden kodliyicam basit bir sey benim az daha aglayacak sinira getirdi derdimide kimseye anlatamiyorum kimse anlamiyor deriliyorum
Hocam 5:39'da şurayı da seçtim derken yaptığınız, imleci farklı satırlara manuel tıklama ile koyma işlemini hangi tuş kombinasyonlarıyla yapıyorsunuz ?
Hocam emeğinize sağlık, gayet öğretici bir seri olmuş. Kafama takılan bir konu var; kendi özel css classlarımızı config dosyasının içinde mi yazmamız gerekiyor yoksa base, components, utilities şeklinde kullanılan css dosyasının içinde mi ? Aralarındaki farkı çok oturtamadım açıkçası
Hocam hazır tailwindcss ve alpine.js anlatmışken ikisi beraber birkaç örnek yapabilir misin? Genelde ikisinin kullanıldığı örnekler görüyorum internette, ilgilenen arkadaşlar için daha iyi olur bence.
tailwind dark modu en üstteki etiket'in class'ı dark mı değil mi ona bakıyor, eğer en üst etiketine dark class'ı eklersen ona göre dark kodların çalışıyor. react tarafında ise bu class'ı ekletme, dark mode mu olacak light mode mu olacak bunu saklama işlemi yapıyorsun, seçilen temaya göre en üst etiketine class ekletiyorsun, yani fark olması için aynı şeyi yapmaları gerekir ama farklı şeyler yapıyorlar :)
if(localStorage.getItem('dark')){ document.documentElement.classList.add('dark'); } Yazdığınızda sizin sayfanızda açık kapalı mod sayfa yüklendiğinde bile düzgün çalışmış ancak aynı kodları yazmamıza rağmen bende çalışmadı. Extra olarak : else { document.documentElement.classList.remove('dark'); }; Yazmam gerekti. Bu kodu da yazınca sizinki gibi çalıştı. Eğer benzer hatayı alan arkadaşlar olursa bu kodla çözebilirler.
Ders bittikten sonra örneği mobilde görüntülediğimde dropdown'ın açılmadığını fark ettim, belki :focus-within desteğindendir emin değilim ama önemli değil birkaç ayarla çalışır hale gelir. Ek olarak hala eski safari versiyonlarında scroll olayı sıkıntılı olduğu için 1-2 utility eklemek durumunda kaldım düzgün scroll olabilsin diye github'dan bakabilirsiniz yaptığım değişikliklere commit geçmişinden.
Başka bir seride görüşmek üzere dostlar, kanala destek olmak için KATIL'abilir ya da prototurk.com daki reklamlara günde bir kere ne yapacağınızı biliyorsunuz :) Kolay gelsin.
github: github.com/tayfunerbilen/tailwindcss-ornegi
demo: tailwind-ornek.netlify.app/
Tailwind CSS dark modunu anlatan ilk Türkçe video sanırım bu oldu, daha önce aradım bulamadım ben belki göremedim ama çok aramıştım eline sağlık 👍
Tailwindcss mobil öncelikli olduğu için önce mobile versiyonu yapıp sonrasında diğer ekran boyutlarına göre çalışma yaparsanız daha az zorlanırsınız. xl: md: gibi break pointsler kullanmadan verdiğiniz tüm kodlar mobile öncelikli çalışır. Örneğin grid yapısı için şu yolu kullanmanız lazım. grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gibi gitmeniz gerekiyor. sm: için tanımlama yapmanıza gerek kalmıyor. Çünkü grid-cols-2 direk devreye girecek.
Mesela o calc olayını scss ile de yapmak mümkün ama bir sürü css sınıfı oluşturuyor. Lakin burada her daim sadece kullandıklarına göre build alıyor. Bende sevdim gibi. Bakalım sitenin yeni temasında kullanacağım.
Ben bie daha css yazmiyicam bu nasil mukemmel bir şey ya hocam sizede cok teşekkürler cok samimi anlatiyirusnuz
Eline koluna sağlık css çok fazla bilmiyorum ama tailwindcss yazasım ve kendi sitemi kodlayasım geldi.
tailwindi cox severim. frontend daily videolari da onunla gelirse cok guzel olur
Güzel oldu. Bitane basit forecast UI'ını tailwind ile yaptım baya keyifli oldu :)
tailwindi bu kadar güzel anlatan henüz bulamadım...
Teşekkürler
Windows10 renkler bölümünde yer alan koyu temayı seçtiğimde bazı siteler otomatik olarak koyu tema aktif oluyor. (youtube, github gibi). Konuyla ilgili bişeyler bulur ve video çekersen süper olur 😁
tailwind'de onu yapmak için tailwind.config.js'de dark: 'media' diye belirtmen yeterli.
ayrıca kanalda da bununla ilgili içeriğim var. prefers-color-scheme ile yapılıyor css'de, bakmak istersen: ruclips.net/video/sWrYl6lQpMA/видео.html
Eline sağlık abii eyvallah
Abi sinirden evde bagiriyorum bu card lar var ya bi turlu bende overflow-x ile scroll olmadi section hepsi tasiyor grid veriyorum normale donuyor flex veriyorum section boka donuyor cozemedim artik yeniden kodliyicam basit bir sey benim az daha aglayacak sinira getirdi derdimide kimseye anlatamiyorum kimse anlamiyor deriliyorum
Hocam 5:39'da şurayı da seçtim derken yaptığınız, imleci farklı satırlara manuel tıklama ile koyma işlemini hangi tuş kombinasyonlarıyla yapıyorsunuz ?
mac'de option tuşuna basılı tutup ilgili yerlere tıklıyorum muhtemelen windows'da alt tuşuna basıp yapıyoruzdur
Hocam emeğinize sağlık, gayet öğretici bir seri olmuş. Kafama takılan bir konu var; kendi özel css classlarımızı config dosyasının içinde mi yazmamız gerekiyor yoksa base, components, utilities şeklinde kullanılan css dosyasının içinde mi ? Aralarındaki farkı çok oturtamadım açıkçası
özel class'ları css dosyası içinde (tailwind'in classlarını kullanarak), özel tanımları tailwind config dosyası içinde yazman lazım.
Hocam hazır tailwindcss ve alpine.js anlatmışken ikisi beraber birkaç örnek yapabilir misin? Genelde ikisinin kullanıldığı örnekler görüyorum internette, ilgilenen arkadaşlar için daha iyi olur bence.
51:48 de ki kod
plugins: [
plugin(function({ addUtilities, theme, e }) {
const calcUtilities = _.map(theme('spacing'), (value, key) => {
return {
[`.${e(`calc-h-full-${key}`)}`]: {
height: `calc(100% - ${value})`
},
[`.${e(`calc-w-full-${key}`)}`]: {
width: `calc(100% - ${value})`
}
}
})
addUtilities(calcUtilities, {
variants: ['responsive', 'hover'],
})
})
],
}
tailwind ile dark mode yapmayla react ile context api kullanarak dark mode yapmanın bi fark var mı?
tailwind dark modu en üstteki etiket'in class'ı dark mı değil mi ona bakıyor, eğer en üst etiketine dark class'ı eklersen ona göre dark kodların çalışıyor. react tarafında ise bu class'ı ekletme, dark mode mu olacak light mode mu olacak bunu saklama işlemi yapıyorsun, seçilen temaya göre en üst etiketine class ekletiyorsun, yani fark olması için aynı şeyi yapmaları gerekir ama farklı şeyler yapıyorlar :)
Anladım çok teşekkür ederim 🙏
Abi prototurk bu versiyon daha iyi gibi
Nedense css den daha karışık geldi...
Ben bidaha CSS kullanmam kardeş
Renkler bile aşırı güzel!! Favori tonum #0055ff idi. şimdi bg-blue-600!!!
if(localStorage.getItem('dark')){
document.documentElement.classList.add('dark');
}
Yazdığınızda sizin sayfanızda açık kapalı mod sayfa yüklendiğinde bile düzgün çalışmış ancak aynı kodları yazmamıza rağmen bende çalışmadı. Extra olarak :
else {
document.documentElement.classList.remove('dark');
};
Yazmam gerekti. Bu kodu da yazınca sizinki gibi çalıştı. Eğer benzer hatayı alan arkadaşlar olursa bu kodla çözebilirler.