author Lalu Doni Setiawan

Tutorial Tailwind #1: Dasar Tailwind CSS untuk Pemula

Tailwind Dasar

Dulu saya pengguna setia Bootstrap, tapi setelah mencoba Tailwind..

..saya berpindah haluan. 😄

Di tutorial ini kamu akan belajar dasar-dasar Tailwind CSS seperti: Apa itu Tailwind?

Mengapa sih pakai Tailwind?

dan gimana cara pakai Tailwind?

Oke..

Mari kita mulai!

Apa itu Tailwind CSS?

Tailwind CSS merupakan framework CSS yang berbasis utility untuk membuat UI atau tampilan dari aplikasi web.

Berbasis utility artinya Tailwind cuma terdiri dari 100% utility class dan nggak ada class komponen seperti Navbar, Button, Card, Modal, dll. Komponen-komponen ini kita buat sendiri dengan class utility.

Sebagai contoh:

Ketika kita ingin membuat komponen Button, maka kita bisa gunakan beberapa kelas utility untuk button seperti class background, border, color, dan sebagainya.

Website Tailwind

Mungkin kamu merasa:

“Wah ribet ya Tailwind, nggak kayak Bootstrap yang sudah punya class komponen dan bisa langsung pakai”

Saya juga dulu berpikir demikian,

Tapi..

Setelah mencoba Tailwind beberapa lama, malah jadi keenakan hehe. 😄

Sejarah Singkat Tailwind CSS

Tailwind css pertama kali dikembangkan oleh Adam Wathan di tahun 2017, rilis versi 1.0 di tahun 2019.

Versi tailwind saat ini adalah versi 3.2.4. Jika kamu tertarik untuk melihat sejarah perubahan dari versi ke versi, kamu bisa baca CHANGELOG di Github.

Kenapa Pakai Tailwind CSS?

Saya sebelumnya pernah pakai framework yang berbasis komponen seperti Bootstrap CSS, Bulma, MaterializeCSS, namun merasa kurang puas dengan framework ini.

Mengapa?

Pertama saya merasa kurang bebas kustomisasi komponennya. Kalau mau custom, harus override class yang udah ada.

Kedua, kode CSS dari komponen yang nggak dipakai akan ikut nyangkut di CSS hasil build. Ini membuat ukuran CSS-nya jadi lebih besar.

Walaupun saya coba pakai PurgeCSS, namun kadang hasil tampilannya nggak maksimal, ada aja yang bermasalah.

Akhirnya, saya coba Tailwind.. dan merasa sangat puas dan bebas kustomisasi tampilan web.

Hasil build kode CSS tailwind hanya akan menambahkan class-class yang dipakai saja.

Hasil build tailwind

Kalau class-nya nggak dipakai, ya nggak akan ditambahkan. Ini yang membuat hasil build CSS Tailwind lebih kecil dibandingkan Bootstrap, Bulma, Materialize, dll.

Persiapan Alat untuk Belajar Tailwind

Ada tiga alat yang kita butuhkan untuk coding Tailwind:

  1. Teks Editor – buat menulis kode
  2. Web browser – buat ngeliat hasilnya
  3. Nodejs – buat install library dan package

Nodejs dipakai buat menginstal Tailwind CSS dan juga beberapa modul yang diperlukan.

Jika kamu belum menginstal Nodejs, silakan baca:

Kemudian untuk text editor bebas, bisa pakai yang mana aja, sesuai selera masing-masing.

Biasanya teks editor yang dipakai adalah:

  • VSCode
  • Sublime Text
  • Atom
  • web storm dll.

Pada tutorial ini saya akan menggunakan text editor Visual Studio Code, karena fitur dan extensions yang ditawarkan dapat mempermudah proses development.

Oya, di VS Code.. kamu bisa install extension Tailwind IntelliSense buat mempermudah saat kamu kurang inget nama-nama class.

Tailwind Intellisense

Lihat cara instalnya di website resmi Tailwind Intellisense.

Oke, selanjutnya untuk browser kita bebas menggunakan Chrome, Mozilla, Safari, Brave dll.

Setelah semuanya siap, mari kita mulai praktik hand on Tailwind..

Membuat Project Tailwind

Ada dua cara yang bisa dilakukan untuk menggunakan Tailwind di dalam project:

  1. Menggunakan link CDN
  2. Menggunakan NPM dari Nodejs

Mari kita coba keduanya.

1. Menggunakan Tailwind dari CDN

Menggunakan Tailwind dari CDN tidak direkomendasikan untuk dipakai di production, karena kita nggak akan dapat hasil build CSS yang optimal.

Tapi jika hanya untuk belajar Tailwind dan coba-coba, ini dibolehkan.

Gimana cara menggunakan Tailwind dari CDN?

Pertama siapkan dulu file atau kode HTML, kemudian di dalam tag <head> tambahkan link CSS dengan alamat CDN Tailwind.

Mari kita coba!

Buat file dengan nama tailwind-from-cdn.html kemudian isi dengan kode berikut: 1

tailwind-from-cdn.html
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coba Tailwind dari CDN</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

Setelah itu, buka dengan web browser.

Maka hasilnya:

Hasil coba tailwind dari CDN

Sangat mudah bukan.

Tapi ingat ya, CDN ini dipakai buat coba-coba dan belajar aja. Nggak direkomendasikan untuk production.

Jika mau pakai Tailwind di production, maka kita harus menggunakan Tailwind CLI dengan NPM.

Mari kita coba!

2. Membuat Project Tailwind dengan NPM

