STEP BY STEP INSTALLASI TailwindCSS
1. Pastikan NodeJS uda ke install di windows kalian dengan menjalankan script node -v di
CMD. Versi minimal 19
2. Buka [Link] pada bagain USING POSTCSS
3. Buka CMD folder project kalian
4. Step pertama run di CMD satu persatu
5. Jika berhasil file yang di dapat dari installasi akan muncul
6. Buat file [Link] dan copy paste config yang disediakan
7. Buat FOLDER src yang berisi FOLDER css dan FILE html kalian
8. Kemudian buka file [Link] dan copy paste confignya
9. Kemudian buat FILE css diDALAM FOLDER css yang bernama [Link]
Copy paste confignya ke dalam [Link]
10. Nah step selanjutnya pada web yaitu menjalankan npm run dev TAPI kita harus mengatur isi
konfigurasi dari script npm run dev terlebih dahulu
11. Pertama kembali ke bagian tailwind CLI dan copystep ke4
12. Buka [Link], tambahkan script dev lalu paste CLI nya, masih didalam { pertama
13. Lalu perhatikan struktur folder berikut. Alamat folder untuk mengakses [Link] adalah
.src/css/[Link]
14. Maka kita perlu mengganti alamat pada konfigurasi dev tadi menjadi
15. Jika sudah kita baru bisa menjalan script dev dengan npm run dev pada CMD folder atau
Terminal VSCode
16. Jika sudah cek folder css maka kalian akan mendapatkan [Link] hasil dari run script tadi
17. Panggil CSSnya pada <head> HTML
18. Penugasan tambahan hehe
Coba codingan berikut ini pada project kalian
Harusnya akan tampil seperti ini
19. TUGAS lagi styling button login register sesuka kalian
Contoh class TailwindCSS
• flex: Mengaktifkan flexbox.
• m-4: Margin semua sisi.
• mt-2: Margin top.
• mb-2: Margin bottom.
• p-4: Padding semua sisi.
• pt-2: Padding atas.
• pb-2: Padding bawah.
• text-sm: Ukuran teks kecil.
• text-lg: Ukuran teks besar.
• font-light: Ketebalan teks ringan.
• font-bold: Ketebalan teks tebal.
• bg-blue-500: Latar belakang biru kecerahan 500
• bg-gray-200: Latar belakang abu-abu.
• rounded-lg atau xl: border radius
cari cari class dari dokumentasi tailwind
jenis warna tailwind: [Link]
justify pada flex [Link]
padding [Link]
margin [Link]
width [Link]
font-size [Link]
background [Link]
border radius [Link]
dll