Tailwind از CDN به CSS ساخته‌شده: چرا و چطور مهاجرت کنیم؟

برای شروع سریع، می‌شود تیلویند را با یک تگ <script> از CDN لود کرد. تیلویند خودش تصریح می‌کند این روش برای توسعه و آزمایش است و برای تولید توصیه نمی‌شود. چرا؟ چون تمام پردازش (پیدا کردن کلاس‌های استفاده‌شده و ساختن CSS) در مرورگر کاربر انجام می‌شود: یک اسکریپت بزرگ باید دانلود شود، اجرا شود و بعد صفحه استایل بگیرد. نتیجه: LCP بدتر، وابستگی به یک سرویس بیرونی، و پیچیده‌تر شدن سیاست امنیتی (CSP). این‌ها را روی خود همین سایت عملاً تجربه کردم و همه‌ی صفحه‌ها را مهاجرت دادم.

ایده‌ی راه‌حل

به‌جای ساختن CSS در مرورگر، آن را یک‌بار در زمان build می‌سازید. ابزار تیلویند فایل‌های شما را می‌خواند، فقط کلاس‌های واقعاً استفاده‌شده را نگه می‌دارد و یک فایل CSS کوچک می‌دهد. مرورگر فقط همان CSS را بارگذاری می‌کند.

مراحل

۱. نصب:

npm install -D tailwindcss@3

۲. فایل tailwind.config.js با مسیر فایل‌هایی که کلاس دارند:

module.exports = {
  content: ["./**/*.html"],
  theme: { extend: { /* همان تنظیمات قبلی شما */ } },
};

۳. یک فایل ورودی input.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

۴. ساخت خروجی کوچک‌شده:

npx tailwindcss -i input.css -o assets/css/site.css --minify

۵. در HTML، اسکریپت CDN را بردارید و به‌جایش:

<link rel="stylesheet" href="/assets/css/site.css">

۶. اگر در CSP اجازه‌ی cdn.tailwindcss.com داده بودید، حذفش کنید تا سیاست سخت‌تر شود.

چه چیزی را مراقب باشیم؟

• کلاس‌های ساخته‌شده با جاوااسکریپت. تیلویند فقط رشته‌های کامل کلاس را در فایل‌ها پیدا می‌کند. 'bg-' + color + '-500' شناسایی نمی‌شود؛ نام کامل کلاس را بنویسید. (در سایت خودم کارت‌های پروژه با JS ساخته می‌شوند؛ چون نام کلاس‌ها کامل داخل رشته‌ی قالب بودند، پیدا شدند.)
• تنظیمات inline. اگر هر صفحه تنظیمات tailwind.config خودش را داخل HTML دارد و تنظیمات صفحه‌ها با هم فرق دارند (مثلاً رنگ یا سایه‌ی متفاوت با یک نام)، یک فایل CSS مشترک مشکل می‌سازد. راه‌حل من: برای هر صفحه یک فایل CSS با تنظیمات خودش ساختم.
• ظاهر را مقایسه کنید. قبل و بعد را با اسکرین‌شات مقایسه کنید.

نتیجه

در سایت خودم، فایل CSS هر صفحه بین حدود ۷ تا ۲۱ کیلوبایت شد و وابستگی به CDN و اسکریپت اجرایی در مرورگر حذف شد. به‌علاوه صفحه‌ها حتی بدون دسترسی به اینترنت استایل می‌گیرند؛ این برای تست محلی بسیار راحت‌تر است.

جمع‌بندی

CDN برای نمونه‌ی سریع خوب است و CLI برای سایت واقعی. اگر مراحل بالا را یک‌بار انجام دهید، هم سرعت بهتر می‌شود و هم امنیت و پیش‌بینی‌پذیری. برای ادامه‌ی بهینه‌سازی: چطور سرعت سایت را بالا ببریم.