Pertama kita siapkan dulu folder baru untuk project.

Gunakan perintah:

mkdir belajar-tailwind

untuk membuat folder baru dari Terminal.

Cara membuat folder baru dari terminal

Setelah itu, masuk ke dalam folder yang sudah dibuat tadi dengan perintah

cd belajar-tailwind

Kemudian seperti biasa, kita harus melakukan inisialisasi atau persiapan awal dengan NPM di dalam folder ini.

Jalankan perintah:

npm init

Kemudian isi dengan data project, jika tidak mau diubah biarkan saja kosong dengan menekan enter.

Perintah ini akan membuat file baru bernama package.json yang berisi metadata project seperti (package name, version, description, author).

Selanjutnya kita akan menginstall tailwind css menggunakan npm.

Jalankan perintah ini di Terminal atau CMD:

npm install tailwindcss

untuk menginstall Tailwind ke dalam project.

Tunggulah sampai prosesnya selesai.

Setelah itu, lanjutkan membuat file konfigurasi tailwind.

Jalankan perintah:

npx tailwindcss init

Perintah ini akan membuat file baru bernama tailwind.config.js. File ini berisi konfigurasi yang dibutuhkan Tailwind.

Berikut tampilan dari project setelah melakukan proses instalasi tailwind.

Kemudian, kita akan melakukan konfigurasi path konten pada file tailwind.config.js.

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

Perhatikan pada bagian content:, di sana kita menambahkan path ./src/**.

Artinya saat kita melakukan build CSS, si Tailwind akan mencari class-class apa saja yang dipakai di file HTML dan JS pada path tersebut.

Setelah itu, buat folder baru dengan nama src di dalam project. Kemudian buat file CSS baru di dalam src dengan nama input.css dan isi seperti ini:

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

Selanjutnya buatlah file index.html di dalam folder src untuk menggunakan class-class dari Tailwind.

Isi file index.html seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/dist/output.css"/>
    <title>Project Tailwind dengan NPM</title>
</head>
<body>
  <h1 class="text-3xl font-bold text-teal-700">Petani Kode</h1>
</body>
</html>

Perhatikan link CSS di HTML ini 👆. Kita menulisnya seperti ini:

/dist/output.css

Karena kita akan buka di Live server atau localhost. Jika kamu mau langsung buka tanpa live server, cukup tuliskan seperti ini tanpa /

../dist/output.css

Tanda ../ artinya kita mau akses file CSS yang berada di parent direktori.

Ini karena kita menyimpan file HTML-nya di dalam folder src.

O iya, file dist/output.css ini belum ada. File ini akan dibuat otomatis oleh Tailwind.

Caranya:

Jalankan perintah berikut:

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

Perintah ini 👆 bertujuan untuk membuat file CSS (output.css) berdasarkan class-class yang dipakai pada path konten (index.html).

Ini hasil build-nya:

Jika kamu ingin hasil build-nya di-optimasi (minify), gunakan opsi --minify di belakangnya.

Contoh:

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

Hasil output.css akan di-minify.

Hasil build dengan opsi minify

Hasil build yang minify ini cocok dipakai di production, karena ukurannya lebih kecil dan sudah dioptimasi.

Jika kamu membuka file index.html di browser sekarang, maka tidak akan ada hasil CSS dari Tailwind.

CSS Tailwind belum di-load

Tenang..

Jangan panik!

Ini karena kita menuliskan di href dengan /dist, seharusnya ../dist/ biar dia membaca folder dist.

Coba ubah /dist/ menjadi ../dist/.

<link rel="stylesheet" href="../dist/output.css" />

Maka hasilnya:

Hasil output project tailwind dengan npm

Menggunakan Live Server

Alur kerja kita di project Tailwind dengan NPM adalah seperti ini:

  1. Ubah atau gunakan class di file HTML
  2. Jalankan perintah untuk build CSS Tailwind
  3. Lihat hasilnya di browser

Ini cukup merepotkan, karena harus dilakukan berulang-ulang.

Biar tidak begini, kita bisa pakai Live server dan membuat custom script sendiri di package.json.

Silakan buka file package.json, lalu di bagian "scripts" buat menjadi seperti ini:

package.json
{
  "name": "belajar-tailwind",
  "version": "1.0.0",
  "description": "belajar tailwind",
  "main": "index.js",
  "scripts": {
    "dev": "tailwindcss -i src/input.css -o dist/output.css --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^3.1.8"
  }
}

Pada script ini, kita menentukan perintah untuk build CSS tailwind dengan opsi --watch.

Ini artinya Tailwind akan memantau perubahan yang terjadi pada konten, lalu langsung melakukan build otomatis.

Setelah itu, install extension Live Server Preview di VS Code.

extension live preview

Extension ini buat buka live preview langsung di VS Code, tanpa harus buka web browser.

Nah sekarang mari kita coba!

Buka terminal di VS Code, lalu jalankan perintah ini:

npm run dev

Ini akan menjalankan perintah yang sudah kita definisikan di package.json.

Setelah itu, klik kanan pada file index.html kemudian pilih show preview.

Okeh! mantap! 👍

Apa Selanjutnya?

Selamat, kamu sudah belajar dasar Tailwind CSS.

Tentu ini masih belum cukup.

Selanjutnya kamu bisa eksplorasi dan menggunakan Tailwind di Project-mu.

Nantikan kelanjutan dari Tutorial ini, dan tetap ikuti Petani Kode.

Selamat belajar!

  1. https://tailwindcss.com/docs/installation/play-cdn ↩︎