‫یکپارچه‌سازی Tailwind CSS v4 Standalone در Blazor WebAssembly

این مقاله به بررسی نحوه یکپارچه‌سازی Tailwind CSS نسخه 4 با استفاده از CLI مستقل (standalone) در پروژه‌های Blazor WebAssembly می‌پردازد. Tailwind CSS v4 با معرفی یک CLI مستقل، نیاز به Node.js و npm را برای کامپایل استایل‌ها از بین برده و امکان استفاده آسان‌تر آن را در پروژه‌های .NET فراهم می‌کند. برای شروع، باید CLI مستقل Tailwind را دانلود و آماده‌سازی کنید. این شامل دریافت فایل اجرایی مناسب برای سیستم‌عامل (ویندوز، لینوکس یا macOS)، تغییر نام آن به tailwindcss و قرار دادن آن در یک پوشه ابزار (مانند C:\tools\tailwind\) و سپس افزودن مسیر این پوشه به متغیر محیطی PATH می‌شود. سپس، یک فایل ورودی CSS به نام input.css در پوشه wwwroot/css/ ایجاد کرده و دستور @import "tailwindcss"; را در آن قرار دهید. برای تولید فایل CSS نهایی، از دستور tailwindcss -i wwwroot/css/input.css -o wwwroot/css/output.css --watch در ریشه پروژه استفاده کنید. این دستور فایل input.css را خوانده، فایل‌های .razor، .html و .cshtml را اسکن می‌کند و فایل output.css را تولید می‌کند. در نهایت، برای استفاده از Tailwind در Blazor، باید فایل wwwroot/index.html را ویرایش کرده و به فایل output.css ارجاع دهید. با ایجاد یک کامپوننت آزمایشی در یک فایل .razor می‌توانید عملکرد صحیح Tailwind را بررسی کنید.