Pada artikel sebelumnya yang berjudul, “Kenapa Lebih Baik Menggunakan Tailwind CSS Untuk Framework CSS Website Kamu”, Kita telah belajar kenapa lebih baik menggunakan Tailwind CSS untuk Framework CSS yang digunakan pada project website yang sedang dibangun.
Maka untuk artikel kali ini Kita akan membahas secara lengkap bagaimana menggunakan TailwindCSS. Atau bagaimana cara memasang Tailwind CSS pada project website yang sedang Kamu kerjakan.
Karena Tailwind CSS memiliki beberapa cara untuk di-implementasikan pada sebuah website, maka untuk itu Kita akan membahas bagaimana cara mengguanakn Tailwind CSS, dengan versi CDN (Content Delivery Network) atau CLI (Command Line Interface).
Sebelum memulai mengikuti artikel tentang Tailwind CSS ini, sebaiknya Kamu sudah menginstall Node.js di sistem operasi Kamu. Karena sebagai Frontend Developer, Node.js adalah alat yang sangat penting untuk mengembangkan sebuah website modern.
Apa itu Nodejs?
Node.js adalah lingkungan runtime JavaScript yang dijalankan di sisi server. Dibangun di atas mesin JavaScript V8 dari Google Chrome, Node.js memungkinkan developer untuk menulis kode JavaScript di sisi server, yang sebelumnya hanya terbatas pada penggunaan di sisi klien (browser).
Saat menginstall Nodejs, maka Kamu akan otomatis menginstall NPM (Node Package Manager).
Apa itu NPM?
NPM (Node Package Manager) adalah manajemen paket untuk lingkungan runtime JavaScript Node.js. Ini adalah repositori online yang menyediakan berbagai Library JavaScript atau Framework JavaScript yang dapat diinstal dan digunakan dalam project Node.js.
Jadi dengan Node.js Kamu bisa menjalankan script dari bahasa Pemrograman JavaScript dimanapun dalam sistem operasi Kamu, yang sebelumnya hanya bisa dijalankan menggunakan web browser saja.
Kemudian, dengan adanya NPM (Node Package Manager) maka Kamu dapat menggunakan Library atau Framework Javascript tanpa harus mendownload scriptnya lewat situs resminya, cukup dengan meng-import library yang digunakan.
Kira – kira untuk penjelasan singkatnya seperti itu, Kamu jangan khawatir jika belum memahaminya.
Untuk menggunakan Tailwind CSS Kamu bisa menggunakan versi CDN atau CLI. Dari kedua versi tersebut memiliki kelebihan dan kekurangannya masing – masing, tetapi jika ingin menggunakan Tailwind CSS versi CLI maka, Kamu harus setidaknya sudah meng-install Node.js.
Cara menggunakan Tailwind CSS menggunakan CDN
- Buka situs resmi Tailwind CSS CDN
- Copy script Tailwind CSS CDN: <script src="https://cdn.tailwindcss.com"></script>
- Letakan pada sebelum tag <pre></head></pre>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</body>
</html>
Kelebihan menggunakan Tailwind CSS CDN
- Tanpa memperlukan konfigurasi
- Semua class sudah siap digunakan
- Bisa tanpa meng-install Node.js
- Bisa dipasang di CMS Wordpress dengan mudah
Kelebihan menggunakan Tailwind CSS CDN
- Kurang flexible
- Lebih berat, karena kita menggunakan semua class
- Tidak bisa menggunakan Tailwind CSS JIT
Cara menggunakan Tailwind CSS menggunakan CLI
- Membuat folder baru
- Buka folder tersebut dengan code editor (VSCode)
- Buka terminal
- Install Tailwind:
npm install -D tailwindcss - Init Tailwind:
npx tailwindcss init - Setting path/jalur templates kamu: tailwind.config.js
- Buat file CSS untuk konfigurasi CSS Tailwind: input.css
- Jalankan proses Tailwind CSS: npx tailwindcss -i ./input.css -o ./output.css –watch
- Panggil file Tailwind CSS yang sudah dibuild: outout.css sebelum tag
Ketika dijalankan sesuai dengan Langkah – Langkah menggunakan Tailwind CSS CLI, maka akan muncul tampilan seperti itu dijalankan.
Kelebihan menggunakan Tailwind CSS CLI
- Sangat Flexibel
- Lebih ringan & cepat
- Responsive untuk semua style
- Bisa memanfaat fitur JIT
- Sangat cocok untuk proses development atau pengembangan
Kekurangan menggunakan Tailwind CSS CLI
- Perlu konfigurasi Tailwind CSS
- Harus install Node.js
- Implementasi lebih sulit untuk website CMS
Kesimpulan
Kamu bisa memilih bagaimana cara menggunakan Tailwind CSS pada project yang sedang Kamu kerjakan saat ini, menggunakan Tailwind CSS CDN atau Tailwind CSS CLI. Dari kedua cara tersebut memiliki kelebihan dan kekurangannya masing – masing, CDN pasti akan lebih mudah, karena hanya menempelkan kode file Tailwind CSS pada tag head, sedangkan untuk CLI kita harus mengkonfigruasi terlebih dahulu agar Tailwind CSS tersebut bisa digunakan di project website Kamu.
Penutup
Semoga artikel tentang bagaimana cara lengkap menggunakan Tailwind CSS ini bisa berguna bagi perkembangan Kamu di dunia web development atau pengembangan web, khususnya kamu sebagai Frontend developer, karena sudah pasti harus berkenalan dengan Framework Tailwind CSS. Jangan ragu untuk berbagi artikel ini dengan teman – teman Kamu, Terima kasih!
