Instalasi & Konfigurasi Tailwind CSS
Disclaimer : Materi ini diambil dari Channel Youtube WPU
Software Requirements
- Web Browser : Google Chrome
- Code Editor : Visual Studio Code
- VSCode Extension : Tailwind CSS IntelliSense, Live Preview, PostCSS Language Support
- Package Manager : NPM (Node.js)
- Terminal : Powershell, Git Bash
Installasi TailwindCSS
Ada beberapa cara, untuk menginstall Tailwind. Pertama, Menggunakan CLI, Menggunakan PostCSS, Menggunakan Framework Guide, Menggunakan Play CDN. Installasi yang akan di jelaskan sekarang installasi Tailwind menggunakan CLI dan menggunakan Play CDN.
Untuk installasi TailwindCSS menggunakan Play CDN
<script src=”https://cdn.tailwindcss.com"></script>
Temen-temen bisa menambahkan script di atas ke bagian Head nya dari Struktur HTML temen-temen. Kemudian, temen-temen bisa langsung menggunakan TailwindCSS nya. Kekurangannya kita ngga bisa menggunakan auto complete dari Tailwind CSS.
Installasi TailwindCSS menggunakan CLI
Sebelum melakukan penginstallasian pastikan temen temen sudah menginstall Node JS Karena kita akan menginstall TailwindCSS menggunakan NPM.
Langkah-langkah installasi & Konfigurasi :
- Inisialisasi foldernya terlebih dahulu. Menggunakan NPM init tambahkan -y agar jawabannya menjadi jawaban default. Jadi NPM init -y pada terminal gitbash atau powershall. Maka akan muncul file package.json
- Ketik npm install -D tailwindcss postcss autoprefixer. Akan muncul folder, node module file-file yang dibutuhkan untuk penggunaan TailwindCSS. Kemudian, di file package.json di bagian depedencies ada tambahan tailwindcss dengan versinya.
- Ketik, npx tailwindcss init. Ini untuk menginisialisasi tailwindnya agar ada config tailwindnya.
- Konfigurasi file template kita yang nantinya akan di menggunakan template tailwindCSS.
- Tambahkan tailwind directive. Untuk nama file css nya bebas disini aku bikin dengan namba input.css . @tailwind base; @tailwind components; @tailwind utilities;
- Ketik, npx tailwindcss -i ./input.css -o ./output.css — — watch
- Kemudian, file output.css bisa kita masukkan ke file html kita sehingga tailwindcss kita bisa di gunakan.
Catatan : Untuk memunculkan autocomplete nya bila tidak muncul CTRL + Spasi. Maka autocomplete nya akan muncul. Agar npx tailwindcss -i ./input.css -o ./output.css — — watch tidak harus di ketik panjang berkali kali ketika proses development kita bisa menambahkan nya di bagian scripts di package.json
Jika kita, sudah selesai dengan development kita, kita bisa memperkecil si file css nya dengan cara meminify si file css nya. dengan mengetikkan npx tailwindcss -o ./public/css/final.css — — minify. Maka, nanti akan muncul file final.css yang sudah di minify. Sehingga ukurannya lebih kecil daripada ukuran aslinya.
