MenggunakanTailwind CSS pada Blazor Web Assembly Net Core

Tailwind CSS adalah utility css pertama yang bisa digunakan untuk mendesign tanpa menulisakan dengan CSS, contohnya pada penggunaan Blazor. Blazor sendiri adalh framework yang membuat web dengan UI interaktif  menggunakan C# tanpa javascript. Mengintegrasikan Tailwinds CSS dengan Blazor application dapat meningkatkan kapabilitas style dan mempersingkat proses pengembangan.

Cara Menggunakan Tailwind CSS Pada Blazor Web Assembly Net Core 

Ikuti Langkah-langlah berikut ini secara seksama

1. Download NodeJSNodeJS dan Instalas pada windows 

2. Masuk forlder baru Path pada Environment Variables dan masukan “C:\Program Files (x86)\nodejs” atau “C:\Program Files \nodejs “

3. Dimulai dengan membuat project baru di Visual Studio 2022

4. Lalu, install Tailwind CSS dengan menggunakan npm. Arahkan ke project direktori dan jalankan

5. Pada konfigurasi Tailwind file (tailwind.config.js), modifikasi code seperti di bawah ini,

6. Harusnya file app.css sudah ada pada folder wwwroot/css, tambahkan code di bawah ini,

    @tailwind base;

    @tailwind components;

    @tailwind utilities;

   kalau belum ada file app.css jalankan perintah di bawah ini di command line,

   npx tailwindcss -i wwwroot/css/site.css -o wwwroot/css/app.min.css --watch

7. Buka file _Host.cshtml atau index.razor dan modikasi code seperti di bawah ini,

Demikianlah cara integrasi Tailwind Css ke Blazor Web Assembly Net Core.

ProgrammingVisual Studio

Share This :