🔹 Preset در Tailwind چیه؟

Preset یعنی یه فایل پیش‌تنظیم (config آماده) که می‌تونی در پروژه‌های مختلف دوباره استفاده کنی.
وقتی چند تا پروژه داری و می‌خوای تنظیمات مشترک (مثلاً رنگ‌ها، spacing، پلاگین‌ها و …) بینشون باشه، از presets استفاده می‌کنیم.

🔹 ساخت Preset ساده

مثال: یه preset بسازیم که رنگ‌ها و فونت‌ها رو مشخص کنه.

📌 my-preset.js:

module.exports = {
  theme: {
    colors: {
      primary: '#1E40AF',
      secondary: '#9333EA',
    },
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
  },
  plugins: [],
}

🔹 استفاده از Preset در پروژه

📌 tailwind.config.js:

module.exports = {
  presets: [
    require('./my-preset')
  ],
  theme: {
    extend: {
      spacing: {
        128: '32rem',
      },
    },
  },
}

📌 حالا می‌تونی توی HTML استفاده کنی:

<div class="bg-primary text-white p-128">
  Box با رنگ و spacing سفارشی از preset
</div>

🔹 چند Preset همزمان

میشه بیش از یک preset داشت:

module.exports = {
  presets: [
    require('./preset-colors'),
    require('./preset-typography'),
  ],
}

🔹 نکته مهم

• Presets بیشتر برای اشتراک تنظیمات بین پروژه‌ها کاربرد داره.

• داخل preset می‌تونی همه‌چیز بذاری: theme, plugins, variants و …

• توی پروژه اصلی هم می‌تونی اونا رو extend یا override کنی.

• ترتیب presets مهمه → اگه چندتا باشن، مقادیر بعدی override می‌کنن.