Tailwind CSS ile özel React bileşenleri oluşturun. Projelerinizde kullanmaya hazır gerçek zamanlı önizleme ve oluşturulan kodla butonlar, girişler, metin alanları, açılır menüler ve ekmek kırıntıları oluşturun.
Tailwind CSS ile React bileşenleri oluşturun ve canlı önizleme görün
<button className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" > Button </button>
React Tailwind Bileşen Oluşturucu, Tailwind CSS kullanarak özel React bileşenleri oluşturmanıza yardımcı olan güçlü bir görsel editördür. Bu ücretsiz çevrimiçi React Tailwind bileşen oluşturucu, geliştiricilerin ve tasarımcıların CSS kodunu elle yazmadan üretim hazır UI bileşenleri oluşturmasını, özelleştirmesini ve dışa aktarmasını sağlar. Canlı önizleme React Tailwind oluşturucusu ile, Tailwind'in işlevsel CSS çerçevesini kullanarak düğmeler, formlar, girişler ve gezinti bileşenlerini tasarlarken gerçek zamanlı değişiklikleri görebilirsiniz.
React Tailwind bileşen oluşturucumuz, düğmeler, metin girişleri, textarea'lar, açılır menüler ve ekmek kırıntısı gezintisi dahil temel UI öğelerinin oluşturulmasını destekler. Her React bileşeni, renkler, boşluk, tipografi, kenarlıklar ve duyarlı tasarım için Tailwind CSS yardımcı sınıflarını kullanarak tamamen özelleştirilebilir - tüm bunlar özellikler değiştirilirken dinamik olarak güncellenen anında canlı önizleme ile.
Mevcut seçeneklerden oluşturmak istediğiniz bileşen türünü seçerek başlayın:
Her bileşen türünün, özellikler panelinde görünen kendi özelleştirilebilir özellikleri vardır.
Bir bileşen türü seçtikten sonra, özellikler panelini kullanarak görünümünü ve davranışını özelleştirebilirsiniz. Ortak özellikler şunlardır:
Belirli bileşen türleri için ek özellikler mevcuttur:
Özellikleri ayarladıkça, canlı önizleme gerçek zamanlı olarak güncellenir ve bileşeninizin tam olarak nasıl görüneceğini gösterir. Ayrıca şunları da yapabilirsiniz:
Bileşeninizden memnun kaldığınızda, araç otomatik olarak tüm uygulanan Tailwind CSS sınıflarıyla birlikte karşılık gelen React JSX kodunu oluşturur. Şunları yapabilirsiniz:
Düğmeler, kullanıcı etkileşimleri için temel UI öğeleridir. Oluşturucumuzla çeşitli düğme stilleri oluşturabilirsiniz:
Önemli Özelleştirme Seçenekleri:
Örnek Oluşturulan Kod:
1<button
2 className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none"
3>
4 Gönder
5</button>
6Metin girişleri, kullanıcıların formlarda tek satırlık metin girmesine olanak tanır. Oluşturucumuz, tasarım sisteminize uygun girişler oluşturmanıza yardımcı olur:
Önemli Özelleştirme Seçenekleri:
Örnek Oluşturulan Kod:
1<input
2 type="text"
3 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
4 placeholder="Adınızı girin"
5 required
6/>
7Textarea'lar, yorumlar veya açıklamalar gibi çok satırlı metin girişi için kullanılır:
Önemli Özelleştirme Seçenekleri:
Örnek Oluşturulan Kod:
1<textarea
2 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3 placeholder="Mesajınızı girin"
4 rows={4}
5></textarea>
6Seçim açılır menüleri, kullanıcıların bir seçenekler listesinden seçim yapmasına olanak tanır:
Önemli Özelleştirme Seçenekleri:
Örnek Oluşturulan Kod:
1<select
2 className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3 required
4>
5 <option value="option1">Seçenek 1</option>
6 <option value="option2">Seçenek 2</option>
7 <option value="option3">Seçenek 3</option>
8</select>
9Ekmek kırıntıları, kullanıcıların bir web sitesinin hiyerarşisi içindeki konumlarını anlamalarına yardımcı olur:
Önemli Özelleştirme Seçenekleri:
Örnek Oluşturulan Kod:
1<nav className="flex" aria-label="Ekmek Kırıntısı">
2 <ol className="flex space-x-2 text-gray-700">
3 <li className="flex items-center">
4 <a href="/" className="hover:text-blue-600">Ana Sayfa</a>
5 </li>
6 <li className="flex items-center">
7 <span className="mx-2 text-gray-400">/</span>
8 <a href="/products" className="hover:text-blue-600">Ürünler</a>
9 </li>
10 <li className="flex items-center">
11 <span className="mx-2 text-gray-400">/</span>
12 <a href="/products/category" className="hover:text-blue-600">Kategori</a>
13 </li>
14 </ol>
15</nav>
16Bileşen oluşturucumuz, bileşenleri stilize etmek için Tailwind CSS'nin yardımcı sınıflarını kullanır. En sık kullanılan özellikler için hızlı bir referans:
Tailwind kapsamlı bir renk paleti sağlar. Bazı örnekler:
text-{color}-{shade} (örn. text-blue-500, text-red-600)bg-{color}-{shade} (örn. bg-green-500, bg-gray-100)border-{color}-{shade} (örn. border-gray-300)Dolgu ve kenar boşluğunu bu sınıflarla kontrol edin:
p-{size}, px-{size}, py-{size} (örn. p-4, px-3 py-2)m-{size}, mx-{size}, my-{size} (örn. m-2, mx-auto)Metin görünümünü şu şekilde ayarlayın:
text-{size} (örn. text-sm, text-lg)font-{weight} (İş akışınız için faydalı olabilecek daha fazla aracı keşfedin