منصوبے کے بارے میں
tailwindcss-motion ایک Tailwind CSS پلگ ان ہے جو RomboHQ میں تیار کیا گیا ہے۔ اسے ایک سادہ مگر طاقتور اینیمیشن لائبریری قرار دیا گیا ہے جو ڈویلپرز کو حسب ضرورت کی فریمز لکھنے کے بجائے براہ راست یوٹیلیٹی کلاسز کے ذریعے عناصر کو متحرک کرنے کی سہولت دیتی ہے۔
انسٹالیشن npm کے ذریعے بطور dev dependency کی جاتی ہے، پھر پلگ ان کو tailwind.config.js میں plugins array میں شامل کیا جاتا ہے۔ CommonJS require اور ESM import دونوں انداز دکھائے گئے ہیں۔ پیکیج کے ساتھ TypeScript تعریفیں آتی ہیں، اور motionScale اور motionTimingFunction جیسی تھیم حسب ضرورت تبدیلیاں ٹائپ شدہ ہیں۔
بنیادی خیال ہر جہت کو متحرک کرنے کے لیے ایک ان لائن سنٹیکس ہے۔ مثال کے طور پر، سلائیڈ اور فیڈ اثر motion-translate-x-in-25 اور motion-opacity-in-0 جیسی کلاسز کے ذریعے، یا motion-preset-fade جیسے پری سیٹ کے ذریعے حاصل کیا جا سکتا ہے۔ مکمل دستاویزات docs.rombo.co/tailwind پر میزبانی کی جاتی ہیں۔
براؤزر میں بصری طور پر اینیمیشن بنانے کے لیے ایک ساتھی Chrome ایکسٹینشن پیش کی جاتی ہے۔ یہ لوپنگ اینیمیشنز، دوبارہ استعمال کے قابل پری سیٹ محفوظ کرنے، اور نتائج کو Tailwind کلاسز، خالص CSS، یا Framer Motion کوڈ کے طور پر ایکسپورٹ کرنے کی سہولت دیتی ہے۔
README میں Tailwind Play پلے گراؤنڈ پر کئی لائیو مثالیں لنک کی گئی ہیں، جن میں ایک لینڈنگ پیج، چیٹ ڈائیلاگ، لو بیٹری ڈائنامک آئی لینڈ، Apple کلر سوواچز، ایک Rombo لوپ، اور ایموجی اینیمیشنز شامل ہیں۔ اس میں Rombo کا ذکر بھی ہے بطور ایک ابتدائی مرحلے کی کمپنی جو انٹرایکٹو انٹرفیسز کے لیے ٹولز بناتی ہے، اور اضافی وسائل بھی درج ہیں: پلگ ان کی تخلیق کے بارے میں ایک بلاگ پوسٹ، ایک اینیمیٹر بلڈر، اور ایک کمیونٹی UnoCSS پورٹ۔
ریپوزٹری میں صرف فراہم کردہ README متن موجود ہے؛ مواد میں کوئی لائسنس، تعاون کی رہنما ہدایات، ٹیسٹ سیٹ اپ، یا بینچ مارک ڈیٹا شامل نہیں ہے۔
Comments
0 people shared their preference · Deer Point appears after 10 participants
Sign in to join the discussion.