@muamars/dotnet-tailwind-vite

⚡ dotnet-tailwind-vite adalah sebuah CLI tool sederhana untuk mengintegrasikan Vite v8 dan Tailwind CSS v4 secara instan ke dalam proyek ASP.NET Core (MVC / Razor Pages).

Tool ini secara otomatis menyalin konfigurasi, membuat file CSS utama, menyisipkan environment condition (Dev Server / Production Build) ke dalam _Layout.cshtml, serta menambahkan build automation pipeline ke dalam file .csproj Anda.

🚀 Fitur Utama

• Zero Configuration: Otomatis membuat file package.json dan vite.config.ts yang sudah teroptimasi untuk ASP.NET Core.
• Smart Injection: Mencari file _Layout.cshtml secara otomatis dan menyisipkan kode Hot Module Replacement (HMR) Vite sebelum tag </head>.
• Csproj Build Automation: Menginjeksi perintah otomatis <Target Name="ViteBuild"> agar aset dikompilasi secara otomatis saat aplikasi di-publish menggunakan mode Release.
• Tailwind v4 Ready: Otomatis membuat file wwwroot/css/site.css dengan arahan baru @import "tailwindcss";.
• Production Asset Pipeline: Konfigurasi build Vite yang otomatis menimpa aset statis di dalam folder wwwroot tanpa menghapus file bawaan .NET lainnya.
• Optional Flowbite Support: Integrasi instan komponen UI Flowbite beserta konfigurasi static middleware-nya hanya dengan menambahkan satu flag perintah.

🛠️ Cara Instalasi & Penggunaan

Buka terminal di root folder proyek ASP.NET Core baru Anda yang masih bersih, lalu jalankan perintah berikut secara berurutan:

1. Inisialisasi npm (Jika belum ada package.json)

npm init -y

2. Jalankan Perintah Install

Masukkan package CLI ini sebagai dependensi development proyek Anda:

npm install @muamars/dotnet-tailwind-vite --save-dev

3. Inisialisasi Integrasi via CLI

Jalankan perintah ini untuk mengotomatisasi konfigurasi file .csproj, _Layout.cshtml, dan pembuatan aset:

npx dotnet-vite

💡 Opsional: Menggunakan Flowbite Component Library

Jika Anda ingin proyek langsung terintegrasi dengan komponen UI instan dari Flowbite (Tailwind v4 ready), Anda cukup menambahkan flag --flowbite saat inisialisasi:

npx dotnet-vite --flowbite

Script secara otomatis akan menginstall library flowbite, menyiapkan kode CSS @plugin, menyisipkan skrip interaktif di layout, dan mengatur hak akses statis folder node_modules pada backend Program.cs Anda.

4. Pasang Dependensi Frontend & Jalankan Dev Server

Setelah script CLI selesai memproses proyek Anda, jalankan perintah berikut untuk mengunduh modul Tailwind/Vite bawaan proyek dan mengaktifkan server lokal:

npm install
npm run dev

Sekarang, jalankan proyek .NET Anda (dotnet watch atau via Visual Studio). Proyek Anda sudah terhubung penuh dengan Vite Dev Server!

⚙️ Apa Saja yang Diubah Otomatis?

Script ini akan melakukan otomatisasi terhadap struktur proyek Anda seperti berikut:

1. File wwwroot/css/site.css

Otomatis mendefinisikan Tailwind v4 (dan konfigurasi plugin jika menggunakan opsi --flowbite):

@import "tailwindcss";

/* Baris di bawah ini otomatis ditambahkan jika menggunakan flag --flowbite */
@import "flowbite/src/themes/default";
@plugin "flowbite/plugin";
@source "../node_modules/flowbite";

2. File _Layout.cshtml

Menyisipkan logika deteksi environment otomatis sebelum tag </head> dan menyertakan skrip interaktif Flowbite sebelum tag </body> (jika diminta):

@if (Env.IsDevelopment())
{
    <!-- Terhubung ke Vite Dev Server untuk Hot Module Replacement (HMR) -->
    <script type="module" src="http://localhost:5173/@client"></script>
    <link rel="stylesheet" href="http://localhost:5173/wwwroot/css/site.css" />
}
else
{
    <!-- Membaca file CSS statis hasil kompilasi production -->
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
}

3. File .csproj

Menginjeksi skrip kompilasi otomatis agar ketika Anda melakukan publish aplikasi .NET ke server, bundel CSS produksi akan dibuat secara otomatis:

  <Target Name="ViteBuild" BeforeTargets="Build" Condition="'\$(Configuration)' == 'Release'">
    <Exec Command="npm run build" />
  </Target>

4. File Program.cs (Khusus Opsi --flowbite)

Mengonfigurasi static file middleware tambahan agar runtime .NET memberikan izin kepada browser untuk membaca berkas javascript interaktif milik Flowbite dari dalam folder rahasia node_modules:

app.UseStaticFiles();

// Otomatis disisipkan oleh CLI
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "node_modules")),
    RequestPath = "/node_modules"
});

📦 Perintah Build Manual untuk Production

Saat Anda bersiap merilis aplikasi ke tahap production secara manual, Anda hanya perlu menjalankan perintah kompilasi berikut untuk menghasilkan file CSS statis yang optimal dan ter-minify:

npm run build

👤 Author

• Muammar - GitHub Profile

📄 Lisensi

Proyek ini dilisensikan di bawah ISC License. Bebas digunakan dan dimodifikasi untuk proyek pribadi maupun komersial.