روز ۴۵ یادگیری MERN Stack

۴۵ روز از مسیر من برای تبدیل شدن به یک مهندس full-stack می‌گذرد.

دیروز، نحوه سرو کردن صفحات HTML استاتیک با Express routing را یاد گرفتم. امروز، در استفاده از Tailwind CSS با استفاده از Tailwind CLI تسلط پیدا کردم.

من در حال فاصله گرفتن از فایل‌های CSS حجیم هستم. برای ساخت سریع‌تر طرح‌ها (layouts)، به سمت یک گردش کار utility-first تغییر مسیر داده‌ام.

Tailwind کامپوننت‌های از پیش ساخته شده ارائه نمی‌دهد؛ بلکه کلاس‌های utility کوچک ارائه می‌دهد. این کلاس‌ها به شما اجازه می‌دهند طراحی‌های سفارشی خود را مستقیماً در HTML بسازید.

فرآیند فنی من به این صورت است:

  • من Tailwind را به جای استفاده از لینک CDN، با استفاده از npm نصب کردم.
  • هسته کامپایلر را با npm install -D tailwindcss نصب کردم.
  • تنظیمات را با npx tailwindcss init مقداردهی اولیه کردم.

همچنین یاد گرفتم که Tailwind چگونه از طریق tree-shaking حجم فایل را کاهش می‌دهد. این فرآیند استایل‌های استفاده نشده را حذف می‌کند. من مسیرهای محتوا را طوری تنظیم کردم که کامپایلر پوشه‌های استاتیک من را اسکن کند.

تنظیمات tailwind.config.js من:

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

این تنظیمات تضمین می‌کند که فایل CSS نهایی من کوچک و سریع باقی بماند.

منبع: https://dev.to/ali_hamza_589ec7b3eb6688d/day-45-of-learning-mern-stack-ai3