TailwindCSS | https://tailwindcss.com/brand#logotype

Mengenal TailwindCSS v2.2.10

TailwindCSS merupakan framework CSS(Cascading Style Sheets) yang menganut konsep Utility-First. Kita akan belajar menguasai TailwindCSS dari basicnya.

Kenalkan ini TailwindCSS salah satu framework CSS yang menganut konsep Utility-First, apa itu Utility-First ? , apa keunggulannya ?, apa kekurangannya?, kapan cocok digunakan?, dan bagaimana instalasinya dan bagaimana cara pakainya? kita akan bahas itu semua di sini.

Contoh website yg menggunakan TailwindCSS (Web portfolio saya)
https://edwintantawi.vercel.app/

Edwin Tantawi

Konsep TailwindCSS

dari tadi kita mendengar kata Utility-First, sebenarnya apa itu? Utility-First adakah konsep yang di anut oleh TailwindCSS, Utility-First maksudnya semua yang ada pada TailwindCSS bersifat Utilitas, setiap class TailwindCSS menggambarkan satu property CSS. Tidak seperti framework CSS lainnya seperti Bootstrap yang bersifat component, yang dimana setiap class nya mewakili 1 komponen. bagaimana perbedaannya dapat kita lihat di bawah ini.

Primary Button

membuat Primary Button dengan Bootstrap

membuat Primary Button dengan TailwindCSS

Kurang lebih seperti di atas perbedaannya antara bootstrap dengan TailwindCSS dalam membuat button primary. Bootstrap membutuhkan lebih sedikit class dari pada TailwindCSS. Ini karena Tailwind menggunakan utility class nya untuk membentuk component yang kita inginkan, sedangkan Bootstrap sudah menyediakan langsung component class nya.

Terus lebih mudah dah cepat bootstrap kalau begitu? Eiits… sebentar dulu, keduanya memiliki kelebihan dan kekurangannya masing masing yang perlu kita pahami sebelum memilih ingin menggunakan yang mana. Yuk cari tau di bagian berikutnya.

Kelebihan dan Kekurangan

Setiap apapun di dunia ini ada kelebihan dan kekurangan, termasuk tools di dunia programming ini. Berikut kelebihan dan kekurangan TailwindCSS.

Kelebihan

• Tampilan ada di tangan anda sendiri
  yups, ini salah satu kelebihan yang saya suka sebagai Front-End Enginer, kita diberi kebebasan mengatur tampilan sesuai yang kita inginkan. Berbeda cerita dangan Bootstrap dimana tampilannya akan lebih monoton, serupa dengan developer lain yang sama sama menggunakan Bootstrap karena component di sediakan langsung oleh bootstrap, di bootstrap tetap bisa melakukan kustomisasi tapi sangat minim dari pada TailwindCSS.
• Pixel Perfect
  ini kesenangan UI/UX nih, yap Tailwind bisa bikin tampilan kamu Pixel Perfect (ukuran pixel yang sempurna), jadi apa yang di design oleh UI/UX dapat dibuat se presisi mungkin, ini berkat Fitur Arbitrary value support, dimana kita dapat menuliskan value sesuka hati kita, fitur ini hanya dapat di aktifkan jika berada di mode JIT (Just In Time compiler), nanti akan kita bahas dan kita coba gunakan.
  Jika pada Bootstrap kita tidak bisa melakukannya dengan mudah.
• Tidak perlu pusing memikirkan nama Class
  Siapa di sini kalau menuliskan nama class suka berantakan, susah dibaca, hingga pusing mikirin nama class yang cocok agar code kalian lebih clean.
  Saya juga sering seperti itu, Jika menggunakan TailwindCSS kita tidak perlu memusingkan nama class, karena hampir semua property CSS ada pada TailwindCSS, jadi kita tidak perlu bikin css sama sekali kecuali CSS konfigurasi tailwindCSS nya saja. Wah hebat bukan.
• Ukuran yang kecil
  Tak perlu khawaktir masalah performa, tailwindCSS dapat melakukan optimasi untuk production, tailwindCSS dapat menghapus class class yang ada jika tidak di gunakan. Hebat bukan? Ini merupakan hal yang wajib dilakukan ketika menggunakan TailwindCSS, karena jika tidak total ukuran file CSS TailwindCSS bisa mencapai 3MB. Hmmm cukup besar bukan?
