Deployment Website Ke Vercel

Pembahasan kali ini, saya akan membagikan sebuah cara gampang untuk hosting website atau aplikasi. sebenarnya banyak layanan penyedia hosting website gratis, contohnya netlify, heroku, github pages dan masih banyak lagi, tapi kali ini saya akan memberitahu kalian satu layanan hosting yang paling banyak di gunakan oleh para developer, yaitu vercel.com.banyak keunggulan yang diberikan oleh vercel, salah satunya vercel analitycs, kalian bisa install vercel analitycs di dalam project kalian, tinggal kalian baca dokumentasi di website resminya vercel.

Vercel adalah platform cloud yang memungkinkan pengembang untuk dengan mudah melakukan deployment dan hosting aplikasi web, baik itu situs web statis maupun aplikasi web dinamis. Vercel mendukung berbagai bahasa pemrograman seperti JavaScript, Python, Go, dan sebagainya. Platform ini terkenal karena kecepatan deployment yang tinggi, dukungan untuk Continuous Integration (CI), dan integrasi yang baik dengan berbagai alat pengembangan.

Berikut adalah langkah-langkah untuk melakukan deployment projek ke Vercel:

1. membuat akun vercel

Mungkin sedikit mirip kali ya dengan CSS-in-JS atau styled component yang mana tidak perlu keluar dari file jsx/html kita untuk melakukan styling pada komponen kita.

Kenapa Pakai Tailwind CSS?

Saya sebelumnya pernah pakai beberapa framework yang berbasis komponen seperti Bootstrap CSS, Bulma, MaterializeCSS, namun merasa kurang puas dengan framework ini.

Mengapa?

Pertama saya merasa kurang bebas kustomisasi komponennya. Kalau mau custom, harus override class yang udah ada. Kedua, kode CSS dari komponen yang nggak dipakai akan ikut nyangkut di CSS hasil build. Ini membuat ukuran CSS-nya jadi lebih besar. Walaupun saya coba pakai PurgeCSS, namun kadang hasil tampilannya nggak maksimal, ada aja yang bermasalah.

Berikut adalah beberapa konsep dasar Tailwind CSS:

1. Utility-First Approach:

Tailwind CSS mengutamakan penggunaan kelas utilitas untuk mendefinisikan gaya elemen. Sebagai contoh, daripada memiliki CSS khusus untuk setiap elemen, Anda menggunakan kelas-kelas seperti bg-blue-400 untuk memberikan warna latar belakang biru.

2. Kelas-Kelas Dasar:

Tailwind menyediakan kelas-kelas untuk berbagai properti CSS, seperti warna, margin, padding, dan lainnya. Contohnya, text-red-400 akan memberikan warna teks merah.

3. Responsiveness:

Tailwind juga menyertakan kelas-kelas untuk menangani responsivitas. Misalnya, sm:text-lg akan memberikan ukuran teks besar pada tampilan layar kecil (small screens).

4. Responsiveness:

Kita dapat menyesuaikan konfigurasi Tailwind untuk memenuhi kebutuhan projek kita. Ini memungkinkan kita menambahkan, mengubah, atau menghapus kelas-kelas yang tersedia sesuai kebutuhan.

5. Penggunaan Variabel:

Tailwind menggunakan variabel untuk mengatur nilai-nilai tertentu, memudahkan penyesuaian. Misalnya, warna, ukuran font, atau nilai lain dapat diubah dengan mudah melalui variabel.

6. Pseudo-Classes dan Pseudo-Elements:

Tailwind mendukung penggunaan pseudo-classes dan pseudo-elements seperti hover , focus , dan before. Misalnya, hover:bg-yellow-500 memberikan latar belakang warna kuning ketika elemen dihover.

di bawah ini saya tampilkan contoh penggunaan kelas menggunakan framework lain dan dengan menggunakan Tailwind CSS dalam HTML :

Menggunakan framework lain :

Menggunakan framework TailwindCSS :

Nah! teman-teman udah tau kan perbedaannya, seperti yang sudah kita bahas sebelumnya, jika kita ingin membuat styling pada component, tidak perlu buat di file css terpisah, cukup buat styling di dalam halaman html/jsx saja, gimana ni sudah tertarik untuk menggunakan framework tailwindcss ? 👌