قۇيرۇق قانىلىنىڭ ئەڭ ياخشى ئەمەلىيىتى - قۇيرۇق قانىلى CSS نىڭ ئاخىرقى قوللانمىسى
ئەمەلىي قوللىنىشچان CSS نى يولغا قويۇشقا كەلسەك ، Tailwind CSS نۇرغۇن ئاچقۇچىلارنىڭ ھەل قىلىش چارىسى بولۇپ قالدى.
ئۇ تەمىنلىگەن جانلىقلىق ، ئۈنۈمدارلىق ۋە ئىشلىتىش قولايلىقلىقى زامانىۋى تور تەرەققىياتىدا قىممەتلىك ئىسپاتلاندى.
قانداقلا بولمىسۇن ، ھەر قانداق قورالغا ئوخشاش ، ئۇنىڭدىن تېخىمۇ ياخشى پايدىلىنىش ئۈچۈن ، Tailwind CSS نىڭ ئەڭ ياخشى تەجرىبىلىرىنى چۈشىنىش ۋە قوللىنىش تولىمۇ مۇھىم.
بۇ تېخنىكىلارنىڭ بەزىلىرىگە شۇڭغۇپ باقايلى.
1. ئىشلىتىش-بىرىنچى ئاساس
ئەمەلىي قوللىنىشچان پەلسەپە Tailwind CSS نىڭ يادرولۇق پرىنسىپى بولۇپ ، پروگرامما ئاچقۇچىلارغا ئالدىن لايىھىلەنگەن زاپچاسلارنىڭ ئورنىغا تۆۋەن دەرىجىلىك ئەمەلىي دەرسلەر بىلەن ھوقۇق بېرىشنى مەقسەت قىلىدۇ. بۇ خىل ئۇسۇل دەسلەپتە HTML نىڭ يېپىشقاقلىقى سەۋەبىدىن مۈشكۈلدەك قىلىدۇ. قانداقلا بولمىسۇن ، چۈشىنىلگەندىن كېيىن ، ئۇ تېز سۈرئەتتە تەقلىد قىلىش ۋە ئىشلەپچىقىرىش سەۋىيىسىنى خاسلاشتۇرالايدۇ.
ئەمەلىي قوللىنىشچان بىناكارلىقتا ، ھەر بىر سىنىپ مەلۇم ئۇسلۇب خاسلىقىغا ماس كېلىدۇ. مەسىلەن ، تېكىست مەركىزى سىنىپى تېكىستىڭىزنى مەركەزگە توغرىلايدۇ ، bg-blue-500 ئېلېمېنتىڭىزغا كۆك تەگلىكنىڭ سايىسىنى بېرىدۇ.
بۇ ئۇسۇل زاپچاسلارنىڭ قايتا ئىشلىتىلىشىنى ئىلگىرى سۈرىدۇ ۋە سىز يازغان CSS مىقدارىنى ئازايتىدۇ ، كونكرېت ئۇرۇش ۋە ئۆلۈك كودلارنى يوقىتىش قاتارلىق كۆپ ئۇچرايدىغان مەسىلىلەرنى تۈگىتىدۇ.
2. مەسئۇلىيەتچان لايىھىلەش
Tailwind CSS يەنە ئىنكاس لايىھىسىدە قالتىس. ئۇ كۆچمە بىرىنچى بۆسۈش سىستېمىسىنى ئىشلىتىدۇ ، يەنى كىچىك ئېكرانلارغا قوللىنىلغان ئۇسلۇبلار چوڭراقلارغا ئاسانلا ماسلىشالايدۇ. بۇ سىزنىڭ پايدىلىق دەرسلىرىڭىزدىن بۇرۇن sm:, md:, lg:, ۋە xl: غا ئوخشاش ئاددىي ئالدى قوشۇلمىلارنى ئىشلىتىپ بولىدۇ.
مەسىلەن ، md: تېكىست مەركىزى پەقەت ئوتتۇرا ۋە چوڭ ئېكرانلاردا تېكىست مەركىزى سىنىپىنى قوللىنىدۇ. بۇ ئارقىلىق ئوخشىمىغان ئېكران چوڭلۇقى ئۈچۈن بىۋاسىتە لايىھىلەپ ، Tailwind بىلەن ئىنكاس لايىھىسىنى شامال قىلالايسىز.
3. ئۇسلۇبنى قايتا ئىشلىتىش
ئەمەلىي ئىشلىتىش ئۇسۇلى ئالدى بىلەن HTML غا بىۋاسىتە ئۇسلۇب قوللىنىشقا ئىلھاملاندۇرسىمۇ ، ئەمما مۇرەككەپ ئاممىۋى بىرىكمىلەرنى تەكرارلاش ئاۋارىچىلىك بولۇپ قالىدۇ. بۇ يەردە Tailwind نىڭ @apply كۆرسەتمىسى ھاياتلىقنى ساقلىغۇچىغا ئايلىنىدۇ ، ئۇ سىزنىڭ خاس CSS سىنىپلىرىغا قايتا-قايتا ئۇسلۇبلارنى چىقىرىشىڭىزغا يول قويىدۇ.
مەسىلەن ، سىز دائىم bg-red-500 تېكىست-ئاق p-6 نىڭ بىرىكمىسىنى ئىشلەتسىڭىز ، .error غا ئوخشاش يېڭى بىر سىنىپ قۇرالايسىز ۋە @apply ئارقىلىق بۇ ئۇسلۇبلارنى قايتا ئىشلىتەلەيسىز. بۇ كود ئوقۇشچانلىقى ۋە سىجىللىقىنى ئاشۇرىدۇ.
4. خاس ئۇسلۇب قوشۇش
Tailwind CSS گەرچە نۇرغۇنلىغان دەرسلىك دەرسلىرى بىلەن كەلگەن بولسىمۇ ، ئەمما سىز ئالاھىدە تەلەپ ئۈچۈن خاس ئۇسلۇبقا ئېھتىياجلىق بولۇشىڭىز مۇمكىن. Tailwind سەپلىمە ھۆججىتى tailwind.config.js ئارقىلىق كەڭ كۆلەمدە خاسلاشتۇرۇش تاللانمىلىرى بىلەن تەمىنلەيدۇ.
سۈكۈتتىكى سەپلىمىنى كېڭەيتىپ ، ئىختىيارى رەڭ ، بۆسۈش ئېغىزى ، خەت نۇسخىسى ۋە باشقىلارنى قۇرالايسىز. قانداقلا بولمىسۇن ، بۇ ئىقتىدارنى تېجەپ ، سەپلىمە ھۆججىتىڭىزنىڭ كۆپۈپ كېتىشىنىڭ ئالدىنى ئېلىش كېرەك.
5. ئىقتىدار ۋە كۆرسەتمە
Tailwind CSS سىزنىڭ تەرەققىيات تەجرىبىڭىزنى تېخىمۇ راۋانلاشتۇرۇش ئۈچۈن بىر قانچە ئىقتىدار ۋە كۆرسەتمە بىلەن تەمىنلەيدۇ. مەسىلەن ، ئۇسلۇب () ئىقتىدارى سىزنىڭ CSS دىكى سەپلىمە قىممىتىڭىزنى بىۋاسىتە زىيارەت قىلىپ ، ھەرىكەتچان ئۇسلۇبنى ئاسانلاشتۇرىدۇ.
ئۇنىڭ ئۈستىگە ، Tailwind نىڭ كۆرسەتمىلىرى @responsive, @variants ۋە @apply غا ئوخشاش ، ئايرىم-ئايرىم ھالدا ئىنكاس قايتۇرۇش ، دۆلەت ۋارىيانتلىرىنى ھاسىل قىلىش ۋە قايتا-قايتا ئۇسلۇبلارنى چىقىرىشقا يول قويىدۇ. بۇ ئىقتىدار ۋە كۆرسەتمىلەرنى مۇۋاپىق ئىشلىتىش سىزنىڭ تەرەققىيات جەريانىڭىزنى تېزلىتىدۇ ۋە كود ساندۇقىڭىزنى تەرتىپلىك ساقلايدۇ.
6. Hover ، فوكۇس ۋە باشقا شىتاتلارنى بىر تەرەپ قىلىش
Tailwind CSS پارقىرايدىغان يەنە بىر ساھە ئوخشىمىغان ئېلېمېنت ھالىتىنى بىر تەرەپ قىلىدۇ. ئايلانما ، فوكۇس ، ئاكتىپ ۋە باشقا شىتاتلارغا ئۇسلۇب قوللىنىش دۆلەت نامىغا ئىشلىتىدىغان سىنىپقا ئالدىن قوشۇلغانغا ئوخشاش ئاددىي.
مەسىلەن ، hover: bg-blue-500 ئېلېمېنت ئۈستىدە بولغاندا bg-blue-500 سىنىپى قوللىنىلىدۇ. بۇ ئالدى قوشۇلغۇچىلار ئېلېمېنتلارنىڭ ئوخشىمىغان ھالەتتىكى ھەرىكىتىنى يۇقىرى دەرىجىدە كونترول قىلىپ ، تور بېتىڭىزنىڭ ئىشلەتكۈچى تەجرىبىسىنى ئۆستۈرىدۇ.
خۇلاسىلىگەندە ، Tailwind CSS نىڭ ئەڭ ياخشى تەجرىبىلىرىنى ئىگىلەش تور ئېچىش جەريانىڭىزنى زور دەرىجىدە يۇقىرى كۆتۈرەلەيدۇ. ئۇسلۇب ، خاسلاشتۇرۇش ۋە قولنى ئۈنۈملۈك ئىشلىتىش بىلەن بىرلەشتۈرۈلگەندە ، ئالدى بىلەن ئىشلىتىش ئۇسۇلى
DivMagic ئارقىلىق Tailwind CSS خىزمەت ئېقىمىڭىزنى ياخشىلاڭ
ئەگەر Tailwind CSS خىزمەت ئېقىمىڭىزنى ياخشىلىماقچى بولسىڭىز ، تور كۆرگۈڭىزدىن Tailwind CSS دەرسلىرىنى بىۋاسىتە كۆچۈرۈپ ئايلاندۇرالايدىغان تور كۆرگۈچ كېڭەيتىلمىسى DivMagic نى تەكشۈرۈپ بېقىڭ ، ئۇ ھەرقانداق تور بېكەتتە ئىشلەيدۇ.
يېڭىلاپ تۇرۇشنى خالامسىز؟
DivMagic ئېلېكترونلۇق خەت تىزىملىكىگە قوشۇلۇڭ!
قوراللار
شەرت ۋە سىياسەت
© 2024 DivMagic, Inc. بارلىق ھوقۇقلار قوغدىلىدۇ.