Tailwind Css adalah framework css yang semua properti cssnya telah ditulis sebelumnya sebagai class, kemudian menggunakan class tersebut untuk menerapkan properti css. Misalnya: Tombol ini Utama dapat mencapai seperti kode di bawah ini menggunakan tailwind css.

<button type="button" class="bg-blue-600 text-gray-200 rounded px-2 py-1">Primary</Button>

Bootstrap vs Tailwind css

Mempertimbangkan framework bootstrap, yang didasarkan pada komponen, tombol serupa di atas dapat ditulis dengan menggunakan class css sebagai berikut:

<button type="button" class="btn btn-primary">Primary</button>

Sepertinya Bootstrap adalah pemenang yang jelas atas tailwind css, karena Anda melihat bahwa bootstrap membutuhkan lebih sedikit kode dan sintaks yang jelas untuk mencapai hasil yang serupa.

Tailwind paling cocok untuk desain khusus.

Bootstrap jelas menjadi pemenang dalam hasil di atas. Tetapi tailwind css datang saat aplikasi kita membutuhkan desain khusus. Bootstrap memiliki sekumpulan komponen yang telah ditentukan sebelumnya, seperti Buttons, Cards, dll. Tetapi ketika aplikasi membutuhkan kartu cutom, tombol khusus atau desain khusus pada umumnya, pengembang menulis css khusus untuk mencapai desain khusus. Jadi apa yang ditawarkan tailwind adalah bahwa pengembang tidak perlu menulis css khusus untuk mencapai 95% desain karena semua properti css telah ditentukan sebelumnya dengan baik dalam bentuk class class. Jadi Meskipun bootstrap tampaknya menjadi pemenang dalam contoh di atas, css Tailwind paling baik digunakan saat aplikasi memiliki desain khusus untuk diterapkan.

Apa yang dimaksud dengan komponen khusus?

Pertimbangkan komponen peringatan khusus misalnya. Seperti yang kita ketahui bahwa bootstrap menawarkan komponen peringatan, Tapi kita ingin komponen peringatan yang lebih indah dan menarik serupa di bagian bawah. Seberapa mudah mendapatkan komponen tersebut di css menggunakan bootstrap? Dalam bootstrap tidak mungkin Anda dapat mendapatkan komponen ini tanpa menulis css tambahan. Saya tidak akan mengatakan itu cara yang buruk, tetapi saya akan mengatakan bahwa taiwiind menawarkan bahwa komponen ini dapat ditemukan tanpa menulis css tambahan.

<div x-data="{ show: true }" x-show="show" class="w-11/12 md:w-3/5 bg-white my-2 rounded-r-md px-6 border-l-4 -ml-4 border-gray-100 bg-green-500">

<div class="flex items-center py-4"> <i class="fas fa-check border-2 border-gray-200 px-2 rounded-full fill-current text-4xl font-light text-gray-200"></i>

<div class="ml-5">

<h1 class="text-lg font-bold text-gray-200">Well done!</h1>

<p class="text-gray-300 my-0">You successfully read this important alert message.</p>

</div>

<div>

<button type="button" @click="show = false" class=" text-yellow-100">

<span class="text-2xl">&times;</span>

</button>

</div>

</div>

</div>

Kesimpulan

Saya sangat terkesan dengan cara tailwind menawarkan untuk menulis css di dalam html. Dalam 90% desain, kita tidak perlu menulis css tambahan untuk desain kustom apa pun, yang hampir tidak mungkin dilakukan di bootstrap. Di sisi lain, bootstrap menawarkan semua komponen dasar yang berguna dalam desain. Jadi, menurut pendapat saya, bootstrap sangat cocok di mana Anda membutuhkan situs web sederhana umum, yang tidak memerlukan lebih banyak komponen khusus tambahan. Di sisi lain, tailwind css paling cocok saat Anda merancang situs web yang terlihat sangat unik yang tidak ada di dunia sebelumnya.