Imam Fahrur Rofi

Mempersiapkan Project Front-end Tailwind CSS

Ilustrasi Homepage TailwindCSS.com

Tailwind CSS adalah framework css yang kini sedang naik daun karena digunakan oleh front-end framework seperti VueJS dan Laravel Jetstream. Keunggulan utama Tailwind CSS dibandingkan dengan Bootstrap adalah kemampuannya dalam memperkecil ukuran dari file .css dengan cara mengekstrak kode css hanya yang dipakai saja. Selain itu Tailwind CSS adalah murni css tidak bergantung dengan framework javascript tertentu yang membuatnya bisa dipakai di berbagai framework javascript frontend seperti ReactJS, VueJS, AlpineJS, Svelte, dan lain-lainnya.

Kendala yang saya alami saat ingin belajar Tailwind CSS adalah bagaimana memulai project sehingga mendapatkan output yang benar-benar sesuai dengan manfaat framework css ini. Mungkin kita bisa menggunakan tailwind.min.css dari salah satu CDN yang ada, namun hal tersebut tidak efisien karena satu file tailwind.min.css berukuran 2.7MB, sehingga daripada menggunakan cdn tailwind css lebih baik menggunakan bootstrap.min.css yang hanya 137KB saja.

Setelah melakukan banyak eksperimen, akhirnya saya menemukan cara bagaimana memulai membuat desain front-end website menggunakan Tailwind CSS, bukti nyatanya adalah website ini dibuat menggunakan Tailwind CSS dan AlpineJS.

Instalasi Software yang Dibutuhkan

Software yang dibutuhkan untuk project Tailwind CSS antara lain Node.js terbaru dan Visual Studio Code sebagai teks editor. Saya menyarankan menggunakan VSCode karena beberapa ekstensinya sangat membantu dalam pengerjaan project.

Unduh Node.js terbaru di tautan berikut ini : Download | Node.js (nodejs.org)

Unduh Visual Studio Code terbaru di tautan berikut : Download Visual Studio Code - Mac, Linux, Windows

setelah instalasi software selesai, kita perlu memastikan bahwa Node.js dapat diakses dari terminal atau command prompt dengan cara berikut :

  1. Buka VSCode, buka terminal dengan klik menu Terminal > New Terminal
    Gambar VSCode menu Terminal

  2. Jalankan perintah berikut di terminal
    node --version
    npm --version
    Minimal versi node yang disarankan adalah versi 14.16.1, edangkan versi minimal npm yang disarankan adalah 6.14.12. Pada gambar di bawah menunjukkan versi yang saya gunakan adalah 16.0.0 dan 7.9.0 karena saya menggunakan versi terbaru Node.js saat artikel ini dibuat
    Cek versi node dan npm di terminal VSCode

Instalasi Ekstensi VSCode

Beberapa ekstensi VSCode berfungsi untuk mempermudah pekerjaan kita, dalam membuat project tailwind css ini Anda disarankan untuk menginstal ekstensi berikut :

Setelah instalasi ekstensi selesai, kita akan mengatur ekstensi di langkah-langkah selanjutnya.

Membuat Folder Project Tailwind CSS

  1. Buat folder kosong sebagai tempat project, tempat folder dan namanya terserah Anda, saya sendiri membuat folder tailwind css di drive d:/
  2. Buka folder tersebut di VSCode menggunakan menu > open folder, nantinya VSCode akan restart dan terminal perlu dibuka kembali, VSCode di kolom sebelah kanan akan muncul tulisan explorer: {namafolder} seperti ini gambar berikut :
    VSCode Explorer

Instalasi Project Tailwind CSS

