Javscript

React ve Tailwind CSS 3 ile Meteor.js | Frederico Maia tarafından

Hepimiz biliyoruz ki Meteor, tam yığın projeler oluşturmamıza izin veren süper üretken bir JS çerçevesidir. React.js, web uygulamaları oluşturmak için yaygın olarak kullanılan bir UI kitaplığıdır. Ve Tailwind, modern web siteleri ve uygulamalar oluşturmaya yönelik bir CSS çerçevesidir. Üçünün kombinasyonu bize mükemmel bir kombinasyon sunuyor!

React ve Tailwind CSS 3 ile Meteor.js

Bunları bazı iç projelerde kullanıyoruz ve bu seçimden çok memnunuz. Meteor, yakın zamanda yayınlanan 2.7 sürümünden Tailwind CSS 3’ü destekler.

Tailwind CSS’nin sayfalarımızı oluştururken ve ayrıştırırken bazı özellikleri vardır, bu yüzden onları entegre etmek için bazı adımlar atmamız gerekiyor. Bu yazıda, bu 3 teknolojiyi birleştiren bir başlangıç ​​projesi oluşturacağız: Meteor, React ve Tailwind.

Spoiler uyarısı: Tailwind için yeni bir iskelet oluşturuyoruz. Bir “kuyruk rüzgarı” bayrağı kullanabilecek ve bir Meteor + React + Tailwind uygulamasını kullanıma hazır hale getirebileceksiniz.

Projenizi oluşturun

Yeni bir tane oluşturarak başlayın Meteor proje. Bir sonraki adıma geçmeden önce proje klasörünü girin ve doğru olduğundan emin olmak için çalıştırın.
Varsayılan olarak Meteor, React’i kullanır ve proje oluşturulduğunda aynı ada sahip bir alt dizin oluşturur.

$ meteor create tailwind-with-meteor
$ cd tailwind-with-meteor
$ meteor run

Aşağıdaki ekranı görmelisiniz:

Sayaçlı varsayılan oluşturulan Meteor uygulaması

Tailwind CSS’yi yükleyin

tailwindcss ve eş bağımlılıklarını kurun ve ardından her ikisini de oluşturmak için init komutunu çalıştırın. tailwind.config.js ve postcss.config.js.
kullanılması tavsiye edilir. meteor npm sadece komut yerine npm Meteor ile birlikte gelen sürümü kullanmak için.

$ meteor npm install tailwindcss postcss autoprefixer postcss-load-config
$ npx tailwindcss init -p

Şablon yollarınızı yapılandırın

bu içerik senin bölümün tailwind.config.js dosyası, tüm HTML şablonlarınızın, JavaScript bileşenlerinin ve Tailwind sınıf adlarını içeren diğer kaynak dosyaların yollarını yapılandırdığınız yerdir.

module.exports = {
content: ["./imports/ui/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {},
},
plugins: [],
}

CSS’nize Tailwind’i dahil edin

`main.css` dosyanıza Tailwind direktiflerini ekleyin.

@tailwind base;
@tailwind components;
@tailwind utilities;

Bazı Tailwind sınıfları ekleyelim. h1 öğesinden ./imports/ui/App.jsx Her şeyin yolunda olup olmadığını kontrol etmek için dosya.

export const App = () => (
<div>
<h1 className="text-3xl text-indigo-800">
Welcome to Meteor + Tailwind!
</h1>
<Hello/>
<Info/>
</div>
)

Uygulamanızı açın ve aşağıdaki ekran görüntüsü olarak Tailwind tarafından tasarlanan başlığını görmelisiniz:

Tabii ki, bu oldukça basit, ancak artık uygulamanıza herhangi bir Tailwind sınıfını uygulayabilirsiniz. Erişirseniz bu basit web uygulamasının çalıştığını görebilirsiniz. bu URL.

Lütfen test edin ve bize geri bildirimde bulunun. Bir sonrakinde görüşürüz!

Referanslar:
https://tailwindcss.com/docs/installation
https://blog.meteor.com/meteor-2-7-and-the-new-2fa-package-5fc53e5027e0

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Göz Atın
Kapalı
Başa dön tuşu