hei..hei, udah lama banget ga pernah update tulisan lagi nih :”) gimana kabar kalian? aku malu banget karena sempet sempetnya berhenti nulis sejak bulan juli tahun baru karena banyak hal yang mendadak terjadi gitu aja v: oh iya selamat tahun baru juga meski ini udah lewat mayan jauh sih wkwkwk
anyway sekarang aku mau coba balikin kebiasaan nulis lagi dan semoga tulisan ku disini bisa bermanfaat buat kalian kalian yang udah sempetin waktunya buat baca :)
okey topik kali ini sebenernya aku juga bingung enaknya bahas apaan, tapi berhubung belakangan ini aku lagi kecanduan ama tailwindcss jadi aku bakal bahas itu aja ya wkwkkwk
buat kalian yang belum tau apa itu tailwindcss, singkatnya tailwindcss merupakan salah satu framework yang bersifat utility-first yang bisa kita gunakan untuk membuat desain interface untuk website kita. untuk penjelasan lebih rinci nya mungkin aku akan buatkan di postingan selanjutnya biar postingan kali ini ga kepanjangan wkwkwk, simplenya tailwindcss menyediakan banyak class css siap pakai yang bisa kita gunakan untuk membuat komponen dalam membangun interface kita (berbeda dengan framework lain seperti bootstrap yang menyediakan kelas componen siap pakai seperti class ‘card’, disini kita bisa lebih leluasa membangun komponen sesuai dengan keinginan kita dengan menggunakan class yang sudah disiapkan)
Langkah-langkah installasi tailwindcss
pertama-tama pastikan kalian sudah menginstall npm di komputer / laptop masing masing, kalau belum kalian bisa cek link berikut ini
kemudian kalian masuk ke command line kalian lalu pastikan kalian sudah berada di direktori folder yang nantinya akan menjadi folder projek tailwindcss kalian
disini aku contohin dengan masuk ke direktori dengan nama “install_tailwind” terus disana aku jalanin command
npm init -y
kemudian lanjut jalankan command berikut ini untuk menginstall tailwind dengan npm
npm install tailwindcss
kalau installasi sudah selesai, silahkan buka folder “install_tailwind” (atau apapun yang kalian buat) dan tambahkan folder css yang berisikan file style.css pada root folder nya. struktur folder kalian kurang lebih akan menjadi seperti ini
pada file css/style.css tambahkan kode berikut untuk menambahkan tailwindcss pada file css kalian
@tailwind base;
@tailwind components;
@tailwind utilities;
oh iya, kita juga harus menginstall beberapa hal lagi dengan menjalankan command berikut ini karena hal ini diperlukan dalam penggunaan tailwind dalam projek kita nantinya
npm install postcss-cli autoprefixer
setelah installasi selesai kita bisa membuat configurasi PostCSS, silahkan jalankan command berikut untuk membuat file postcss.config.js pada root folder kalian (kalian juga bisa membuatnya secara manual kalau kalian mau)
touch postcss.config.js
kurang lebih struktur folder kalian akan menjadi seperti berikut ini
tambahkan baris kode berikut ke file postcss.config.js kalian
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
hal ini bertujuan untuk memastikan proses PostCSS akan melakukan pemrosesan dengan ‘tailwindcss’ dan ‘autoprefix’ yang tadi sudah kalian install
langkah selanjutnya kita akan membuat file konfigurasi tailwindcss yang nantinya kita bisa gunakan untuk membuat configurasi sendiri untuk mempermudah kerja kita dengan tailwindcss, caranya dengan menjalankan command berikut ini
npx tailwindcss init
hasilnya kira kira akan menjadi seperti berikut ini
sekarang buka file package.json pada root folder kalian dan tambahkan baris kode berikut pada bagian script,
"build": "postcss css/style.css -o build/style.css"
gunanya adalah ketika PostCSS dieksekusi dan memproses file css/style.css maka output dari proses tersebut akan disimpan pada file build/style.css
kemudian jalankan command berikut untuk mengeksekusi PostCSS
npm run build
kalau sudah selesai maka akan muncul direktori baru dengan nama ‘build’ yang berisi file style.css, kira kira seperti ini
sekarang mari kita buat sebuah file index.html kira kira seperti berikut untuk mengecek apakah tailwind berhasil kita install
coba kalian buka pada browser masing masing, kalau kalian mengikuti dengan benar maka akan muncul tampilan seperti berikut ini
buat kalian yang berhasil selamat karena sudah bisa menginstall tailwindcss di perangkat masing masing dan semisal masih belum berhasil coba dibaca ulang siapa tau ada beberapa step yang kelupaan, tetap santai dan coba aja
ok deh seperti biasa belum semua materi dikupas tuntas disini, masih banyak yang bisa kalian explore diluar sana. Kalau ada yang punya pendapat lain atau mungkin kurang setuju ama yang aku tulis bisa kita diskusi di kolom komentar ya. Kalau ada salah kata atau sejenisnya mohon dimaafkan dan kalau bisa dikoreksi agar aku bisa lebih baik lagi kedepannya.
Oke itu dulu untuk seri kali ini, saya Merta pamit undur diri dan ingat untuk ‘Haus akan ilmu baru’ :)