Struktur project Tailwind CSS kurang lebih sama seperti struktur project Node.js lainnya. Saya akan menggunakan struktur berikut ini dalam membuat tutorial Tailwind CSS lainnnya.

  1. Buat 2 folder baru di dalam folder project, bernama src dan dist
  2. Buka terminal dalam VSCode, jalankan kode berikut untuk menginisialisasi Node.js
    npm init -y
    Kode tersebut akan membuat file standar package.json
  3. Instal library tailwindcss, autoprefixer, postcss, dan postcss-cli terbaru, jalankan kode berikut di terminal
    npm install -D tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli@latest cross-env@latest
    Tunggu beberapa saat hingga semua library terinstal.
  4. Inisialisasi konfigurasi Tailwind CSS dan PostCSS dengan menjalankan kode berikut
    npx tailwindcss init -p
    Kode diatas akan meng-generate file tailwind.config.js dan postcss.config.js

Dari langkah-langkah di atas, seharusnya struktur folder project seperti ini

> dist
> node_modules
> src
postcss.config.js
tailwindcss.config.js
package-lock.json
package.json

Konfigurasi Project Tailwind CSS

Konfigurasi minimal ketika membuat project agar mendapatkan manfaat dari Tailwind CSS adalah sebagai berikut:

  1. Konfigurasi package.json, buka file package.json, kemudian modifikasi kode yang ada di dalam "scripts": { /**..*/ } sehingga package.json menjadi seperti ini :
    {
      "name": "tailwindcss",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "dev": "cross-env NODE_ENV=development postcss ./src/styles.css -o ./dist/styles.css -w",
        "build": "cross-env NODE_ENV=production postcss ./src/styles.css -o ./dist/styles.css"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "autoprefixer": "^10.2.5",
        "cross-env": "^7.0.3",
        "postcss": "^8.2.13",
        "tailwindcss": "^2.1.2"
      }
    }
    
    Cara menjalankan scripts tersebut dengan perintah npm run {nama-script}.
    Fungsi scripts di atas :
    1. npm run dev dijalankan saat development agar styles.css terupdate secara otomatis setiap kali kita menyimpan file .html
    2. npm run build dijalankan saat project selesai agar styles.css yang didapatkan adalah versi optimal.
  2. Konfigurasi tailwind.config.js, modifikasi file tailwind.config.js menjadi seperti berikut :
    module.exports = {
      mode: 'jit',
      purge: ['./dist/*.html'],
      darkMode: false, // or 'media' or 'class'
      theme: {
        extend: {},
      },
      variants: {
        extend: {},
      },
      plugins: [],
    }
    
    JIT (Just In Time) adalah mode pengekstrakan yang berlangsung setiap kali file disimpan.
    Purge berisi path dari file html yang menjadi laman project.
  3. Konfigurasi standar atau default dari postcss.config.js sudah cukup..

Menambah File yang Diperlukan

Dari pengecekan konfigurasi packages.json bagian scripts, kita membutuhkan file css sumber yaitu src/styles.css. Sedangkan dari pengecekan konfigurasi tailwind.config.js bagian purge kita membutuhkan file html di dalam folder dist.

1. Buatlah file styles.css di dalam folder src, isi dengan kode berikut :

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

Nantinya tailwind akan meng-generate file styles.css di folder dist berdasarkan pengaturan file styles.css di folder src

2. Buat file index.html di dalam folder dist, isi dengan kode berikut :

<!doctype html>
<html>
<head>
  <!-- ... -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href="styles.css" rel="stylesheet"/>
</head>
<body>
  <!-- Kode HTML Disini -->
</body>
</html>

Sampai di sini, struktur dari file di dalam folder project adalah seperti ini :

˅ dist
    index.html
> node_modules
˅ src
    styles.css
postcss.config.js
tailwindcss.config.js
package-lock.json
package.json

Meng-generate styles.css pertama kali

Cara mengecek konfigurasi project Tailwind CSS telah benar atau tidak yakni dengan menjalankan perintah npm run build di terminal, jika sukses seperti gambar berikut ini, maka telah terbuat file styles.css di dalam folder dist, jika diperiksa ukuran file tersebut hanya sekitar 10 sampai 15 Kb saja.

Tampilan Terminal VS Code Saat NPM RUN DEV

Sekian Cara konfigurasi pengaturan awal project Tailwind CSS, pada artikel selanjutnya saya akan menggunakan pengaturan ini dalam membahas Tailwind CSS lebih lanjut.


Pengaturan
Mode
Warna
Search panel