Tailwind CSS + Prepros: Workflow WordPress Theme dari Pengalaman Pribadi

TL;DR

• Saya memisahkan tugas: Tailwind CSS dikompilasi lewat CLI inline build tool, Prepros menangani livereload, compile JS, dan watch file CSS/JS/PHP.
• Setup Tailwind cukup dengan @import "tailwindcss" dan perintah npx @tailwindcss/cli --watch — tanpa Vite atau Webpack.
• Workflow ini stabil dan sederhana untuk custom WordPress Theme berbasis Classic Editor.
• Tidak ideal untuk proyek Gutenberg-heavy kecuali block dibuat sebagai placeholder saja.
• Header komentar WordPress di style.css tetap aman dengan sintaks /*! ... */.

Banyak developer langsung memakai Vite, Webpack, atau starter kit saat mulai dengan Tailwind CSS. Pendekatan itu memang modern — tapi tidak selalu dibutuhkan.

Sebagian besar proyek WordPress yang saya kerjakan adalah custom theme berbasis PHP. Strukturnya sederhana. Saya tidak butuh Hot Module Replacement atau development server yang rumit. Yang saya butuhkan: compile CSS yang cepat, watch file yang andal, dan livereload agar iterasi desain terasa ringan.

Solusi yang saya pakai: Tailwind CSS CLI untuk build CSS, Prepros untuk hal-hal di luar Tailwind. Kombinasi ini sudah saya gunakan di berbagai proyek dan sampai hari ini masih jadi workflow utama saya.

Artikel ini bukan tutorial generik. Ini studi kasus dari pengalaman pribadi — termasuk langkah setup, pembagian tugas antar tool, dan kelemahan yang perlu Anda pertimbangkan sebelum mengadopsinya.

Gambaran Besar Workflow

Sebelum masuk ke langkah teknis, penting memahami siapa mengerjakan apa:

Tailwind CSS CLI
↓
Compile ./src/css/tailwind.css → ./style.css (--watch)

Prepros
↓
Livereload browser
↓
Compile JavaScript
↓
Watch CSS, JS, dan PHP

WordPress
↓
style.css (theme header + CSS hasil Tailwind)
↓
wp_enqueue_style()
↓
Website

Tailwind CLI hanya bertugas meng-generate utility class ke style.css. Prepros tidak menggantikan Tailwind — Prepros menangani live reload, bundling JS, dan memantau perubahan file proyek secara keseluruhan.

Setup Tailwind CSS dengan Inline Build Tool

Berikut langkah-langkah yang saya jalankan setiap kali memulai proyek WordPress theme baru.

Langkah 1 — Pastikan Versi Node Sesuai

Saya menggunakan Node v20.11.1. Cek versi yang terpasang di mesin Anda:

node -v

Contoh output di Mac saya:

v20.11.1
v22.13.1

Saya tetap memakai v20.11.1 untuk konsistensi antar proyek. Jika versi berbeda, pastikan Tailwind CLI berjalan normal sebelum lanjut ke langkah berikutnya.

Langkah 2 — Install Tailwind CSS dan CLI

Jalankan perintah berikut di root folder theme:

npm install tailwindcss @tailwindcss/cli

Tidak perlu konfigurasi build tool tambahan. Dua package ini sudah cukup untuk workflow inline build yang saya pakai.

Langkah 3 — Buat File CSS Sumber

Saya membuat file CSS sumber di:

src/css/tailwind.css

File ini hanya berisi directive Tailwind — bukan file yang di-enqueue langsung ke WordPress.

Langkah 4 — Import Tailwind di File CSS

Isi src/css/tailwind.css:

@import "tailwindcss";

Itu saja. Tanpa @tailwind base/components/utilities versi lama. Tailwind v4 cukup dengan satu baris import ini.

Langkah 5 — Jalankan Watch Mode

Di terminal, jalankan:

npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./style.css --watch

Perintah ini akan:

• Membaca ./src/css/tailwind.css sebagai input
• Menulis hasil compile ke ./style.css
• Tetap berjalan dan re-compile setiap ada perubahan

Biarkan terminal ini terbuka selama sesi development. Setiap kali saya menambah utility class di file PHP atau template, Tailwind CLI otomatis memperbarui style.css.

Langkah 6 — Pertahankan Komentar WordPress Theme Header

WordPress membutuhkan header komentar di style.css agar theme dikenali sistem. Saat Tailwind menimpa file output, komentar biasa (/* ... */) bisa ikut terhapus.

Solusinya: gunakan ! di awal komentar agar komentar tetap tampil di output:

/*!
	Theme Name: Your theme name
	Theme URI: https://themeuri.com/
	Description: Description of theme
	Version: 1.0
	Author: Your name
	Author URI: https://yourname.com/
	Created Date: 07/07/2026
	License: GNU General Public License version 3.0
	License URI: http://www.gnu.org/licenses/gpl-3.0.html
	Tags: creative, agency
	Text Domain: text-domain
*/

Saya menaruh header ini di src/css/tailwind.css — di atas @import "tailwindcss". Setiap kali CLI re-compile, header theme WordPress tetap utuh di style.css.

Peran Prepros dalam Workflow Ini

Prepros bukan pengganti Tailwind CLI. Di setup saya, Prepros menangani tiga hal:

Alur harian saya:

1. Buka folder theme di editor (VS Code).
2. Jalankan Tailwind CLI watch di terminal.
3. Buka Prepros dan drag folder theme ke dalamnya.
4. Mulai coding template PHP, tambahkan utility class, simpan file.
5. Tailwind CLI memperbarui style.css → Prepros mendeteksi perubahan → browser reload otomatis.

