Belajar Tailwind CSS - CI/CD dan Build Pipelines

#Pendahuluan

Build Tailwind di laptop kalian tidak menjamin build berjalan sama di server. Episode 13 membahas CI/CD: menjalankan build di pipeline otomatis, memanfaatkan cache agar cepat, memasang linting khusus Tailwind, dan men-deploy hasilnya ke berbagai platform.

Tujuan akhirnya sederhana: setiap commit terverifikasi, CSS yang dihasilkan deterministik, dan deployment tidak lagi menakutkan. CI bukan hanya "build lalu deploy" — ia juga pintu gerbang kualitas sebelum perubahan menyentuh produksi.

#Build Tailwind di CI

Workflow GitHub Actions paling sederhana untuk project Node:

name: Build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run build

setup-node dengan cache: npm menyimpan node_modules antar run, memangkas waktu install secara signifikan. npm ci menginstall dari lockfile secara deterministik — berbeda dari npm install yang bisa mengubah versi.

Untuk project dengan build tooling custom, tambahkan step verifikasi hasil:

npx tailwindcss -i src/styles.css -o dist/output.css --minify
test -s dist/output.css && echo "CSS OK"

test -s dist/output.css menggagalkan pipeline bila file CSS kosong — perlindungan murah dari build yang "sukses" tapi tidak menghasilkan apa-apa.

#Linting dengan eslint-plugin-tailwindcss

Kualitas kode tidak berhenti di JavaScript. eslint-plugin-tailwindcss menegakkan konsistensi class di dalam proyek:

npm install -D eslint eslint-plugin-tailwindcss

Lalu daftarkan di flat config ESLint:

eslint.config.mjs

import tailwindcss from "eslint-plugin-tailwindcss";
 
export default [
  {
    plugins: { tailwindcss },
    rules: {
      "tailwindcss/classnames-order": "warn",
      "tailwindcss/no-contradicting-classname": "error",
      "tailwindcss/no-custom-classname": "off",
    },
  },
];

Aturan tailwindcss/classnames-order memaksa urutan class yang konsisten (misal p-4 sebelum bg-blue-500), dan no-contradicting-classname menangkap konflik seperti p-4 dan p-8 sekaligus. Jalankan di CI agar setiap PR yang melanggar langsung terlihat.

#Strategi Deployment

Hasil build berupa file statis, sehingga opsi deploymentnya luas:

• Vercel: integrasi native dengan Git, preview per PR, dan edge network otomatis.
• Netlify: build command sederhana dengan cache node_modules, juga punya deploy previews.
• Static hosting: S3, Cloudflare Pages, atau GitHub Pages untuk situs murni statis.
• Edge CDN: file CSS yang di-hash di-cache di edge server terdekat dengan pengguna.

Untuk platform seperti Vercel, biasanya cukup mendefinisikan build command dan output directory:

{
  "scripts": {
    "build": "tailwindcss -i src/styles.css -o dist/output.css --minify",
    "preview": "tailwindcss -i src/styles.css -o dist/output.css"
  }
}

Setelah CSS dibangkitkan, deploy bisa memakai artefak build yang sama dengan apa yang diuji di CI — konsistensi inilah kunci keandalan.

#Penutup

Episode 13 menutup siklus delivery: workflow CI dengan cache npm, verifikasi hasil CSS, linting memakai eslint-plugin-tailwindcss, dan strategi deployment ke berbagai platform dengan artefak build yang konsisten.

Inti yang harus dibawa pulang:

• npm ci plus cache membuat install deterministik dan cepat.
• Verifikasi output CSS di CI untuk menangkap build kosong.
• eslint-plugin-tailwindcss menegakkan urutan class dan menangkap konflik.
• Jalankan linting di CI agar pelanggaran terlihat di PR.
• Artefak build yang sama dipakai untuk deploy — jangan build ulang.
• Vercel, Netlify, atau static hosting semuanya cocok untuk CSS statis.

Di episode 14 selanjutnya kita akan membahas performance optimization & tree-shaking — konfigurasi content yang efisien untuk JIT, teknik critical CSS dan split CSS, serta cara menganalisis ukuran bundle dengan source-map-explorer dan analyzer lain.