Install Tailwind CSS Dengan CDN vs Tailwind CLI

Tailwind CSS merupakan salah satu framework CSS populer yang membantu developer untuk membuat tampilan website yang modern serta responsive. Sama seperti framework CSS lainnya, Tailwind juga menyediakan class yang siap digunakan tanpa perlu menyentuh file CSS. Untuk bisa menggunakan Tailwind CSS tentu kita harus menginstall terlebih dahulu, terdapat dua cara yang umum digunakan, bisa dengan Content Delivery Network (CDN) atau dengan Tailwind CLI. Tanpa perlu berlama-lama lagi, kita langsung saja ke caranya.

Install Tailwind CSS dengan Play CDN

Sebelum membahas caranya, kita cari tau dulu apa itu CDN. Content Delivery Network (CDN) sederhananya adalah jaringan server global untuk mengirim konten website kita. jika kita mengirim konten tersebut dari server utama kita kemungkin jaraknya ke pengguna cukup jauh, yang membuat proses pengiriman konten tidak efisien, dengan CDN konten akan dikirim dari server terdekat dari lokasi pengguna.

Menginstall Tailwind CSS dengan CDN merupakan cara yang paling cepat dan sederhana. Namun, sama seperti framework lain, cara ini tidak direkomendasikan untuk production. Caranya cukup sederhana, kita hanya perlu menambahkan baris code dibawah pada section head file HTML kita.

<script src="https://cdn.tailwindcss.com"></script>

Baris code di atas akan mengimpor versi terbaru dari Tailwind CSS dan jika sudah ditambahkan kita bisa langsung menggunakannya pada website kita.

Konfigurasi Tailwind CSS Dengan Play CDN

Jika Tailwind CSS sudah terpasang dengan CDN kita sudah bisa mencoba Tailwind CSS pada project kita. Tapi tak hanya itu, terdapat beberapa konfigurasi yang bisa kita ubah jika menginstall Tailwind CSS dengan CDN.

Tailwind Config

Tailwind config dapat kita ubah untuk menambahkan token style kita sendiri, untuk mengubahnya kita bisa taruh code ini di section head HTML kita.

<script>
  tailwind.config = {
    theme: {
      extend: {
        colors: {
          clifford: '#da373d',
        }
      }
    }
  }
</script>

Sebagai contoh code di atas akan membuat kita dapat menggunakan warna dengan nama clifford, misalnya text-clifford.

Custom CSS

Custom CSS disini bukan hanya membuat CSS biasa, namun bisa menggunakan semua fitur dari Tailwind CSS, caranya tambahkan baris code berikut ke section head HTML kita.

<style type="text/tailwindcss">
	@layer utilities {
		.content-auto {
			content-visibility: auto;
		}
	}
</style>

Dengan code di atas kita bisa menggunakan class .content-auto dengan fitur Tailwind CSS seperti responsive utilities, contohnya md:content-auto.

Mulai Gunakan Tailwind CSS

Setelah kita mengetahui cara setup Tailwind CSS dengan metode Play CDN, sekarang kita akan coba implementasikan ke file template kita.

<!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>
    <script>
        tailwind.config = {
	        theme: {
            extend: {
	            colors: {
                biru: '#335ef7',
		          }
            }
		      }
        }
    </script>
</head>
<body>
    <div class="h-[100vh] w-full flex justify-center px-4 bg-slate-50">
        <img src="https://buildwithangga.com/themes/front/images/logo_bwa_new.svg" class="w-1/5 mr-6" alt="">
        <h1 class="text-5xl font-bold h-fit my-auto text-biru w-6/12">
            Install Tailwind CSS Dengan CDN
        </h1>
    </div>
</body>
</html>

Jika sudah berhasil maka seharusnya tampilannya akan seperti ini

Tampilan web Tailwind CSS

Install Tailwind CSS dengan Tailwind CLI

