تابز مدیا | آموزش قدم به قدم برنامه نویسی

Reusing Styles

🔹 چرا بازاستفاده از استایل‌ها مهمه؟

وقتی پروژه بزرگ میشه، ممکنه یک ترکیب کلاس رو چندین بار استفاده کنی (مثل دکمه‌ها یا کارت‌ها).
برای جلوگیری از تکرار کد و راحت‌تر شدن نگهداری، باید راهی برای بازاستفاده (Reuse) داشته باشیم.

🔹 استفاده از `@apply` در CSS

می‌تونی کلاس‌های Tailwind رو داخل فایل CSS ترکیب کنی:


/* styles.css */
.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.card {
  @apply bg-white dark:bg-gray-800 shadow p-6 rounded-lg;
}

📌 حالا در HTML:


<button class="btn">Click Me</button>

<div class="card">
  <h2>Card Title</h2>
  <p>Card content...</p>
</div>

✅ همون استایل‌ها ولی تمیزتر و قابل‌استفاده در کل پروژه.

🔹 ساختن کامپوننت‌ها در فریم‌ورک‌ها

اگر با React / Vue / Angular کار می‌کنی، می‌تونی ترکیب کلاس‌ها رو داخل یک کامپوننت قرار بدی:

📌 React Example:


function Button({ children }) {
  return (
    <button className="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
      {children}
    </button>
  );
}

📌 استفاده:


<Button>ثبت‌نام</Button>
<Button>ورود</Button>

🔹 استفاده از Plugins یا Extracted Components

در Tailwind می‌تونی استایل‌های تکراری رو به صورت Plugin یا Utility سفارشی هم تعریف کنی.

مثال ساده:


// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: "#4CAF50",
      },
    },
  },
  plugins: [
    function({ addComponents }) {
      addComponents({
        ".btn-primary": {
          "@apply bg-brand text-white font-bold py-2 px-4 rounded": {},
        },
      })
    }
  ],
}

📌 حالا می‌تونی از کلاس btn-primary استفاده کنی.

🔹 نکته مهم