• Masih banyak lagi kelebihannya, seperti DarkMode, Responsive, dan banyak lagi. Mari explore TailwindCSS di website TailwindCSS.

Kekurangan

Tentu saja di antara kelebihan di atas, TailwindCSS tetap mempunya beberapa kelemahan, ini juga tergantung kepada developer, dan kondisi masing masing.

• Terlalu Banyak duplikasi Class
  Karena Utility-First alhasil akan banyak class yang di tuliskan di HTML, sebenarnya ini bisa di akali dengan memindahkan class class TailwindCSS yang duplikasi ke sebuah class baru yang kita buat sendiri, ini juga bisa cukup merepokan. Untungnya di dunia Front-End sudah banyak framework Javascript yang berbasis reuseable component (ReactJS, VueJS, Angular, Svelte, dll). Ini sangat cocok untuk TailwindCSS menguragi duplikasi class.
• Cukup memakan waktu
  Seperti yang kita tau, jika kita ingin membangun komponen seperti button kita harus manual melakukan styling mulai dari padding, color, background, dll. Di sini Bootstrap sangat unggul dengan beberapa class saja.
• Instalasi yang cukup sulit bagi pemula
  Tidak seperti Bootstrap yang cukup mudah, TailwindCSS agak sedikit Tricky bagi sebagian orang. Walau TailwindCSS bisa digunakan dengan CDN namun ini tidak di sarankan untuk production, dan keterbatasan fitur lainnya, kita harus menggunakan TailwindCSS CLI untuk performa, fitur, dan segudang kehebatan TailwindCSS. Tentu saja nanti akan kita pelajari bagaimana instalasi dan menggunakan TailwindCSS
• Mungkin masi ada kekurangan lainnya, ini tergantung bagaimana kondisi dan kenyamanan developer masing masing.

Kapan saat yang tepat dan tidak tepat dalam menggunakan TailwindCSS?

Kita sudah bahas beberpa kelebihan dan kekurangannya, sekarang kita dapat menyimpulkan kapan saat yang tepat menggunakan TailwindCSS, atau menggunakan yang lain seperti Bootstrap.

• Gunakan TailwindCSS jika butuh design tampilan yang flexible sesuai keinginan, Pixel Perfect, atau ingin semirip mungkin dengan design UI.
• Jangan Gunakan TailwindCSS jika waktu tidak mendukung, jika tampilan tidak perlu terlalu mirip dengan design UI, atau kalau website tidak perlu tampilan yang butuh kustomisasi yang banyak.

sebagai developer kita harus selektif dalam memilih tools yang kita gunakan sesuai kondisi dan kebutuhan, bukan karena trend, dan jangan terlalu garis keras ke salah satu tools saja.

dah mulai bosan? harusnya tetap semangat kan. Selanjutnya kita akan Belajar bagaimana instalasi TailwindCSS dengan cara yang sederhana hingga menggunakan framework JS.

Instalasi TailwindCSS

ada beberapa cara instalasi TailwindCSS kita akan bahas beberapa.

• HTML, CSS, Javascript + TailwindCSS CDN
• HTML, CSS, Javascript + TailwindCSS CLI
• HTML, CSS, Javascript + PostCSS + TailwindCSS CLI
• Framework/Tools + TailwindCSS CLI

langsung saya akan kita kupas tuntas, sebelum itu kita bisa menginstall visual studio code extension “Tailwind CSS IntelliSense” bagi pengguna visual studio code, Untuk memudahkan menggunakan tailwindcss.

Tailwind CSS IntelliSense

INSTALASI [1] | HTML, CSS, Javascript + TailwindCSS CDN

Ini merupakan cara paling mudah, yaitu dengan menggunakan TailwindCSS CDN

kita bisa mulai dengan membuat file HTML seperti biasa

link file html yang akan menggunakan TailwindCSS ke CDN TailwindCSS

Link CDN serta intruksi lebih lengkap silahkan cek dokumentasinya di: https://tailwindcss.com/docs/installation#using-tailwind-via-cdn

index.html file dengan TailwindCSS CDN

Sekarang coba buka file html tersebut di browser, seharusnya sekarang tampilan website kamu barusan akan seperti berikut:

