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

من در روز ۴۵ از مسیر یادگیری فول‌استک خود هستم.

دیروز مسیریابی (routing) در Express برای صفحات HTML استاتیک را یاد گرفتم. امروز روی Tailwind CSS تمرکز کردم.

من از فایل‌های CSS حجیم فاصله گرفتم. اکنون از یک گردش کار utility-first استفاده می‌کنم که باعث می‌شود فرآیند طراحی سریع‌تر انجام شود.

Tailwind به شما کلاس‌های utility می‌دهد. شما از این کلاس‌ها برای ساخت چیدمان‌های (layouts) سفارشی مستقیماً در HTML خود استفاده می‌کنید.

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

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

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

من مسیر محتوا (content path) را در tailwind.config.js تنظیم کردم تا فایل‌های HTML و JS من را اسکن کند:

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

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

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