Skip to content
Multi Doc

Getting Started

Installation

Cara tercepat untuk memulai instalasi Tailwindcss adalah melalu Tailwind CLI tool.

Install Tailwind CSS

Buat dan buka sebuah folder project kalian. Buka terminal dan ketikkan perintah:

Terminal window
npm install -D tailwindcss
Terminal window
npx tailwindcss init

secara otomatis akan dibuat sebuah file bernama tailwind.config.js ,lalu edit menggunakan VS Code menjadi:

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

Menambahkan Tailwind ke CSS tujuan

buat sebuah folder bernama ‘src’,lalu buat file ‘input.css’ didalamnya. Tambahkan ‘@tailwind’ ke ‘input.css’

Terminal window
@tailwind base;
@tailwind components;
@tailwind utilities;

Memulai Tailwind CLI Tool build

di Terminal ketikkan:

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

secara otomatis akan ada folder bernama dist dan sebuah file output.css

Memulai Tailwind di html

Tambahkan file otput.css ke <head> di struktur html dasar,dan mulai gunakan utility Tailwind ke dalam Kontent HTML kalian

Terminal window
<!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="bg-teal-200">
        <h1 class="text-3xl text-violet-900 font-bold underline">
            Hello world!
        </h1>
    </div>
</body>
</html>

Taraa..Kita berhasil menggunakan Tailwind CSS didalam struktur html.