Instalasi dan Konfigurasi Tailwind CSS
Software Requirements
- Web Browser : Google Chrome/ Mozila Firefox/ Edge/ Safari
- Code Editor : Visual Studio Code
- VSCode Extension : Tailwind CSS IntelliSense, Live Preview, dan Post CSS Language Support
- Package Manager : NPM (Node.js)
- Terminal : CMD/ PowerShell/ Git Bash
Instalation Tailwind CSS Via CDN (Content Delivery Network)
Gunakan Play CDN untuk mencoba Tailwind langsung di peramban tanpa langkah
pembuatan apa pun. Play CDN dirancang untuk tujuan pengembangan saja, dan
bukan pilihan terbaik untuk produksi.
1. Include Folder Ke Editor Visual Studio Code dan Buat File index.html baru
Buat folder baru dengan nama belajar-tailwind-css atau bebas, lalu buka
aplikasi editor visual studio code, buka menu File 🠆
Open Folder 🠆 Cari Folder belajar-tailwind-css .
Buat file index.html di editor visual studio code dan jalankan
Live Server, lalu panggil alamat localhost:5500 di browser google
chrome.
2. Tambahkan skrip Play CDN ke HTML Anda
Tambahkan tag skrip Play CDN ke <head> berkas HTML Anda, dan mulailah
menggunakan kelas utilitas Tailwind untuk menata konten Anda.
<script src="https://cdn.tailwindcss.com"></script>
Hasilnya kode html akan di reset oleh tailwind css dengan nama utility
Preflight.
3. Mencoba Menggunakan Utility-Firts Tailwind CSS pada HTML
Contoh disini menggunakan class utility first tailwinds css
text-3xl (ukuran text) dan font-bold (tebal text).
Instalation Tailwind CSS Via CLI (Command Line Interface)
Cara termudah dan tercepat untuk memulai dan menjalankan Tailwind CSS dari
awal adalah dengan alat bantu Tailwind CLI. CLI juga tersedia sebagai
eksekusi mandiri jika Anda ingin menggunakannya tanpa menginstal Node.js.
1. Install Tailwind CSS
Instal tailwindcss melalui npm, dan buat berkas tailwind.config.js Anda.
npm init -y
npm install -D tailwindcss
npx tailwindcss init
2. Konfigurasi Path Template
Tambahkan jalur ke semua berkas template di berkas tailwind.config.js.
Keterangan :
./ 🠆 folder root
** 🠆Mengecek semua folder
* 🠆 Mengecek semua file
3. Menambahkan Directives Tailwind ke CSS Anda
Tambahkan arahan(directives) @tailwind untuk setiap lapisan Tailwind ke berkas
CSS utama Anda.
Keterangan :
@tailwind base
Tailwind akan menjalankan Preflight/ Mereset style yang di berikan oleh
browser.
@tailwind components
Tailwind akan meminta components library, seperti container, grid system.
@tailwind utilities
Terakhir Tailwind akan memanggil directives utilities, ini class-class
utilities yang akan kita gunakan.
4. Memulai Proses Pembuatan CLI Tailwind
Jalankan alat CLI untuk memindai file template anda untuk mencari kelas dan
membangun CSS.
npx tailwindcss -i ./input.css -o ./ouput.css --watch
Hasil dari tailwind mengcompile dari input.css menjadi output.css dan file
output yang akan digunakan di file index.
Menghubungkan file output.css ke index.html
5. Mulai gunakan Tailwind di HTML Anda
Tambahkan file CSS yang Anda kompilasi ke <head> dan mulai gunakan kelas
utilitas Tailwind untuk menata konten Anda.
Utility First Tailwind CSS yang digunakan :
- text-2xl 🠆 ukuran font
- font-bold 🠆 ketebalan font
- underline 🠆 garis bawah pada text
Tips Merapihkan Struktur Folder dan File Tailwindcss
1. Folder src/css/input.css 🠆 Tempat menyimpan input.css
2. Folder public 🠆 Berisi file index yang akan di ekspos ke luar dan
bisa dilihat oleh siapapun
2 Cara Menghilangkan Class CSS yang tidak digunakan/ Tergantikan
1. Restart builder/watch
- CTRL + C 🠆 untuk menghilangkan builder/watch
- npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch 🠆
Menjalankan Execute
2. Save Ulang File
- masuk ke file tailwind.config.js, lalu tekan CTRL + S maka secara otomatis
hilang
https://tailwindcss.com/docs/installation 🠆 Docs
Mempersingkat Perintah Rebuild Tailwind CSS dengan Fitur Script di NPM
Masuk ke file package.json lalu tambahkan.
"scripts": {
"dev" : "npx tailwindcss -i ./src/css/input.css -o ./public/css/style.css --watch"
}
Memperkecil(Minify) Ukuran Size File Style.css
Ukuran original style.css 11 KB
Perintah ini biasa digunakan ketika front end sudah selesai.
npx tailwindcss -o ./public/css/final.css --minify
