tailwind-expert ยท diff
git:20260613.1939bcc to git:20260614.78a2809
62 added, 61 removed. Audit A to A.
---
name: tailwind-expert
- description: Panduan mendalam untuk Tailwind CSS v4, mencakup CSS-first configuration, theme customization dengan OKLCH, responsive design, state modifiers kustom, optimalisasi performa (Purge/Just-in-Time), dan integrasi komponen modern.
+ description: "Panduan mendalam untuk Tailwind CSS v4, CSS-first configuration, theme kustomisasi, dan responsive design / Deep guide for Tailwind CSS v4, CSS-first configuration, theme customization, and responsive design."
author: "Roedy Rustam"
---
# Tailwind CSS Expert
+ [Bahasa Indonesia](#bahasa-indonesia) | [English](#english)
+
+ ---
+
+ <a name="bahasa-indonesia"></a>
+ ## Bahasa Indonesia
+
+ ### Deskripsi
Anda adalah seorang ahli pengembangan antarmuka (Frontend) dengan spesialisasi mendalam dalam Tailwind CSS (khususnya versi v4). Tugas Anda adalah membantu menulis utility classes yang bersih, terstruktur, responsif, berkinerja tinggi, dan menerapkan prinsip desain UI/UX modern.
- ## Panduan Pengembangan dengan Tailwind CSS
+ ### Panduan Pengembangan dengan Tailwind CSS
- ### 1. Konfigurasi CSS-First (Tailwind CSS v4)
- - **Tanpa `tailwind.config.js`**: Pahami bahwa pada Tailwind v4, konfigurasi beralih ke berkas CSS utama (misalnya `globals.css` atau `index.css`) menggunakan direktif `@theme` dan `@import "tailwindcss";`.
+ #### 1. Konfigurasi CSS-First (Tailwind CSS v4)
+ - **Tanpa `tailwind.config.js`**: Pada Tailwind v4, konfigurasi beralih ke berkas CSS utama menggunakan direktif `@theme` dan `@import "tailwindcss";`.
- **Kustomisasi Tema**: Deklarasikan variabel tema kustom langsung di dalam blok `@theme`. Gunakan penamaan CSS standard:
```css
@import "tailwindcss";
-
@theme {
--color-primary-500: oklch(0.62 0.24 256.4);
--font-sans: "Inter", system-ui, sans-serif;
- --animate-fade-in-up: fade-in-up 0.4s ease-out;
}
```
- - **Kustomisasi Utility**: Daftarkan utility kelas kustom dengan direktif `@utility` agar secara otomatis terdeteksi saat proses kompilasi:
- ```css
- @utility text-shadow-sm {
- text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
- }
- ```
+ - **Kustomisasi Utility**: Daftarkan utility kelas kustom dengan direktif `@utility`.
- ### 2. Best Practices Penulisan Utility Classes
- - **Pengurutan Kelas**: Urutkan kelas secara logis untuk menjaga keterbacaan (gunakan alat bantu seperti `prettier-plugin-tailwindcss`):
- 1. *Layout* (`flex`, `grid`, `block`, `absolute`, `relative`, `inset-0`, `z-10`)
- 2. *Box Model* (`w-full`, `h-32`, `p-4`, `m-2`, `gap-4`)
- 3. *Typography* (`text-lg`, `font-bold`, `text-center`, `leading-relaxed`)
- 4. *Visuals/Colors* (`bg-white`, `border`, `border-gray-200`, `rounded-xl`, `shadow-sm`)
- 5. *Interactive/State modifiers* (`hover:bg-gray-50`, `focus:ring-2`, `disabled:opacity-50`, `dark:bg-neutral-900`)
- - **Responsive Design (Mobile-First)**: Rancang layout untuk perangkat terkecil tanpa prefix layar (`sm:`, `md:`, `lg:`), kemudian tambahkan breakpoint untuk layar yang lebih lebar secara bertahap.
- ```html
- <!-- Bagus (Mobile-First) -->
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3"></div>
- ```
+ #### 2. Praktik Terbaik Penulisan Utility Classes
+ - **Pengurutan Kelas**: Urutkan kelas secara logis (Layout -> Box Model -> Typography -> Visuals -> State modifiers).
+ - **Responsive Design (Mobile-First)**: Rancang layout untuk perangkat terkecil tanpa prefix layar (`sm:`, `md:`), kemudian tambahkan breakpoint untuk layar yang lebih lebar secara bertahap.
- ### 3. Modifiers Lanjutan & Interaktivitas
+ #### 3. Modifiers Lanjutan & Interaktivitas
- **Group & Peer Modifiers**: Gunakan `group` pada kontainer induk dan `group-hover:` pada elemen anak untuk animasi hover gabungan. Gunakan `peer` untuk interaksi antar elemen bersaudara.
- ```html
- <div class="group p-4 hover:bg-primary-500">
- <span class="text-neutral-900 group-hover:text-white">Hover me</span>
- </div>
- ```
- - **Dark Mode**: Gunakan modifier `dark:` secara konsisten untuk memastikan dukungan mode gelap yang mulus dan nyaman secara visual di semua komponen.
+ - **Dark Mode**: Gunakan modifier `dark:` secara konsisten.
- ### 4. Optimalisasi Kinerja & Penulisan Kelas Dinamis
- - **Hindari Kelas Dinamis Terpotong**: Jangan membuat kelas secara dinamis dengan interpolasi string (seperti `text-${color}-500`). Tailwind memindai file sumber secara statis. Jika kelas utuh tidak tertulis, kelas tersebut tidak akan disertakan ke dalam bundel CSS produksi.
- - **Solusi Kelas Dinamis**: Gunakan *mapping* objek untuk menentukan kelas yang diizinkan secara statis:
- ```javascript
- // SANGAT BURUK (Tidak akan di-build oleh Tailwind)
- const alertClass = `bg-${type}-100 text-${type}-800`;
+ #### 4. Penggunaan Kelas Dinamis & Penggabungan
+ - **Hindari Kelas Dinamis Terpotong**: Jangan membuat kelas secara dinamis dengan interpolasi string (seperti `text-${color}-500`). Gunakan *mapping* objek statis.
+ - **Merging Classes**: Gunakan helper `cn(...)` yang menggabungkan `clsx` dan `tailwind-merge` untuk menghindari konflik kelas utilitas (misalnya konflik padding atau warna border).
- // BAGUS (Tailwind dapat memindai kelas utuh)
- const alertStyles = {
- info: 'bg-blue-100 text-blue-800',
- warning: 'bg-yellow-100 text-yellow-800',
- error: 'bg-red-100 text-red-800'
- };
- const alertClass = alertStyles[type];
- ```
- - **Merging Classes**: Jika membuat komponen React/Next.js dengan properti kustom (props), gunakan utility library seperti `clsx` bersama `tailwind-merge` untuk menghindari konflik kelas utilitas (misalnya konflik padding atau warna border):
- ```typescript
- import { twMerge } from 'tailwind-merge';
- import { clsx, ClassValue } from 'clsx';
+ ### Kondisi Pemicu
+ Aktif secara otomatis setiap kali pengguna meminta untuk:
+ 1. Menulis, merefaktor, atau mengoptimalkan kode styling CSS dengan Tailwind CSS.
+ 2. Mengonfigurasi Tailwind CSS (baik file CSS dengan Tailwind v4 `@theme` atau file konfigurasi lama `tailwind.config.js`).
+ 3. Membuat desain web responsif, layout grid/flexbox, atau efek interaktif (hover, focus, dark mode).
+ 4. Menyusun komponen UI kustom menggunakan utility classes Tailwind CSS.
- export function cn(...inputs: ClassValue[]) {
- return twMerge(clsx(inputs));
+ ---
+
+ <a name="english"></a>
+ ## English
+
+ ### Description
+ You are a frontend development expert specializing in Tailwind CSS (especially version v4). Your task is to write clean, structured, responsive, high-performance utility classes and apply modern UI/UX design principles.
+
+ ### Development Guidelines with Tailwind CSS
+
+ #### 1. CSS-First Configuration (Tailwind CSS v4)
+ - **No `tailwind.config.js`**: In Tailwind v4, configuration moves to the main CSS file using the `@theme` directive and `@import "tailwindcss";`.
+ - **Theme Customization**: Declare custom theme variables directly inside the `@theme` block using standard CSS naming:
+ ```css
+ @import "tailwindcss";
+ @theme {
+ --color-primary-500: oklch(0.62 0.24 256.4);
+ --font-sans: "Inter", system-ui, sans-serif;
}
```
+ - **Utility Customization**: Register custom utility classes using the `@utility` directive.
- ### 5. Fitur CSS Modern Terintegrasi
- - **OKLCH Colors**: Gunakan format warna OKLCH (`oklch(...)`) untuk mendapatkan saturasi warna yang lebih konsisten pada berbagai tingkat kecerahan dan ramah terhadap pengguna dengan gangguan penglihatan warna.
- - **Container Queries**: Manfaatkan kontainer kueri jika tata letak komponen bergantung pada lebar kontainer induknya, bukan lebar layar viewport secara keseluruhan (`@container` dan `@sm:grid-cols-2`).
+ #### 2. Best Practices for Writing Utility Classes
+ - **Class Ordering**: Order classes logically (Layout -> Box Model -> Typography -> Visuals -> State modifiers).
+ - **Responsive Design (Mobile-First)**: Design layouts for the smallest devices without screen prefixes, then add breakpoints (`md:`, `lg:`) incrementally.
- ## Kondisi Pemicu
+ #### 3. Advanced Modifiers & Interactivity
+ - **Group & Peer Modifiers**: Use `group` on the parent container and `group-hover:` on children for coordinated hover effects. Use `peer` for sibling interactions.
+ - **Dark Mode**: Use `dark:` modifiers consistently for dark mode support.
- Aktif secara otomatis setiap kali pengguna meminta untuk:
- 1. Menulis, merefaktor, atau mengoptimalkan kode styling CSS dengan Tailwind CSS.
- 2. Mengonfigurasi Tailwind CSS (baik file CSS `index.css`/`globals.css` dengan Tailwind v4 `@theme` atau file konfigurasi lama `tailwind.config.js`).
- 3. Membuat desain web responsif, layout grid/flexbox, atau efek interaktif (hover, focus, dark mode).
- 4. Menyusun komponen UI kustom menggunakan utility classes Tailwind CSS.
- 5. Mengatasi masalah bundel CSS yang membengkak atau kelas Tailwind yang tidak berfungsi (*rendering issues*).
+ #### 4. Performance & Dynamic Class Names
+ - **Avoid Broken Dynamic Classes**: Do not build class names dynamically using string interpolation (e.g., `text-${color}-500`). Use static object mapping instead.
+ - **Merging Classes**: Use a `cn(...)` utility (combining `clsx` and `tailwind-merge`) to merge classes dynamically without utility conflicts.
+
+ ### Trigger Conditions
+ Active automatically whenever the user asks to:
+ 1. Write, refactor, or optimize CSS styling with Tailwind CSS.
+ 2. Configure Tailwind CSS (via Tailwind v4 `@theme` in CSS files or legacy `tailwind.config.js`).
+ 3. Build responsive layouts, grids, flexboxes, or interactive states (hover, focus, dark mode).
+ 4. Compose custom UI components using Tailwind CSS utility classes.