Membangun Aplikasi Reservasi Meja dengan MEVN — Bagian Ketiga

Bagaimana saya membangun aplikasi reservasi meja dengan MEVN dan menerapkan TailwindCSS?

Muhammad Azmi
Jul 30 · 8 min read
Image for post
Image for post

Membangun Aplikasi Reservasi Meja dengan MEVN — Daftar Seri


Persiapan Styling

npm install tailwindcss vue-tailwind
Image for post
Image for post
npx tailwindcss init
Image for post
Image for post
Image for post
Image for post

Component

Navbar

Image for post
Image for post
Tampilan Navbar

OrderComponent

Image for post
Image for post
Tampilan OrderComponent

ModalOrder

Image for post
Image for post
Tampilan ModelOrder

General Styling

Header

Image for post
Image for post
Bagian header yang sudah di styling

Form Input

Image for post
Image for post
Bagian form input yang sudah di styling

Select

Image for post
Image for post
Bagian select menu yang sudah di styling
Image for post
Image for post
Inisialisasi nama-nama menu untuk ditampilkan dalam select
Image for post
Image for post
Select yang sudah berisi nama menu

Input Quantity

Image for post
Image for post
Bagian input quantity yang sudah di styling
Image for post
Image for post
Tambahan di bagian methods untuk logic menambah dan mengurangi quantity

Save & Delete

Image for post
Image for post
Tombol save dan delete yang sudah diberi styling

Extra

Image for post
Image for post
Menambahkan page title
Image for post
Image for post
Konfigurasi file Mixin
Image for post
Image for post
Import Mixin di main.js
Image for post
Image for post
Hasil akhir dari styling dengan TailwindCSS

Selanjutnya?


Easyread

Easy read, easy understanding.