tampilan pada browser

wah mantap, textnya jadi center karena class “text-center“ yang kita berikan. Ehhh tapi kenapa element heading 1 (H1) kita jadi kecil? font weight nya juga tidak bold, dan jenis font berjenis sans, padahal kita tidak ada menuliskan css untuk itu secara explisit.

Yapss… TailwindCSS melakukan CSS Reset / normalize untuk kita. TailwindCSS sendiri dibangun di atas modern-normalize.
Apa gunanya? bukannya bikin ribet harus mengatur ulang?

mungkin bisa sedikit merpotkan, tapi dengan ini css kita dapat terlihat sama di semua browser, karena default style browser / user agent style sudah di override oleh css reset / normalize. Dengan begini kita tidak perlu takut jika tampilannya akan berbeda di setiap browser. Dan kita juga lebih bebas dalam melakukan styling dengan leluasa. Mantap!

Info lebih lengkap mengenai CSS Normalize pada TailwindCSS bisa di lihat di https://tailwindcss.com/docs/preflight

bagaimana mudah bukan?, yup hanya menambahkan sebaris CDN, kita sudah dapat menggunakan tailwindCSS, eeitss… tapi banyak kekurangannya.

https://tailwindcss.com/docs/installation#using-tailwind-via-cdn

beberapa di antaranya kita tidak dapat melakukan kustomisasi default tema, tidak bisa menggunakan beberapa arahan seperti @apply dan @variants, tidak bisa menggunakan beberapa fitur lainnya, tidak bisa menginstall third-party plugins, dan tidak bisa melakukan tree-shake untuk css yang tidak digunakan (remove unused css).

Jika tidak terkendala oleh beberapa kekurangan di atas, kamu bisa menggunakan versi CDN nya.

INSTALASI [2] | HTML, CSS, Javascript + TailwindCSS CLI

Jika kamu tidak ingin menggunakan CDN karena keterbatasan yang ada, kamu bisa gunakan TailwindCSS CLI, ini adalah cara terbaik yang bisa kamu pakai, karena semua fitur dan super power dari TailwindCSS dapat kamu gunakan dan manfaatkan. Bagaimana caranya? mari kita mulai!

Buat folder dan file yang kita butuhkan, kita akan bagi project kita menjadi 2 bagian yaitu folder src (berisi code sumber yang akan di proses/build/compile), dan folder build (berisi code hasil proses/build/compile dari folder src). folder build ini yang akan di bawa ke tahap production dan di deploy.

Tidak ada peraturan bagaimana kamu memanagement project kamu. Jadi sesuaikan kembali ke kebutuhan kamu.

Di dalam folder build kita letakan fileindex.html kita, karena file html kita tidak akan kita proses jadi akan kita letak di folder buid, cara seperti ini sebenarnya sangat terasa ketika menggunakan module bundler seperti Webpack, nammun saat ini kita akan fokus ke basic nya dengan html, css, js. Jika ingin saya sharing mengenai module bundler jangan sungkan sarankan di kolom komentar ya.

tailwindcss-project/
├─ build/
│  ├─ index.html [+]
├─ src/ [+]

Selanjutnya kita perlu menginstall tailwindCSS CLI nya melalui javascript package manager, kamu bisa menggunakan NPM atau YARN. Di sini saya akan pakai NPM.
Sebelum itu pastikan di PC kamu sudah terinstall Nodejs versi 12.13.0 atau lebih. Kamu bisa install di https://nodejs.org/.

Setelah kamu memiliki NodeJS dan NPM/YARN, pertama kita perlu menginisialisasi project kita dengan NPM/YARN, mari ke terminal (pastikan berada di direktori yang tepat, dalam kasus ini pastikan terminal kamu mengarah ke folder tailwindcss-project), lalu jalankan perntah

npm init -y

jika sudah maka kamu akan kemunculan file baru package.json, maka struktur projeck kita akan seperti berikut:

tailwindcss-project/
├─ build/
│  ├─ index.html
├─ src/
├─ package.json [+]

Setelah kamu memiliki NodeJS dan NPM/YARN, mari kita install tailwindcss CLI dengan perintah berikut lalu enter (pastikan berada di direktori yang tepat, dalam kasus ini pastikan terminal kamu mengarah ke folder tailwindcss-project):

