Tailwind CSS -1 / Giriş (Kurulum, JIT, Purge, Örnek Kullanım)
HTML-код
- Опубликовано: 10 сен 2024
- Bu ders Tayfun Erbilen tarafından prototurk.com için hazırlanmıştır.
Kanala destek olmak için KATIL üzerinden size uygun seçeneği belirleyerek desteğinizi gösterebilirsiniz.
/ @prototurkcom
Yeni çıkardığım PHP Eğitim Setime gözatın!
udemy.com/php-...
-- Sosyal Hesaplarım;
/ erbilennet
/ prototurkcom
/ tayfunerbilen
/ prototurkcom
/ tayfunerbilen
Dersle ilgili etiketler:
tailwind css nedir?
tailwind css nasıl kullanılır?
tailwind css nasıl kurulur?
tailwind css JIT nedir?
tailwind css JIT ile derleme sürecini hızlandırma
tailwind css ile purge işlemi
tailwind css purge nedir?
Tailwind ile ilgili düşüncelerinizi yazmayı unutmayın. Ayrıca hatırlatmaya gerek var mı? Günde 1 kere :) seviliyorsunuz
Tam da bir proje için kullanacaktım bu seri bana çok yararlı olacaktır çok teşekkür ederim ellerinize sağlık hocam
Valla ilk görüşte hoş duruyor. Biraz alışkanlık kazanılması gerekiyor gibi duruyor sadece onun dışında mükemmel. Laravel eğitimi çekeceğim demiştiniz orada da kullanırsanız eğer pratik açısından bizim için çok iyi olabilir.
Uzun süre Bootstrap 4 kullandım ve gayet iyi bir araçtı fakat Tailwind css muhteşem birşey özgürlükle kolaylığı harmanlamışlar. Nasıl ki Javascriptin Jquery'si , Php'nin Laraveli varsa artık Css'in de Tailwind'i var.
Html in
@@twitchizle tailwind css frameworku
Daha önce belirten oldu mu bilmiyorum lakin, bu 3 videodan oluşan Tailwind-CSS dersleri için bir oynatma listesi oluşturabilir. Zira bu derslerinizi, başka bir dersinizde tamamen şansa bulmuş bulunmaktayım. İnanıyorum ki, bu sayede daha çok kişi bu dersleri daha kolay bir biçimde bulabilecektir.
2-3 aydır kullanıyorum. Oldukça kullanışlı olduğunu düşünüyorum. Senden de böyle bir seri gelmesi beni çok sevindirdi. Eline, ağzına sağlık abi 🤩
Şükür bu videoyu çekene, uzun zamandır bekliyordum, bugüne kadar kullandıklarımın en iyisi diyebilirim, ciddi anlamda hak ediyor mükemmel bir iş çıkartmışlar.
"Herkese merhaba arkadaşlar" bu sesi senden duymaya başlayalı 10 yıl, belki de fazla oluyor heralde. Old'lar beğensin :)
Bende bu 2 gündür tailwind classlarini inceliyordum, büyük ihtimal ile bootsrap terk edip tailwind kullanacam.
Ben şahsen çok sevdim. Video için de teşekkürler Tayfun hocam.
bu video ile bs bağımlılığımdan kurtulacağım. teşekkürler hocam.
Mükemmel bir anlatım Tayfun Hocam, devamı gelmeli.
Tailwind içeriği ararken karşıma çıktı eline sağlık
Bence çok güzel. JavaScript frameworklerinde farklı-farklı componentler için özellikle çok kullanışlı ola bilir
bence tailwind
Normalde hiç bootstrap gibi farklı araçlar kullanmadım düz scss yazmaktan keyif alıyorum ama tailwindin nedense farklı gelen bir tattlılığı var daha kapsamlı bir şeyler deneyip anlamak lazım
Tayfun hocam elinize sağlık yine merak ettiğim bir konuydu.
Tam da youtube'da tailwind'ı arama yapacaktım karşıma yeni videon geldi :D
Merhaba, Tailwinde yeni başladım . Bence çok başarılı ve zamanla çok seveceyimiz bir araç olacak. Sizede teşükkerler güzel anlatımınız için.😊
Aranan kan bulundu. Çok kıymetli bir konu. Eline sağlık 👍
Harikasın abi. Emeğine sağlık
çok başarılı bence, tailwindi daha çok kullanmamız gerekir
Tailwind çok iyu hocam
Anlatminiz çok daha iyi🙏
Bende 1 2 proje tailwind ile gelistirdim
Bence cok faydali
Abi serinin devamini bekliyorus
Devam et abi, içeriklerin çok iyi, teşekkür ederiz
Ellerine sağlık 🍩
Özellikle JIT ile gayet güzel :)
Ders için Teşekkürler
Gerçekten mükemmel bir video, çok teşekkürler.
3 aydır kullanıyorum. O zamandan beri tailwindciyim. Bence ölvülmesi gerekiyor 😂
Wow tamda beklediğim içerik) ellerine sağlık
merhaba tailwind kurulumunu yapamadım bir türlü, nodejs im de kurulu, farklı şekilde güncelini kendim de kurmayua çalıştım fakat olmuyor malesef yardım edebilcek varmı
Teşekkürler
sitemi bi sisteme oturtunca cidden tailwind kendisini cok iyi göstermeye başladı renkler ve küçük input ve button gibi componentleri hazırladım bence sisteme oturtunca tailwind'den iyisi yok bootstrap gibi çok sade tasarımlardan sıkıldık tek sıkıntı (JIT ile oldukca hızlanmıs olsada) typescript/Next.js/tailwind ve 25+ component bir araya gelince çok kasmaya başladı
Ooo yeni video gelmiş
Teşekkürler sayın hocam :)
Tailwind harika bir şey.
Eline sağlık başkan
Olduğu gibi yapıyorum ama class-lar çalışmıyor neden ola bilir?
harikasın hocam gerçekten mükemmel :)
abi intellisense ile otomatik öneriler çıkıyor ancak sende bir de ekstradan sağ tarafta preview çıkıyor, onu nasıl ekleyebilirim?
Merak edenler için güzel içerik
Junior'luk ile Tailwind'i sevme ile arasinda dogru oranti oldugunu dusunuyorum.
Teşekkürler hocam :)
abi devam etsin süper
Hocam ben şeyi merak ediyorum. Tailwind'i Linux Hostinglerde nasıl kullanabiliriz? Yani Linux Hosting de classları değiştirirken style dosyasının içeriklerinin değişmesini nasıl sağlayabiliriz?
development ortamında kullanacaksın tailwind'i. çıktıyı production ortamında kullanacaksın, yani gelişmelerini yine geliştirme ortamında yapmam gerekiyor. Ya da eğer daha önce kullandığın classlar var ise onları zaten ekleme yapmadan değiştirebilirsin sisteminde
guze bir şeye benziyor
Bu bana çokta gerekli ya da kullanışlı gibi gelmedi ben mi yanlış düşünüyorum ?
Tailwind son zamanlarda buram buram kulağıma çalışan css frameworküydü. Kullanmamıştım ama bu iyi oldu. Kullanabilir miyim? Emin değilim sonuçta alışmış kudurmuştan beterdir. Yıllardır Bootstrap kullanıyorum. Bootstrap'in grid sistemi çok güzel benzer özellikler burada varsa buna geçebilirim ama kesin bir şey söylemeyemem. Diğer videoları görememiz gerek :))
Iyi gunler , yorum siliniyor bir sebebi varmi
hocam frontend developer olmayı amaçlıyorum videoların gayeet kaliteli html videoların bitti şuan css videolarındayım ,iyice 1 ayda mantığını oturtmayı düşünüyoum,daha sonra ne öğrenmeliyim tavsiyelerin neler olur
javascript öğren, daha sonrada vue, react ya da angular öğrenebilirsin eğer front-end developer olmak istiyorsan
prototürk abi demiş zaten bence typescript vb. bak javascript'ten sonra static typing kullandığı için hoşuna gitcene eminim
Taaaaaaaze
Bir tek bana mı gereksiz bir şeymiş gibi geldi 😶 Ama video gayet açıklayıcı emeğine sağlık
Hocam peki sizce yeni başlayanlar için hangisini öğrenmesini ya da kullanmasını önerirsiniz? Tailwind bana daha iyi gibi geldi ama sizinde yorumunuzu merak ettim. :)
tailwind bütün şirketlerde kullanılıyor bootstrap çok nadir görürsün
Hocam peki nextjs için önce react mı öğrenmem gerekir sizce?@@sezaicebe9980
Bende VSCode Tailwind CSS IntelliSense çalışmıyor.
npm install tailwindcss ile paketi yükleyip dene bir de
@@PROTOTURKCOM çalıştı teşekkürler.
Ben en çok margin padding nasıl vericez onu merak ediyorum. Eline sağlık teşekkür ederiz.
padding icin p-deger margin icin m-deger
p-1 - her koseden 4px
p2 - her koseden 8px
4 ve dordun katlari olarak gidiyor, margin icinde p yerine m koyuyorsun.
sol taraf icin pl-1 sag icin pr-1 ust icin pt-1 alt icin pb-1 aynilari ml-mr-mt-mb olarak margin icin kullaniliyor
@@PROTOTURKCOM 2.yi öğlen arasında bitiricem mantığını ve bootstraptan farklı olabileceğini düşündüğüm tahnin ettiğim yerleri kavradığımda bu iş tamamdır. Thx 🙂
Abi hala tailwind kullaniyormusun
Transition mu istiyorsunuz? Hiç sorun değil... :D
ben bu tailwindi kurana kadar canım çıkıyor
Abi sence bootstrap mi tailwind i mi tercih etmeliyim ?
bence tailwindi tercih etmelisin, ben bu videodan sonra her projemde kullanmaya başladım artık tailwindsiz css yazmak istemiyorum o derece :D
Çok güzel anlatmışın iyi hoş da abi terminal kullamayo bilmiyorum ben nasıl yapıcam ekliceğim ben bunu abi
o zaman önce terminal kullanmayı öğreneceksin bunun konumuzla alakası yok çünkü
Hocam temanız hoşuma gitti paylaşma şansınız var mıdır ?
ilk
sevmedim pek scss yazmaya devam ederim tailwind yerine
başta ben de öyle düşünüyordum, 1 buçuk senedir bütün projeleri tailwinde geçirdik :)
güzel abim neden sitenin linkini paylaşmıyorsun
güzel kardeşim sol üstte tailwindcss.com diye yazıyor ya, neden görmüyorsun :)
Zerre kadar bilgim yok ve ilgi alanim da degil bu isler...; ama garip bir sekilde anlatilanlari dinliyorum
yorum
Güzel içerik ama bence tailwind ve bootstrap gereksiz. html sayfası çok karmaşık hale geliyor. Css dosyasında tutmak daha iyi bence.
bootstrap oluşturulma nedeni zaten sitenin bitme hızı tek tek css bazen zaman alıyor
bootsrap vb. esas nedeni , responsive design içindir. css ile yazmak aşırı zaman maliyeti oluşturur.
Css zaman kaybi
abooov bune çirkin bişey böyle, kolaylık açısından güzel olabilir ama çok kötü görünüyor.
Şuan en iyisi Tailwind Css. Bence eleştirmek yerine devre ayak uydurman gerek
hiç estetik değil
npx tailwindcss --o tailwind.css ---->yazıldığında aşağıaki yazı çıkıyor yardımcı olabilecek var mı 2-3 gündür düzeltemiyorum
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.
[deprecation] Running tailwindcss without -i, please provide an input file.
Specified input file --o does not exist.
-i diyerek input yani girdiyi de belli etmeni istiyor, atıyorum -i tailwind.css -o style.css
-i * girdi demek, tailwind css dosyası
-o * çıktı demek, sonucunda çıkan stil dosyası
Teşekkürler
teşekkürler