بهینه‌سازی ساخت Tailwind CSS وقتی که دارید از Angular Material استفاده می‌کنید ممکنه در نگاه اول یه مقدار پیچیده به نظر برسه، اما با فهمیدن چند نکته ساده، می‌تونه به تجربه برنامه‌نویسی شما کمک بزرگی کنه. خیلی از برنامه‌نویس‌ها با یک سری از چالش‌های مشابه مواجه میشن وقتی که دارند از این دو تکنولوژی به صورت همزمان استفاده می‌کنند، مثل تداخل اصول طراحی و سنگین شدن فایل‌های CSS.
در ابتدا بهتره یک نگاه کوتاه به موضوع داشته باشیم. Angular Material، یک کتابخانه کامپوننتی معروف برای Angular است که از اصول طراحی متریال گوگل پیروی می‌کنه و به توسعه‌دهنده‌ها اجازه می‌ده که به سرعت رابط‌های کاربری زیبایی بسازند. از طرف دیگه، Tailwind CSS یک ابزار قدرتمند برای مدیریت کلاس‌های CSS به صورت utility-first هست که شما رو قادر می‌کنه به راحتی با استفاده از کلاس‌های کوچک به ترکیب‌های بزرگی برسید.
وقتی که شما از هر دو این ابزارها در کنار هم استفاده می‌کنید، یکی از مسائلی که ممکنه با اون مواجه بشید حجیم شدن فایل‌های CSS و تداخل احتمالی کلاس‌ها هست. برای حل این مشکل، استفاده از روش‌های purging برای Tailwind CSS می‌تونه بسیار موثر باشه. Purge کمک می‌کنه که فقط کلاس‌هایی که به طور واقعی در صفحات شما استفاده شده است در فایل نهایی CSS باقی بمونن و بقیه حذف بشن، که این امر تاثیر مستقیم در افزایش سرعت بارگذاری صفحات داره.
در زیر نحوه به‌کارگیری Purge در یک پروژه با Angular و Angular Material رو مشاهده می‌کنید. برای شروع، شما باید فایل تنظیمات Tailwind CSS خودتون رو به نحوی تنظیم کنید که Purge_css به درستی کار کنه.
module.exports = {
purge: ['./src/**/*.{html,ts}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
};
در قطعه کد بالا:
module.exports - فایل تنظیمات خروجی برای تنظیمات Tailwind هست.purge - مشخص می‌کنه که Tailwind از چه فایل‌هایی برای شناسایی کلاس‌های استفاده شده استفاده کنه.'./src/**/*.{html,ts}' - به ابزار می‌گه که تمام فایل‌های HTML و TypeScript در پوشه src و زیرپوشه‌های اون رو بررسی کنه.darkMode - حالت تاریک رو تنظیم می‌کنه، به طور پیش‌فرض غیرفعال هست.theme - برای تنظیمات اضافی مربوط به موضوع.variants - برای تعیین انواع حالت‌های حالت‌های المان‌ها.plugins - برای افزودن پلاگین‌های اضافی.