Cara Mudah Install Tailwind CSS Untuk Pemula

by affanul · 18/12/2025

Pada tulisan ini kita akan menginstal tailwind CSS versi 4, ada beberapa cara instal tailwind css yang pertama adalah dengan menyisipkan CND pada head halaman website kita :

Instal Tailwind CSS dengan CDN

 <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

Index.html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline text-center text-sky-800">
      Hello World!
    </h1>
  </body>
</html>

Instal Tailwind CSS dengan CLI

Terminal:

npm install tailwindcss @tailwindcss/cli

src/input.css

@import "tailwindcss";

Terminal

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

src/index.html

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline text-lime-600 text-center">
    Hello Ilmuweb!
  </h1>
</body>
</html>

Untuk lebih lengkap install tailwind CSS bisa mengunjungi laman dokumentasi berikut TailwindCSS Instalation di dokumemtasinya juga ada panduan untuk instal tailwindcss di berbagai framework seperti Laravel, NextJs, React dan masih banyak.

Sekian dulu teman-teman tutorialnya, terima kasih sudah membaca sampai selesai, semoga bermanfaat