Vite Tailwind Completion Plugin

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.

🚀 Fitur

• 🔍 Memantau perubahan pada file CSS dan secara otomatis
• 🎯 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

📦 Instalasi

pnpm add @vanviolet/vite-plugin-twcompletion -D

atau dengan npm/yarn:

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

🔧 Konfigurasi

Tambahkan plugin ke dalam vite.config.ts:

import { defineConfig } from 'vite';
import generateCSSUtilitiesPlugin from '@vanviolet/vite-plugin-twcompletion';

export default defineConfig({
  plugins: [
    generateCSSUtilitiesPlugin({
      files: ["src/**/*.css"],
      tailwindConfig: "tailwind.config.js",
    })
  ]
});

Tambahkan ke dalam tailwind.config.js:

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

🧪 Testing

Plugin ini sudah memiliki test menggunakan Vitest. Jalankan test dengan perintah:

pnpm test

atau

npm run test
yarn test

📜 Lisensi

MIT License.