TailwindCSS - Purge İle Optimize Web Siteleri

Adem Mert Kocakaya - 18 Mayıs 2023

Senior SEO/ASO Manager

Arama Motoru Optimizasyonu (SEO)

Son birkaç ayda popülerliği hızla artan tailwind.css kütüphanesi ve bu kütüphanenin purge aracı ile, bir web sitesi kurarken, sayfada kullanılan class'ların css dosyasına dahil edilmesi, bunların sıkıştırılarak optimize edilmesi ve sayfa performanslarının başarılı ölçülerde artırdığı görülmektedir. Tailwind.css kütüphanesinin projelerimize nasıl dahil edileceğiyle ilgili konuya gelin birlikte bakalım.

Tailwind.CSS Nedir?

Tailwind CSS, web geliştiricilerin kullanabileceği bir CSS çerçevesidir. CSS çerçevesi, web uygulamalarının veya sitelerin görünümünü ve stilini oluşturmak için kullanılan bir dizi hazır CSS sınıfını içerir.

Tailwind CSS, benzersiz bir yaklaşım kullanır. Bunun yerine, önceden oluşturulmuş stil sayfaları yerine, doğrudan HTML dosyasına uygulanabilen düşük seviyeli CSS sınıflarını sağlar. Bu sınıflar, bir dizi stil özelliğini temsil eder ve daha hızlı ve esnek bir şekilde tasarım yapmayı sağlar.

Örneğin, bir buton oluşturmak için, doğrudan HTML dosyasında class özelliğine Tailwind CSS sınıflarını ekleyebilirsiniz. Bu sınıflar, butona farklı renkler, boyutlar, kenar boşlukları ve diğer özellikler eklemek için kullanılabilir. Özel CSS stilleri oluşturmak veya dosyalara bağlı kalmak yerine, Tailwind CSS sınıflarını kullanarak hızlı ve tekrar kullanılabilir bileşenler oluşturmanızı sağlar.

Tailwind CSS, bir dizi stil özelliği ve ayarlar sunar ve gerektiğinde bunları yapılandırmanıza izin verir. Özelleştirilebilir bir yapıya sahiptir, bu nedenle sitenizin veya uygulamanızın ihtiyaçlarına uyacak şekilde özelleştirebilirsiniz.

Sonuç olarak, Tailwind CSS, hızlı ve etkili bir şekilde web tasarımı yapmanızı sağlayan bir CSS çerçevesidir.

Tailwind.CSS Nasıl Kurulur? - NPM & CDN Kurulumları

Tailwind.CSS kütüphanesini kurmak ve projenize dahil etmek için ister NPM veya Composer yardımıyla kurabilir ister CDN sunucularından manuel dahil edebilirsiniz. Bunun için iki yöntemi de aşağıda paylaştık. 

Tailwind.CSS NPM Kurulumu

İlk olarak, projenizin çalıştığı klasöre geçin. Bu, genellikle projenizin kök dizinidir. Terminali açın ve aşağıdaki komutu çalıştırın:

npm init

Bu komut, bir package.json dosyası oluşturmanızı sağlar ve projenizin bağımlılıklarını yönetmenize yardımcı olur. İhtiyaçlarınıza göre gerekli bilgileri girin.

Tailwind CSS'i yüklemek için aşağıdaki komutu çalıştırın:

npm install tailwindcss

Bu komut, projenize Tailwind CSS bağımlılığını ekler.

Tailwind CSS yapılandırma dosyasını oluşturmak için aşağıdaki komutu çalıştırın:

npx tailwindcss init

Bu komut, tailwind.config.js adlı bir dosya oluşturur. Bu dosya, Tailwind CSS'in yapılandırma ayarlarını içerir ve özelleştirmenize olanak tanır.

Oluşturulan tailwind.config.js dosyasını düzenleyerek Tailwind CSS ayarlarını yapılandırabilirsiniz. Bu dosyada renkler, boyutlar, kenar boşlukları ve diğer stiller gibi çeşitli ayarları özelleştirebilirsiniz.

Projenizin CSS dosyasına Tailwind CSS'i dahil edin. Örneğin, styles.css adında bir dosyanız varsa, aşağıdaki gibi @import yönergesini ekleyin:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

Bu, Tailwind CSS'in temel stillerini, bileşenlerini ve yardımcı sınıflarını içe aktarır.

CSS dosyanızı kullanarak HTML dosyanızda Tailwind CSS sınıflarını kullanmaya başlayabilirsiniz. Örneğin, bir buton oluşturmak için Tailwind CSS sınıflarını kullanabilirsiniz:

button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  Click me
button

Bu şekilde, Tailwind CSS'i projenizde kullanabilirsiniz. Tailwind CSS'in sunduğu diğer sınıfları ve özellikleri keşfederek tasarımınızı daha da geliştirebilirsiniz.