Dengan pembagian ini, saya tidak perlu satu build tool yang menangani semuanya. Tailwind fokus ke CSS. Prepros fokus ke pengalaman development sehari-hari.

Struktur Folder yang Saya Pakai

my-theme/
├── src/
│   └── css/
│       └── tailwind.css      ← sumber (header WP + @import)
│
├── assets/
│   └── js/
│       └── app.js            ← sumber JS, di-compile Prepros
│
├── template-parts/
├── inc/
├── functions.php
├── style.css                 ← output Tailwind CLI (jangan edit manual)
├── package.json
└── prepros.config

Aturan sederhana yang saya pegang:

• Edit → src/css/tailwind.css, file PHP, file JS sumber
• Jangan edit manual → style.css (file ini di-generate Tailwind CLI)
• Enqueue ke WordPress → style.css dan JS hasil compile Prepros

Kelebihan Workflow Ini

• Setup cepat — tidak butuh konfigurasi Vite/Webpack.
• Pembagian tugas jelas — Tailwind untuk CSS, Prepros untuk livereload dan JS.
• Mudah dipindah antar mesin — cukup npm install dan jalankan dua proses (CLI + Prepros).
• Cocok untuk Classic Editor — utility class langsung di template PHP tanpa layer abstraksi tambahan.
• Header theme WordPress aman — dengan sintaks /*! */ di file sumber.
• Produktif untuk theme PHP-heavy — ACF, Custom Post Type, WooCommerce, template parts.

Kelemahan Workflow Ini

Workflow ini bukan solusi universal. Kelemahan utama yang perlu Anda pertimbangkan:

1. Tidak ideal untuk proyek Gutenberg-heavy

Workflow ini paling cocok jika WordPress tidak memakai Gutenberg — alias Classic Editor / theme berbasis template PHP.

Alasannya: di proyek Gutenberg, saya biasanya membuat file CSS terpisah per komponen/block. Tailwind CLI yang compile ke satu style.css tidak selalu fleksibel untuk arsitektur seperti itu.

Pengecualian: jika block Gutenberg dibuat hanya sebagai placeholder (markup minimal, styling tetap di utility class template), workflow ini masih bisa dipakai.

2. Dua proses harus berjalan bersamaan

Anda perlu terminal Tailwind CLI dan Prepros aktif sekaligus. Bukan satu perintah npm run dev seperti di setup Vite.

3. Tidak ada Hot Module Replacement

Perubahan CSS/JS memicu full page reload via livereload — bukan HMR secepat Vite. Untuk theme PHP, ini jarang jadi masalah. Untuk proyek JS-heavy, terasa kurang optimal.

4. style.css sebagai single output

Semua utility class masuk satu file. Untuk theme besar dengan banyak komponen terisolasi (misalnya block editor), pendekatan multi-file CSS lebih mudah di-maintain.

Kesalahan yang Pernah Saya Alami

• Mengedit style.css langsung — perubahan hilang saat Tailwind CLI re-compile. Selalu edit src/css/tailwind.css atau template PHP.
• Lupa menjalankan watch mode — utility class baru tidak muncul di output. Pastikan terminal CLI tetap aktif.
• Header theme pakai /* */ biasa — WordPress tidak mengenali theme. Gunakan /*! */.
• Mengharapkan Prepros compile Tailwind — Prepros watch style.css, tapi yang generate isinya adalah Tailwind CLI.
• Memakai workflow ini di proyek Gutenberg kompleks — CSS block jadi sulit diorganisir. Lebih baik pisah file per komponen.

Frequently Asked Questions

Apakah Prepros masih layak dipakai di 2026?

Menurut saya ya — terutama untuk livereload dan compile JS di proyek WordPress theme berbasis PHP. Prepros melengkapi Tailwind CLI, bukan menggantikannya.

Apakah saya perlu Vite?

Tidak selalu. Jika proyek Anda custom theme PHP tanpa framework JS modern, kombinasi Tailwind CLI + Prepros sudah cukup.

Kenapa tidak compile Tailwind lewat Prepros saja?

Tailwind v4 dengan @tailwindcss/cli sudah cukup ringan dan andal sebagai inline build tool. Saya lebih suka pemisahan tugas yang eksplisit daripada memaksakan satu tool menangani semuanya.

Apakah workflow ini cocok untuk Gutenberg?

Terbatas. Cocok jika block dibuat sebagai placeholder. Tidak cocok jika setiap block punya CSS terpisah dan styling kompleks — di situ saya pakai pendekatan multi-file CSS atau build tool yang lebih modular.

Bagaimana dengan versi Node?

Saya pakai v20.11.1. Cek dengan node -v sebelum install. Jika ada masalah compatibilitas, coba sesuaikan versi Node di mesin Anda.

Kesimpulan

Tidak ada workflow yang benar untuk semua proyek. Yang saya pakai mungkin bukan yang paling modern — tapi terbukti stabil, sederhana, dan produktif untuk custom WordPress theme berbasis Classic Editor.

Tailwind CSS CLI menangani compile CSS. Prepros menangani livereload, JS, dan watch file. WordPress cukup enqueue style.css hasil compile.

Jika proyek Anda mulai berkembang ke arah Gutenberg block dengan CSS per komponen, atau framework JS modern seperti React/Vue, pertimbangkan beralih ke build tool yang lebih modular — misalnya Vite.

Selama kebutuhan proyek masih berpusat pada template PHP dan utility-first styling, kombinasi Tailwind CSS CLI + Prepros tetap workflow yang paling sering saya gunakan.