Vite Plugins

Vite Plugin Collection

📦 Instalasi

pnpm add @vanviolet/vite-plugins -D

atau dengan npm/yarn:

npm install @vanviolet/vite-plugins --save-dev
yarn add @vanviolet/vite-plugins -D

TailwindCompletion

Plugin Vite untuk secara otomatis membaca file CSS dan menghasilkan file JavaScript dengan utilitas kelas CSS. Plugin ini juga dapat memicu reload Tailwind JIT dengan memperbarui timestamp pada file konfigurasi Tailwind.

[⚠️ Catatan] TailwindCompletion berguna untuk tailwindcss dibawah versi 4, karena versi 4 sudah bisa automatis menambahkan autocomplete di file css menggunakan @utility.

🚀 Fitur

• 🔍 Memantau perubahan pada file CSS dan secara otomatis
• 🎯 Cepat karena hanya memantau perubahan
• 🎯 Dapat dikonfigurasi dengan pola glob untuk membaca banyak file
• 🛠️ Memperbarui timestamp tailwind.config.js untuk memicu Tailwind JIT reload
• 🏗️ Menggunakan Vite untuk integrasi yang ringan dan cepat

🔧 Konfigurasi

Tambahkan plugin ke dalam vite.config.ts:

import { defineConfig } from 'vite';
import { TailwindCompletion } from '@vanviolet/vite-plugins';

export default defineConfig({
  plugins: [
    TailwindCompletion({
      files: ["src/**/*.css"],
    })
  ]
});

Tambahkan ke dalam tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
    plugins: [require("@vanviolet/completion")],
  };

Options

type TailwindCompletionOptions = {
  /** Daftar file CSS yang akan dipantau, mendukung glob pattern.
   * @default Semua file CSS dalam proyek akan dipantau.
   */
  files?: string[];

  /** Daftar file yang akan diignore, mendukung pola glob.
   * @default undefined tidak ada file yang diignore (undefined).
   */
  ignore?: string[];

  /** Daftar nama kelas CSS yang akan dikecualikan dari hasil.
   * @default [] (Tidak ada kelas yang dikecualikan secara default).
   */
  excludeClassname?: string[];

  /** Path ke file konfigurasi Tailwind CSS.
   * @default ["tailwind.config.js"] (Secara default membaca dari tailwind.config.js).
   */
  tailwindConfig?: string;

  /** Menonaktifkan output log.
   * Jika diatur ke `true`, plugin tidak akan menampilkan informasi di console.
   * @default false (Secara default, log tetap ditampilkan).
   */
  disableConsole?: boolean;
};