Belajar Tailwind CSS - Delivery & CDN — Cara Aman Menyajikan CSS

#Pendahuluan

CSS Tailwind harus sampai ke browser dengan cara yang benar. Episode 12 membahas dua jalur delivery: build-time generation yang menghasilkan file statis, dan Play CDN yang meng-compile di browser. Keduanya punya trade-off besar, terutama soal keamanan dan performa.

Pilihan delivery menentukan keamanan aplikasi secara langsung. File CSS statis bisa diamankan dengan Content Security Policy (CSP) dan SRI; script runtime seperti Play CDN jauh lebih sulit diamankan dan tidak direkomendasikan untuk produksi. Mari kita bedah keduanya.

#Build-time Generation vs Play CDN

#Build-time Generation

Pendekatan standar: Tailwind dijalankan saat build, menghasilkan file CSS statis yang di-deploy bersama aplikasi:

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

Hasilnya satu file dengan ukuran kecil, bisa di-cache agresif, dan bisa diamankan penuh dengan CSP. Ini satu-satunya pendekatan yang direkomendasikan untuk produksi.

#Play CDN

Play CDN meng-compile Tailwind di browser saat halaman dimuat:

Play CDN (hanya development)

<script src="https://cdn.tailwindcss.com"></script>

cdn.tailwindcss.com melakukan compile runtime — praktis untuk prototipe, tetapi bukan untuk produksi: menambah beban JavaScript, memperlambat first paint, tidak bisa diamankan dengan CSP sederhana, dan tidak memakai tree-shaking JIT yang sama efisiennya.

#CSP dan SRI

#Content Security Policy

Dengan file statis, CSP cukup ketat. Izinkan hanya sumber sendiri untuk styles:

Content-Security-Policy: default-src 'self'; style-src 'self' 'unsafe-inline'

Catatan: banyak library menyuntikkan style inline, sehingga style-src sering perlu 'unsafe-inline'. Pendekatan lebih ketat memakai nonce atau hash untuk style tag inline:

Style dengan nonce

<link rel="stylesheet" href="/css/app.css" />
<style nonce="random-nonce-value">...</style>

Dan header:

Content-Security-Policy: style-src 'self' 'nonce-random-nonce-value'

#Subresource Integrity (SRI)

Jika file CSS diambil dari CDN pihak ketiga, tambahkan SRI agar browser memverifikasi integritas file sebelum menggunakannya:

CSS dengan SRI

<link
  rel="stylesheet"
  href="https://cdn.example.com/app.css"
  integrity="sha384-X8K8t2Q1ZH9ROYN2Yd1MDAK7Qx0iKZQZ0s5AKX1z9QvXhAQ"
  crossorigin="anonymous"
/>

integrity="sha384-..." adalah hash dari isi file. Jika file diubah di CDN, browser menolaknya — perlindungan terhadap supply chain attack.

#Caching Strategies dan HTTP Headers

CSS yang namanya di-hash per versi bisa di-cache agresif:

Cache-Control: public, max-age=31536000, immutable

Karena nama file berubah saat isi berubah, browser boleh menyimpan selamanya. Untuk file tanpa hash (misal app.css), gunakan cache pendek plus validasi:

Cache-Control: public, max-age=0, must-revalidate
ETag: "abc123def456"

ETag memungkinkan browser mengirim If-None-Match dan menerima respons 304 bila file tidak berubah. Kombinasi Cache-Control: public, max-age=31536000, immutable dengan filename ber-hash adalah praktik terbaik standar.

Satu detail yang sering terlewat: pasang header Vary: Accept-Encoding pada respons CSS agar CDN tidak mencampur varian gzip dan brotli di URL yang sama. Dengan begitu, kompresi tetap optimal tanpa risiko menyajikan payload yang salah untuk client tertentu.

Jika file statis disajikan melalui service worker, perlakukan CSS sebagai bagian dari precache yang immutable — bukan cache yang bisa di-update kapan saja. Worker yang memutuskan kapan harus mengambil versi baru harus memakai nama file ber-hash sebagai kunci, bukan URL tetap seperti /css/app.css.

#Penutup

Episode 12 menyiapkan pengiriman CSS yang aman dan cepat: build-time generation sebagai standar produksi, Play CDN hanya untuk development, pengamanan dengan CSP dan SRI, serta strategi caching dengan HTTP headers yang tepat.

Inti yang harus dibawa pulang:

• Build-time generation menghasilkan file statis yang bisa diamankan penuh.
• Play CDN hanya untuk development — tidak untuk produksi.
• CSP style-src mengontrol sumber stylesheet, bisa diperketat dengan nonce.
• SRI memverifikasi integritas file CSS dari CDN pihak ketiga.
• File ber-hash bisa di-cache dengan immutable.
• File tanpa hash memakai max-age=0 plus ETag untuk revalidation.

Di episode 13 selanjutnya kita akan membahas CI/CD dan build pipelines — menjalankan build Tailwind di CI dengan cache yang tepat, memasang linting memakai eslint-plugin-tailwindcss, dan strategi deployment ke Vercel, Netlify, atau static hosting.