npm i -D tailwindcss

i = install
-D = — save-dev / save package as devDependencies
tailwindcss = package

kita install tailwindcss ke devDependencies karena package ini tidak akan di bawa ke production, karena hanya sebagai CLI tools untuk tailwindCSS kita.

kamu juga boleh menginstallnya secara globals dengan menambahkan flag
-g saat menginstall package, jangan lupa menambahkan sudo di awal jika ingin menginstall secara global pada linux/mac.

Jika sudah, pastikan tidak ada ERROR yang muncul. Jika berhasil maka akan muncul folder node_modules dan file package-lock.json, maka struktur folder kita akan manjadi:

tailwindcss-project/
├─ build/
│  ├─ index.html
├─ node_modules/ [+]
├─ src/
├─ .gitignore
├─ package-lock.json [+]
├─ package.json

Jangan lupa untuk membuat file .gitignore dan list folder node_modules ke dalamnya jika menggunakan VCS seperti GIT

Selanjutnya kita perlu membuat konfigurasi tailwindcss kita, caranya? kita bisa menggunakan tailwindcss CLI untuk membuatkannya untuk kita. caranya, jalankan di terminal perintah berikut:

npx tailwindcss init

Untuk menginisialisasikan tailwindcss kita menggunakan npx untuk langsung mengakses package secara online dan menjalankannya tanpa perlu menginstallnya. Ini berlaku juga kita tidak menginstall packagetailwindcss secara global. jika kita menginstall nya secara global kita bisa melakukannya tanpa npx . Hmmm bukannya kita sudah install tapi di devDependencies? yap benar, kalau kita install secara local di project tertentu, perintahnya hanya bisa di jalankan melalui script di package.json.

Jika berhasil, maka kita akan di buatkan file tailwind.config.js

maka strukur folder kita akan menjadi

tailwindcss-project/
├─ build/
│  ├─ index.html
├─ node_modules/
├─ src/
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ tailwind.config.js [+]

kamu bisa intip intip apa isi file tailwind.config.js yang di buatkan oleh tailwindcss.

Buat file css di folder src file css ini sebagai entrypoint untuk ngebuild tailwindCSS kita, untuk namanya bebas, kali ini saya akan beri nama tailwind.css, maka struktur folder kita akan menjadi seperti berikut:

tailwindcss-project/
├─ build/
│  ├─ index.html
├─ node_modules/
├─ src/
│  ├─ tailwind.css [+]
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ tailwind.config.js

di dalam file tailwind.css tuliskan seperti berikut:

ini merupakan bagian dari tailwindCSS untuk mengimport beberapa komponen yang tailwindCSS perlukan.

Itu semua yang kita perlukan untuk setup paling minimal. Selanjutnya kita perlu menambahkan script yang akan di jalankan untuk melakukan build tailwindCSS kita di package.json

tambahkan script build:tw, penamanya nama script bebas. Lalu hapus / hiraukan script test .

tailwindcss = perintah tailwindcss CLI
-i = flag input (lokasi entrypoint css tailwind yang kita buat sebelumnya)
-o = flag output (lokasi dimana hasil build TailwindCSS kita akan di buat)

sekarang coba kita jalankan dengan cara menjalankan perintah berikut:

npm run build:tw

terminal

jika berhasil maka akan muncul file CSS baru di folder build dengan nama tailwind-style.css sesuai seperti yang kita tuliskan pada flag -o . Maka struktur folder kita akan seperti berikut:

tailwindcss-project/
├─ build/
│  ├─ index.html
│  ├─ tailwind-style.css [+]
├─ node_modules/
├─ src/
│  ├─ tailwind.css
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ tailwind.config.js

yey kita berhasil melakukan build TailwindCSS kita. Coba lihat pada file tailwind-style.css sekarang di sana terdapat seluruh utility class TailwindCSS yang siap di gunakan. Cara pakainya kita bisa seperti biasa melakukan link ke CSS

sekarang coba jalankan di browser… dan voilaa… kamu berhasil membuat menggunakan TailwindCSS CLI. Namun apa bedanya dengan menggunakan CDN ? bahkan lebih buruk, coba lihat file tailwind-style.css di sana ada berjibun class.

tailwind-style.css

