Tailwind CSS فراہم کرتا ہے ' سیدھ میں آنے والی اشیاء کنٹینر کے کراس ایکسس کے ساتھ فلیکس اور گرڈ آئٹمز کی پوزیشن کو کنٹرول کرنے کی افادیت۔ اس میں مختلف یوٹیلیٹی کلاسز ہیں، جیسے 'آئٹمز اسٹارٹ'، 'آئٹمز سینٹر'، 'آئٹمز اینڈ'، 'آئٹمز بیس لائن' وغیرہ۔ مزید برآں، صارفین ہوور پراپرٹی کو 'آئٹمز-
یہ مضمون Tailwind CSS میں الائن آئٹمز' یوٹیلیٹیز پر ہوور لگانے کے طریقہ کار کی مثال دے گا۔
ٹیل ونڈ میں 'الائن آئٹمز' یوٹیلیٹیز پر ہوور کیسے لگائیں؟
ٹیل وِنڈ میں 'الائن آئٹمز' کی افادیت پر ہوور لگانے کے لیے، ایک HTML ڈھانچہ بنائیں اور 'کا اضافہ کریں۔ ہوور 'مطلوبہ کے ساتھ یوٹیلیٹی کلاس' اشیاء-
نحو
< عنصر کلاس = 'ہوور: آئٹمز-
مثال
اس مثال میں، ہم 'items-start' پراپرٹی کے ساتھ ایک فلیکس کنٹینر بنائیں گے۔ پھر، ہم استعمال کریں گے ' ہوور: اشیاء کا مرکز 'کلاس میں' آؤٹ پٹ ٹیل ونڈ میں 'الائن آئٹمز' یوٹیلیٹیز پر ہوور اثر لگانے کے لیے، 'استعمال کریں ہوور 'خاص کے ساتھ یوٹیلیٹی کلاس' اشیاء-
< جسم >
< div کلاس = 'فلیکس آئٹمز-اسٹارٹ ہوور: آئٹمز-سنٹر جواز-قریب متن-مرکز h-44 m-3 bg-pink-300 gap-4' >
< div کلاس = 'bg-pink-600 py-4 w-40' > 1 div >
< div کلاس = 'bg-pink-600 py-12 w-40' > 2 div >
< div کلاس = 'bg-pink-600 py-8 w-40' > 3 div >
div >
جسم >
یہاں:
مندرجہ بالا ویب صفحہ سے، یہ دیکھا جا سکتا ہے کہ ہوور پر کنٹینر کے کراس ایکسس کے ساتھ فلیکس آئٹمز کی سیدھ بدل رہی ہے۔ نتیجہ