Uygulamalarınızı hızlı, esnek ve güvenilir bir çerçeveyle tasarlamak istiyorsanız Tailwind CSS harika bir seçenektir. Tailwind, özel web bileşenleri tasarlamanıza yardımcı olan bir CSS çerçevesidir. HTML ve CSS dosyaları arasında geçiş yapmak zorunda kalmadan bileşenleri tasarlayabilirsiniz.

Bootstrap'in aksine, Tailwind'in önceden tanımlanmış sınıfları yoktur. Bunun yerine, kendinizinkini özelleştirebilirsiniz. Tailwind ile ilkel yardımcı programlar, işlevler ve yönergelerle karmaşık bileşenler oluşturabilirsiniz.

Next.js projelerinizde harika kullanıcı arayüzleri oluşturmak için Tailwind'i nasıl kuracağınızı ve kullanacağınızı öğrenin.

Tailwind CSS'yi Next.js'ye yükleyin

Tailwind'i bir Next.js uygulamasına yükleyerek başlayın. süreç benzer Tailwind'i bir React uygulamasına yükleme, yapılandırma sürecinde küçük bir farkla.

Gitmek Tailwind CSS kurulumu sayfa. O zaman şuraya git:

Çerçeve Kılavuzları bölümüne gidin ve seçin Sonraki.js. Bu bölüm, Next.js projenizde Tailwind'i kurmak için ihtiyacınız olan tüm talimatları içerir.

Tailwind'i yüklemek için npm, JavaScript paket yöneticisi, şu iki terminal komutunu çalıştırın:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss başlatma -p

Bu komutlar, adlı iki yapılandırma dosyası oluşturur. tailwind.config.js Ve postcss.config.js kök proje klasöründe. Bu dosyalar, TailwindCSS'nin başarıyla kurulduğunu gösterir. Tailwind CSS'yi Tailwind CLI aracılığıyla veya bir PostCSS eklentisi olarak da kurabilirsiniz.

Şablonları Yapılandır

Kurulumdan sonra, uygulama yapılandırma dosyanız için kurulum kılavuzunda sağlanan şablon yollarını yapılandırmanız gerekir. içine aşağıdaki kodu ekleyin tailwind.config.js dosyası:

/** @tip {import('tailwindcss').Config}*/
modül.ihracat = {
 içerik: [ 
"./app/**/*.{js, ts, jsx, tsx}",
"./pages/**/*.{js, ts, jsx, tsx}",
"./components/**/*.{js, ts, jsx, tsx}",
// Veya `src` dizini kullanılıyorsa: 
"./src/**/*.{js, ts, jsx, tsx}",
 ],
 tema: { 
 uzatmak: {},
 },
 eklentiler: [],
}

Uygulamaya Tailwind Direktifi Ekleyin

Ardından, aşağıdaki Tailwind yönergelerini App CSS dosyanıza ekleyin. Bu adlı dosya global.css. global.css dosyasının içeriğini silmeli ve Tailwind yönergelerini eklemelisiniz.

@tailwind tabanı;
@tailwind bileşenleri;
@tailwind yardımcı programları;

Derleme İşlemini Çalıştır

Şimdi terminalde aşağıdaki komutla CLI aracını çalıştırın:

npm geliştiriciyi çalıştır

Bu komut, şablon dosyalarınızı sınıflar için tarar ve CSS'nizi oluşturur. Tarayıcıyı görüntülemeniz için bir bağlantı noktası açacaktır.

Şimdi, şu adresteki sunucuya giderseniz http://localhost: 3000 uygulamanızı göreceksiniz. İçerikte küçük bir değişiklik fark etmelisiniz. Bu, yükleme işleminin başarılı olduğunu ve Tailwind CSS'nin yayında olduğunu gösterir.

Projede Tailwind'i Kullanın

Ardından, sınıfları projenize uygulayarak Tailwind CSS özelliklerini test edelim. Örneğin, "Hello Tailwind" metnini içeren bir uygulamanız var. Açık mavi arka planlı kırmızı bir renk vermek istiyorsunuz.

Oluşturmak Anasayfa.tsx dosya sonra aşağıdaki kodu ekleyin:

ihracatvarsayılanişlevEv() {
geri dönmek (
"bg-mavi-300">
'metin-kırmızı-900'>Merhaba Tailwind CSS</h1>
 </body>
 );
} 

Şimdi, tarayıcıya gittiğinizde, metnin kırmızıya dönüştüğünü ve arka planın mavi olduğunu göreceksiniz.

Uygulamanızın diğer bileşenlerine stil vermek için diğer Tailwind CSS özelliklerini keşfedebilirsiniz. Koşullu değiştiriciler, fareyle üzerine gelme ve odaklanma gibi reaktif durumlar oluşturmanıza olanak tanır. Ayrıca sayfalarınızı kullanıcının tercihine göre koyu ve açık modlara göre özelleştirebilirsiniz.

Tailwind CSS Kullanmanın Avantajları

Adam Wathan tarafından 2017 yılında yapılan Tailwind CSS, diğer CSS kitaplıklarından birçok yönden farklıdır. Sıfır çalışma süresine sahiptir, bu da onu yıldırım hızında yapar. Ve kurulumu kolaydır. Tailwind, uygulamanızdaki sınıf adları için tüm HTML dosyalarını ve JavaScript bileşenlerini tarar. Ardından, öğeleri tasarlayan karşılık gelen stilleri oluşturur.

Tailwind CSS, ilkel yardımcı programlardan karmaşık bileşenler tasarlamanıza olanak tanır. Bileşenler arasında stilleri yeniden kullanabilir ve duyarlı kullanıcı arayüzlerine stil vermek için değiştiricileri kullanabilirsiniz. Markanızla eşleşen uygulamaları özelleştirmek için Tailwind CSS'yi nasıl yükleyeceğinizi ve kullanacağınızı öğrenmek için buradaki adımları kullanın.