Command Line Interface (CLI) merupakan command line program untuk mengeksekusi fungsi di sistem operasi, walaupun mayoritas orang sudah menggunakan yang berbasis GUI, CLI masih sering digunakan untuk mengkonfigurasi, menginstall software, dan juga mengakses fitur yang tidak tersedia melalui GUI.

Untuk melakukan instalasi Tailwind CSS dengan CLI tool, pada device kita memerlukan node.js yang telah terinstall. langkah pertama jalankan command dibawah ini melalui terminal.

npm install -D tailwindcss
npx tailwindcss init

jika sudah dijalankan maka isi project kita akan seperti ini.

Folder structure Tailwind CSS

Konfigurasi Tailwind CSS Dengan Tailwind CLI

setelah menjalankan command diatas kita masih belum dapat menggunakan Tailwind CSS, maka kita akan konfigurasi files yg diperlukan terlebih dahulu.

Template Path

Buat folder ‘src’ pada project dan tambah file .html dan .css. Lalu buka file ‘tailwind.config.js’ lalu tambahkan lokasi file template web kita pada ‘content’. isikan dengan "./src/**/*.{html,js}" dalam kasus ini kita mengarahkan config tersebut ke pada folder ‘src’ dan mencari file dengan ekstensi .css dan .html.

Folder structure Tailwind CSS
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind Directives

Agar file CSS kita terhubung dengan fitur Tailwind CSS, kita akan menambahkan baris code berikut pada file CSS yang baru kita buat tadi, dalam kasus ini cari file ‘input.css’ yang telah kita buat sebelumnya.

@tailwind base;
@tailwind components;
@tailwind utilities;

Build Tailwind CLI

Langkah ini cukup penting dan akan selalu kita jalankan saat mendevelop project dengan Tailwind CSS, karena jika tidak maka perubahan yang kita buat tidak akan memberikan pengaruh. jalankan command berikut pada terminal.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Mulai Gunakan Tailwind CSS

Setelah proses instalasi dan konfigurasi Tailwind CSS dengan CLI selesai, sekarang kita bisa coba implementasikan Tailwind CSS pada file template kita, jangan lupa untuk menambahkan baris code pada file template, agar CSS yang telah di-compile oleh Tailwind CSS dapat terhubung dan digunakan.

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/dist/output.css" rel="stylesheet"> 
</head>
<body>
    <div class="h-[100vh] w-full flex justify-center px-4 bg-slate-50">
        <img src="https://buildwithangga.com/themes/front/images/logo_bwa_new.svg" class="w-1/5 mr-6" alt="">
        <h1 class="text-5xl font-bold h-fit my-auto text-biru w-6/12">
            Install Tailwind CSS Dengan Tailwind CLI
        </h1>
    </div>
</body>
</html>

Jika sudah berhasil, maka tampilannya akan seperti dibawah ini.

Tampilan web Tailwind CSS

Kekurangan dan Kelebihan Play CDN vs Tailwind CLI

Kedua cara diatas tentu memiliki kelebihan dan kekurangannya masing-masing. Play CDN sangat mudah digunakan dan cocok untuk tahap development, apalagi jika kita hanya ingin sekedar mencoba saja. Untungnya Tailwind CSS masih memberikan opsi konfigurasi sekalipun menggunakan CDN walaupun tidak terlalu efektif karena kita mengatur konfigurasi pada file template, hal itu akan membuat project semakin kompleks jika project sudah terlalu besar.

Sedangkan jika menggunakan Tailwind CLI, kita dapat dengan lebih leluasa melakukan configurasi karena file file yang terpisah, walaupun memerlukan banyak setup dan konfigurasi, serta cara ini lebih direkomendasikan jika berada pada tahap production.

Lalu, metode mana yang paling baik?, tentu kembali ke kebutuhan dan preferensi masing-masing. Jika kalian tertarik untuk mempelajari lebih lanjut tentang Tailwind CSS, bisa coba kelas Tailwind CSS gratis dari BuildWith Angga, atau kamu bisa mempelajari styling yang akan sering kamu gunakan dan berbagai macam super tools untuk mempercepat pekerjaan kita dengan Tailwind CSS.