Bagaimana Cara Pakai Tailwindcss?

Naufal Aulia

December 17, 2022

Di tahun 2022 dimana design-design user interface terutama pada web semakin berkembang, orang-orang semakin sadar akan tampilan yang bagus atau tidak. Sebagai web developer, tugas kita adalah untuk merealisasikan design web yang sudah disediakan semirip dan se-reliable mungkin dan salah satu CSS Framework bisa bisa flexible digunakan dan sangat reliable saat ini adalah tailwindcss.

Pengertian Tailwind

Tailwind adalah utility-first css framework yang berarti setiap class yang ada hanya memiliki 1 fungsi atau hanya merubah 1 property styling. Berbeda dengan bootstrap dan css framework lainnya yang menyediakan fully styled component (1 class mengubah banyak property), tailwind hanya 1.

Instalasi Tailwindcss

Setelah project sudah diinisialisasi menggunakan perintah npm init, jalankan perintah berikut untuk install dependency tailwind dan menginisialisaikannya

npm install -D tailwindcss
npx tailwindcss init

Buka file tailwind.config.js dan ubah kode didalmnya menjadi seperti berikut

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

Tahap selanjutnya adalah untuk menambahkan directive tailwind kedalam input css file. Buat file baru didalam folder src bernama input.css dan tambahkan kode berikut didalam file tersebut.

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

selanjutnya, jalankan perintah yang disediakan oleh tailwind untuk mencompile styling kedalam file baru yang nantinya digunakan sebagai stylesheet untuk file html kita.

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

Dan tahap terakhir adalah untuk membuat file html baru didalam folder src dengan isi kode seperti berikut.

<!-- /src/index.html --->
<!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>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Dan selesai sudah prosedur mengunduh dan menginisialisasi project menggunakan tailwind.