Tasarım Kodlama

Tailwind CSS Öğrenin

Bu, görece yeni ancak son derece popüler ve oyunun kurallarını değiştirmesi muhtemel bir CSS çerçevesi olan Tailwind CSS’yi kullanmak için başlangıç ​​dostu bir kılavuz olacak. Tailwind, bir projenin CSS boyutu büyüdükçe özelleştirmeyi ve bakımını daha da kolaylaştıran bir ilk yaklaşım yaklaşımı benimser.

CSS’nin büyük projelerde yönetilmesi zordur ve bu, Bootstrap, Foundation gibi geleneksel CSS çerçeveleri tarafından daha da kötüleştirilir. Kısacası, CSS hızla bir karmaşaya dönüşür: yazması, düşünmesi ve güncellenmesi daha da zor hale gelir.

Tailwind, bu zorlukların çoğunu daha düşük seviyeli bir yaklaşım benimseyerek çözer: herhangi bir tasarımı oluşturmak ve özelleştirmek için kullanılabilecek CSS yardımcı sınıfları sağlar. Tailwind’e kendiniz bir tur atarak bunu iş başında görmek en iyisidir.

Maalesef, Tailwind CSS’yi yüklemek, resmi kılavuzun da açıkça belirttiği gibi oldukça zor olabilir. Tam teşekküllü bir proje için özelliklere ihtiyaç olsa da, Tailwind’in çoğu bir CDN ve tek bir HTML dosyası aracılığıyla kullanılabilir. Bu kılavuz, CDN yaklaşımının nasıl kullanılacağını göstermeye başlar, ardından tam Node ve bundan sonraki her şeye geçer.

Tailwind Play

Tailwind’i öğrenmenin en basit yolu bir tarayıcı kullanarak Tailwind Play adresine gidip tarayıcıda interaktif olarak test etmektir.

Bu, mevcut bir HTML sayfasında güncellemelere izin verir ve değişiklikleri görselleştirir. Çeşitli özellikleri ve genel Tailwind yaklaşımını denemek, Tailwind dokümanlarıyla birlikte harika bir ilk adımdır.

CDN

İkinci en kolay yaklaşım ve başlamayı önereceğim yaklaşım, Tailwind CDN’yi tek bir HTML dosyasında kullanmaktır. Bu şekilde tam kontrole sahip olursunuz ve gerçek dünya geliştirme deneyimini taklit edebilirsiniz.

Başlamak için tailwind-cdn adında yeni bir klasör oluşturun ve içine gidin. Ardından index.html adlı bir dosya oluşturun.

Yalnızca bir div, bir başlık ve bir miktar paragraf metni olacak temel bir HTML5 şablonuyla başlayalım.

tailwind-cdn klasöründe olduğunuz için komut satırınızdan bu dosyayı aslında bir web tarayıcısında açabilirsiniz. Öyleyse yapın!

Tailwind CDN’sini eklemek için tek yapmamız gereken bölümümüzü aşağıdaki satırla güncellemektir:

İşte tam güncellenmiş index.html dosyasının nasıl görünmesi gerektiği.

Dosya değişikliklerini kaydeder ve web tarayıcınızı yenilerseniz, tüm biçimlendirmenin kaldırıldığını görürsünüz.

Metnimiz mevcut web sayfasında oldukça sıkışık değil mi? Metnimizin kenarlarına yatay olarak ve metnin arasına dikey olarak biraz kenar boşluğu dolgusu eklemek güzel olurdu.

Mevcut <div class=”container”> a yatay boşluk eklemek için, yalnızca mx-5 sınıfını ekliyoruz, böylece bu, haline geliyor:

  • m, margin anlamına gelir
  • x, x ekseni için geçerli anlamına gelir
  • 5, tailwind için hatırlatılan göreli birim uzunluğunu temsil eder

Benzer düzenlemeyi <p> etiketi içinde <p class=”my-5″> olarak kullanarak y-axis üzerinde yapabiliriz. x-axis içinde y yerine x kullanılabilir.

Web sayfanızı tekrar yenileyin ve artık hem yatay hem de dikey kenar boşluklarının eklendiğini göreceksiniz.

Tailwind CSS kullanarak sayfayı güncellemeye devam edelim. <h1> etiketinin yazı boyutunu yeniden şekillendirmek için text-2xl ve kalın için de font-bold sınıflarını ekliyoruz. <h1> etiketini güncellediğimizde şu şekilde olacaktır: <h1 class="text-2xl font-bold">.

Tüm kodları şu şekilde oluşur:

Web sayfanızı tekrar yenileyin ve değişiklikleri iş başında göreceksiniz.

Tailwind CSS’yi iş başında göstermek için bir başka örnek de stil düğmeleriyle ilgilidir. Bizim durumumuzda, bir “Buradan kaydolun!” Ekleyelim. üzerinde koyu maviye dönen mavi buton. Kod şuna benzer:

Tailwind’in aşağıdakileri yapması için:

  • text-white yazıyı beyaz yapar
  • font-bold fontu kalın yapar
  • bg-blue-600 600 gölgeli mavi arkaplan yapar.
  • hover:bg-blue-800 üzerine gelindiğinde 800 gölgeli arkaplan yapar.
  • py-2 dikey padding değerini 2rem yapar.
  • px-4 yatay padding değerini 4 rem yapar.
  • rounded buton kenarlarını yuvarlar.

Tailwind’e yıldırım hızında bir giriş ve CSS yazmaya yönelik yeni yaklaşımına yönelik bir tat.