Unutmayın, projenizde kullanmak için Tailwind CSS'i yapılandırdıktan sonra CSS dosyalarınızı derlemeniz veya projenizi yapılandırmanız gerekebilir. Bu, projenizin yapılandırmasına ve kullanılan araçlara bağlı olarak değişebilir.

Tailwind.CSS CDN Kurulumu

Tailwind CSS'i CDN (Content Delivery Network) kullanarak projenize eklemek için aşağıdaki adımları izleyebilirsiniz:

HTML dosyanızın head bölümünde aşağıdaki link etiketini ekleyin:

link href="https://cdn.tailwindcss.com/2.2.19/tailwind.min.css" rel="stylesheet"

Bu etiket, Tailwind CSS'in CDN'den indirilerek kullanılmasını sağlar. Bu örnekte, Tailwind CSS'in 2.2.19 sürümü kullanılıyor, ancak siz en son sürümü kullanmak isterseniz URL'yi güncelleyebilirsiniz.

HTML dosyanızda Tailwind CSS sınıflarını kullanmaya başlayabilirsiniz. Örneğin, bir buton oluşturmak için Tailwind CSS sınıflarını kullanabilirsiniz:

button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  Click me
button

Bu şekilde, Tailwind CSS'in CDN üzerinden projenizde kullanabilirsiniz. Böylece Tailwind CSS'in stil sınıflarını kullanarak tasarım yapabilirsiniz.

Tailwind CSS'in tam özelliklerini ve tüm sınıflarını kullanmak için, özel bir yapılandırma yapmak ve CSS dosyalarınızı projenize dahil etmek daha esnek bir yaklaşım olabilir. Ancak hızlı bir prototip oluşturmak veya küçük bir proje üzerinde çalışmak için CDN kullanmak pratik olabilir.

Tailwind.CSS Purge Sistemi Nasıl Kullanılır?

Tailwind CSS'in purge özelliği, Tailwind CSS'in projenizde kullanılan yalnızca gerçekten ihtiyaç duyulan CSS sınıflarını içermesini sağlayan bir optimizasyon mekanizmasıdır. Bu özellik, Tailwind CSS'in boyutunu küçültür ve performansı artırır.

Tailwind CSS, varsayılan olarak birçok stil sınıfı içeren geniş bir stil kitaplığına sahiptir. Ancak, projenizde yalnızca belirli bir alt kümesini kullanıyor olabilirsiniz. Bu durumda, diğer tüm kullanılmayan sınıfların CSS dosyasına dahil edilmesi gereksiz olur ve dosyanın boyutunu artırır.

Purge özelliği, yalnızca projenizin gerçekten kullanılan sınıflarını tespit eder ve CSS dosyasına yalnızca bu sınıfları ekler. Bunu yapmak için, Tailwind CSS, projenizin kaynak kodunu tarar ve kullanılan sınıfları belirlemek için statik analiz yapar.

Genellikle tailwind.config.js dosyasında yapılandırılan purge özelliğini kullanarak izlenecek dosyaları belirtmeniz gerekebilir. Örneğin:

module.exports = {
  purge: ['./index.html'],
  // Diğer yapılandırma ayarları...
}

Yukarıdaki örnekte, purge özelliği, index.html dosyasını tarayarak kullanılan sınıfları belirler. Bu şekilde, sadece bu sınıfların CSS dosyasına dahil edilmesi sağlanır.

Purge özelliğini kullanmak, Tailwind CSS'in projenizin boyutunu azaltmasına ve yalnızca kullanılan sınıfları içermesine olanak tanır. Bu, web sayfalarının daha hızlı yüklenmesini sağlar ve daha küçük dosya boyutlarına sahip olmanızı sağlar.

Ayrıca npm-watch ile anlık olarak sayfaları dinlemesi ve ilgili classları takip etmesi sağlanabilir. Bunu yapmak için öncelikle tailwind.CSS'in jit modunu aktif etmenizi öneririz. Bu mod sayesinde watch işlemleri daha hızlı gerçekleşmektedir:

module.exports = {
  mode: 'jit',
  purge: ['./index.html'],
  // Diğer yapılandırma ayarları...
}

Ardından sisteminizde yer alan package.json dosyasının scripts bölümüne aşağıdaki kodu ekleyiniz:

"scripts": {
    "watch": "npx tailwindcss -i node_modules/tailwindcss/tailwind.css -o public/style.css -w --minify"
},

Son olarak terminalinizde npm watch komutunu çalıştırmanız yeterli. Bu sayede yaptığınız her değişiklikte npm ilgili dosyaları dinleyerek tailwind purge sayesinde sadece kullanılan classları css dosyanıza dahil edip, minify alınmış çıktısını oluşturacak.