hingga 188.381 baris, bagaimana dengan size nya?

file manager

Hanya sebuah file CSS hingga 3.8MB. Ini sangat lah besar. Padahal kita hanya memakai 1 class text-center.Kita tidak bisa membawa ini ke production. Bagaimana cara mengatasinya? Karena kita menggunakan CLI, kita punya banyak fitur yang bisa kita gunakan, salah satunya adalah fitur tree-shake / (remove unused css) yang sebelumnya kita singgung.

Cara menggunakannya cukup mudah, kita akan mengatur konfigurasi tailwindcss kita di tailwind.config.js

kita tanbahkan file file dan lokasi nya pada array purge , kita bisa menggunakan REGEX agar lebih memudahkan. Pada contoh di sana kita memasukan regexbuild/**/*.html dan build/**/*.js maksudnya untuk memberitahukan tailwindcss untuk memantau file html dan js yang berada pada folder build dengan kedalaman folder berapapun. kamu bisa memasukan lokasi file lainnya jika di perlukan. Degan begini, tailwindcss akan melihat file yang kita sebutkan di atas jika ada class tailwindcss yang tidak digunakan di sana maka tidak akan di buatkan oleh tailwindcss.

Satu lagi yang perlu kita lakukan sebelum bisa benar benar melakukan nya, kita perlu memberitahukan enviroment NODE_ENV ke production, karena proses ini hanya dapat berjalan di lingkungan production. Cara melakukannya cukup mudah, cukup jalankan perintah NODE_ENV=production pada script build:tw kita di package.json

"build:tw": "NODE_ENV=production tailwindcss -i src/tailwind.css -o build/tailwind-style.css"

yey sekarang kita sudah bisa menjalankannya lagi dengan perintah:

npm run build:tw

terminal

hebat sekarang waktu yang di perlukan hanya +- 3961ms, sebelumnya bisa mencapai 7114ms. Dengan demikian kita sudah berhasil menghapus css yang tidak diperlukan, mari kita cek kembali file tailwind-style.css

tailwind-style.css

Sekarang hanya tersisa 656 baris saja. Masi banyak padahal kita hanya pakai 1 class saja?. Seperti yang kita bahas sebelumnya tailwindcss menggunakan css normalize, akan ada style yang akan menimpa style default browser / user agent, informasi lebih lanjut bisa dilihat di https://tailwindcss.com/docs/preflight

Perlu di perhatikan tailwindcss tidak akan menghapus animation keyframe secara default, kita harus memberikan konfigurasi tambahan, jika berminat bisa lihat di https://tailwindcss.com/docs/optimizing-for-production#removing-unused-keyframes

Sekarang jika kamu menjalankan nya di browser kembali dan jangan lupa di refresh, maka tampilan akan sama seperti sebelumnya.

ehhh kenapa kalau saya kasih class yang lain tidak berguna?. Perlu di perhatikan jika melakukan build dan purge, semua class yang tidak di pakai sebelum proses build akan di hapus.

Lah terus bagaimana kalau mau menambahkan class lainnya, masa harus build ulang setiap menambah class walau hanya 1, dan sekali build bisa memakan waktu 3000ms an.

Oleh karena itu kita perlu membuat 1 script lagi untuk menjalankannya di tahap development.

menambahkan script dev:tw di package.json

Dengan menghapus NODE_ENV maka tailwindcss tidak akan melakukan purge css. Untuk nama script itu bebas kali ini kita akan memberi nama dev:tw

Sekarang ketika kita berniat untuk proses development, kita bisa menjalankan dev:tw dan saat production kita bisa menjalankan build:tw .

Selanjutnya kita akan menggunakan fitur paling menarik dari TailwindCSS, yaitu JIT (Just In Time Compiler), diamna kita bisa melakukan Compile / build ulang tailwindcss ketika melakukan perubahan. Keren bukan?

Cara mengaktifkannya cukup mudah, tambahkan mode: 'jit' pada tailwind.config.js .

terminal

mantap kamu sudah menghidupkan mode JIT , jika muncul warn pada terminal itu tidak masalah karena mode JIT masih dalam preview feature atau masih dalam proses peninjauan, kemungkinan dapat menimbulkan beberapa masalah, sepengalaman saya, saya selalu menggunakan mode JIT dan hanya mengalami 1 kendala yaitu mode JIT terkadang tidak menyala, cara mengatasinya cukup restart server, ini juga jarang terjadi. Kedepannya akan di perbaiki.