CDN seçeneği, başlamak için harika bir yoldur, ancak belgelerde belirtildiği gibi bazı sınırlamaları vardır. Önerilen yaklaşım, Tailwind’i tüm özelliklerinden yararlanmak için bir PostCSS eklentisi olarak kullanmaktır. Bunu bir sonraki bölümde ele alacağız.

Tailwind NPM ile Kurulum (PostCSS Eklentisi)

Tailwind CSS, nihayetinde bir PostCSS eklentisidir, bu nedenle, Tailwind’den özellikler ve performans açısından en iyi şekilde yararlanmak için, bu şekilde çalıştırılmalıdır. Bunu yapmak, bir CDN kullanmaktan biraz daha fazla kurulum gerektirir, ancak çok basit şekilde yapılabilir. Tailwind’in yaratıcısı Adam Wathan, 2019’da bu kurulumla ilgili bir YouToube serisi yayınladı. Bu notların birkaç güncellemesi var ancak büyük ölçüde sunumunu takip ediyor.

Not: Yerel bilgisayarınıza henüz yüklemediyseniz NPM yüklemeniz gerekecektir.

Başlamak için bilgisayarınızda yeni bir dizin oluşturun ve buraya girin. Benimkine tailwind-calisma demeye karar verdim.

İlk adım, Terminal’inizden aşağıdaki komutla yapılabilen temel bir package.json dosyası oluşturmaktır:

Ortaya çıkan dosyam aşağıdaki gibi görünüyor:

package.json

Ardından, postcss’nin kendisi, postcss-cli ve CSS öneklerinize otomatik olarak sağlayıcı eklentileri ekleyen autoprefixer dahil olmak üzere bir PostCSS eklentileri zinciri aracılığıyla CSS’yi işlemeye yardımcı olacak bazı araçlar ile tailwindcss yükleyin.

Bu eklentilerle artık yeni bir bağımlılıklar bölümüne sahip olan package.json dosyanızın içine bakın. Ayrıca ilk kez bir package-lock.json dosyası oluşturuldu, ancak onu incelemeniz gerekmez.

package.json

postcss.config.js ve tailwind.config.js oluşturulması gerekir. PostCSS yapılandırmanıza tailwindcss ve autoprefixer eklenir. Tailwind’i daha sonra özelleştirmek için, aşağıdaki gibi bir tailwind.config.js dosyasını da oluşturur. Oluşturan komut aşağıdaki gibidir.

postcss.config.js

tailwind.config.js

Tailwind, özel işaretçiler için bir CSS dosyasına bakarak ve bunları Tailwind’in oluşturduğu kodla değiştirerek çalışır. Yeni bir css klasörü içinde tailwind.css adlı yeni bir CSS dosyası oluşturun.

Ardından dosyanın içine basecomponents, ve utilities üç yönerge ekleyin. CSS’miz PostCSS aracılığıyla derlendiğinde, Tailwind her birini bulacak ve buna göre Tailwind koduyla değiştirecektir. Bunun ne anlama geldiğini birazdan göreceğiz.

css/tailwind.css

Derlenen dosya ile çalışmak için bir tane public klasörü oluşturup içinde index.html ve tailwind.css dosyasını oluşturun.

index.html

Tailwind’i oluşturmadan önceki son adım, CSS’mizi PostCSS eklentileri aracılığıyla işlemek için basit bir komut dosyasına ihtiyacımız olmasıdır. Mevcut package.json dosyasına, postcss-cli kullanan, css/tailwind.css‘yi girdi dosyası olarak alan ve çıktıyı public/build/tailwind.css adlı yeni bir dosyaya belirten bir yapı betiği ekleyin.

package.json

package.json dosyasının yukarıdaki gibi güncelledikten sonra terminalden bu satırı çalıştıran komutu aşağıdaki gibi çalıştırınb dosyasına ait tüm tasarım kodları public/tailwind.css içinde oluşacaktır.

Artık tailwind çerçevesi yüklendi. HTML dosyasını açıp istediğiniz gibi düzenleme yapabilirsiniz.

Ek Ayarlar

Kullanılmayan CSS sınıflarını kaldırın. Aşağıdaki adımlar gerçekleştirdiğinizde tailwind.css içindeki kullanılmayan tüm CSS sınıfları kaldırılacaktır.

Fakat çıktı olarak üretilen kod yaklaşık olarak 3.5MB boyutundadır. Kullanmadığımız CSS kodları için ek bir ayar daha yapılması gerekiyor. Öncelikli olarak win-node-env kütüphanesini yükleyin.

package.json dosyasını açın ve prod komutunu ekleyin.

Temizleme işlemini yaparken hangi dosyaları kontrol edeceğinizi de tailwind.config.js dosyasını açarak belirtin.

public klasörü içindeki html ve js uzantılı tüm dosyaları kontrol edeceğini ifade etmiş olduk.

Kullanılmayan CSS sınıflarını kaldırmak için terminale aşağıdaki komutu yazınız.

Sonuç

Bu kılavuz hala devam etmektedir, ancak umarım kurulum talimatları Tailwind hakkında daha fazla bilgi edinmek isteyen herkese yardımcı olur. Zaman elverdikçe daha fazla içerik ekleyeceğim.

Tailwind kendi başına bir tasarımla gelmediğinden, birçok geliştiricinin, kendiniz bir tasarımcı değilseniz bir web sitesine eklenebilecek önceden hazırlanmış bir dizi ücretli UI bileşeni olan Tailwind Kullanıcı Arayüzüne eriştiğini unutmayın.

Kaynak:

https://tailwindcss.com/docs/installation

https://www.youtube.com/watch?v=hvm5-EGe3fU

https://www.youtube.com/watch?v=ieObfhXqJtc

Yorum yap