Embedded Files
install vue 3 sudah, maka sekarang tugasnya adalah install tailwind css. Tailwind adalah framework css yang digunakan untuk mempermudahkan kita dalam mepercantik tampilan. untuk tutorial kali ini, saya menggunakan tailwind yang diinstall secar offline, jadi tidak tergantung pada Internet (CDN)
pertama pastikan dulu ketik perintah: npm install
maka akan muncul folder node_modules pada root project. jika sudah ada node_modules tidak perlu hal tersebut
setelah itu install dependency yang dibutuhkan termasuk tailwindcss.
ketik pada terminal seperti digambar ini: npm install -D tailwindcss@3.4.1 postcss autoprefixer
setelah berhasil, maka cek pada folder node_moduls/.bin/
akan terdapat tailwindcss
setelah itu ada, maka ketikan untuk inisiasi project: npx tailwind init -p
dan akan muncul file tainwind.config.js dan vite.config.js
buat file baru pada folder src/assets dan beri nama tailwind.css serta isikan codenya seperti dibawah ini
setelah itu tambahkan import code-code tailwind pada file main.js yang berada folder src/main.js.
tambahkan baris kode: import .assets/tailwind.css, sehingga terlihat kode lengkap file tersebut seperti ini
kemudian testing code tailwind apakah sudah terpanggil dengan baik. cara testing dapat dilakukan dengan merubah file utama App.vue yang berada pada folder src.
tuliskan kode seperti dibawah ini
kemudian buka terminal dan tuliskan perintah: npm run dev
jalankan pada browser
next --->
Page updated
Report abuse