mode JIT sudah aktif, namun kenapa ketika menambahkan class baru tidak berjalan? yups, kita perlu mengaktifkan watch untuk memantau perubahan, caranya cukup mudah

"dev:tw": "tailwindcss -i src/tailwind.css -o build/tailwind-style.css -w"

cukup tambahkan flag -w untuk watch pada script dev:tw karena kita hanya ingin menggunakannya saat development saja. Coba jalankan kembali

npm run dev:tw

terminal

Sekarang terminal kita tidak langsung berhenti menutup, tailwindcss sekarang sedang memantau perubahan yang akan terjadi pada file file yang kita list pada purge di configurasi tailwindcss kita. Sekarang kamu bebas menggunakan utility class yang di sediakan tailwindcss sepuasnya. Setiap kita melakukan perubahan lalu save, maka tailwindcss akan melakukan rebuild, coba sandarkan file tailwind-style.css dan index.html bersebelahan, dan lihat apa yang terjadi ketika kita menambahkan class baru dan save di index.html

visual studio code

keren… setiap melakukan perubahan pada file yang kita list di purge maka tailwind-style.css akan menambahkannya.

tidak hanya itu yang bisa dilakukan pada mode JIT, kita bisa menuliskan value attribute langsung pada class, dll. mari kita lihat di https://tailwindcss.com/docs/just-in-time-mode#new-features

Just-in-Time Mode - Tailwind CSS

Selamat berexplorasi.
masih banyak fitur yang diberikan tailwindcss, seperti minify css dengan menambahkan flag -m pada script, seperti yg kita lakukan pada -w .

INSTALASI [3] | HTML, CSS, Javascript + PostCSS + TailwindCSS CLI

ingin menggunakan PostCSS bersama tailwindCSS? tentu saja sangat bisa. Penggunaan PostCSS bersifat opsional, Silahkan install postCSS dan plugins plugins yang kamu perlukan pada postCSS. Jangan lupa tetap melakukan instalasi Tailwind CLI seperti sebelumnya.

npm install -D postcss

informasi lebih lengkap silahkan cek https://tailwindcss.com/docs/installation#install-tailwind-via-npm

tambahkan file konfigurasi PostCSS dengan nama postcss.config.js

tailwindcss-project/
├─ build/
│  ├─ index.html
│  ├─ tailwind-style.css
├─ node_modules/
├─ src/
│  ├─ tailwind.css
├─ .gitignore
├─ package-lock.json
├─ package.json
├─ tailwind.config.js
├─ postcss.config.js [+]

lalu letakan konfigurasi postCSS kita di sana

konfigurasi postCSS

untuk menggunakan konfigurasi postCSS kita dapat memberikan flag — postcss.

"build:tw": "NODE_ENV=production tailwindcss -i src/tailwind.css -o build/tailwind-style.css --postcss",
"dev:tw": "tailwindcss -i src/tailwind.css -o build/tailwind-style.css -w --postcss"

selamat postCSS kamu sudah bisa digunakan.

informasi lebih lengkap silahkan cek di https://tailwindcss.com/docs/installation#using-a-custom-post-css-configuration

INSTALASI [4] | Framework/Tools + TailwindCSS CLI

Kamu menggunakan Framework/Tools? seperti ReactJS, Vue, Laravel, dll ?. Tentu saja TailwindCSS bisa digunakan bahkan lebih mudah untuk proses instalasinya. Silahkan cek masing masing framework/Tools yang ada di:

https://tailwindcss.com/docs/installation#using-a-custom-post-css-configuration

ikuti petunjuk masing masing framework/tools.

Akhir kata

TailwindCSS masih punya banyak fitur dan kelebihan yang tidak bisa saya sampaikan di sini, untuk semua itu bisa kita lihat di dokumentasi TailwindCSS itu sendiri yang saya rasa sudah sangat jelas dan lengkap di https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Mohon maaf jika ada salah dan kata, saya ucapkan terima kasih.

Jika ada feedback, pertanyaan, dll jangan sungkan untuk diberikan.

connect with me: https://edwintantawi.vercel.app/contact