"እንደ Tailwind ቅዳ" በእይታ ዲዛይን እና በTailwind CSS ኮድ መካከል ያለውን ልዩነት ያስወግዳል። በማንኛውም ድረ-ገጽ ላይ ያለን ኤለመንት ይጫኑ እና ወዲያውኑ ከእሱ የCSS ስታይሎች የተሰሩ አቻ የTailwind utility ክፍሎችን ያግኙ—ወደ የእርስዎ JSX፣ Vue template፣ ወይም HTML ፋይል ለመለጠፍ ዝግጁ።
በTailwind CSS መገንባት ማለት ብጁ CSS ከመጻፍ ይልቅ በutility ክፍሎች ማሰብ ማለት ነው። ነገር ግን ያለን ዲዛይን—የተፎካካሪ ገጽ ይሁን፣ በvanilla CSS የተሰራ ዲዛይን ሲስተም፣ ወይም አሁን ያለ የደንበኛ ድረ-ገጽ—የእይታ ስታይሎችን ወደ Tailwind ክፍሎች በእጅ መተርጎም አድካሚ እና ለስህተት የተጋለጠ ነው። "እንደ Tailwind ቅዳ" ይህንን ሙሉ በሙሉ በራስ-ሰር ያደርገዋል። ለማንኛውም ኤለመንት የአሳሹን ስታይሎች ያነባል እና እያንዳንዱን ባህሪ ከመደበኛው ልኬት ጋር በማዛመድ ወደ ቅርብ የTailwind utility ክፍል ይቀይራል። ቀለሞች ከቅርብ የTailwind ቀለም ጋር ይዛመዳሉ፣ የክፍተት እሴቶች ወደ ቅርብ የrem-ተኮር utility ይጠጋሉ፣ እና የፊደል አጻጻፍ ወደ text-* እና font-* ክፍሎች ይቀየራል። ውጤቱ በቀጥታ ወደ ኮምፖነንትዎ መለጠፍ የሚችሉት ንጹህ የአንድ መስመር የክፍል ዝርዝር ነው።
bg-purple-600 text-white
px-7 py-3 rounded-lg
font-semibold text-base
border-2 border-purple-400
ማንኛውንም ኤለመንት ይጫኑ እና የተሟላ የCSS ባህሪያቱ በእውነተኛ ጊዜ ይመረመራሉ። እያንዳንዱ ተዛማጅ ባህሪ ከbg-purple-600 እስከ rounded-lg እና font-semibold ባሉ አቻ የTailwind utility ክፍሎች ይወከላል። መቀየሩ ምንም ሳይዘገይ ወዲያውኑ ይከሰታል።
መሣሪያው ቃላትን ብቻ አይቀይርም—የTailwind ዲዛይን ሲስተምን ይረዳል። የ 12px ፓዲንግ ወደ p-3 (ብጁ እሴት አይደለም) ይቀየራል፣ ቀለሞች በTailwind ዝርዝር ውስጥ ካለው የቅርብ ጥላ ጋር ይዛመዳሉ (ለምሳሌ #7c3aed ወደ purple-600 ይሆናል)፣ እና የፊደል መጠኖች ወደ text-sm, text-base, text-lg, ወዘተ ይቀየራሉ::
የተፈጠረው የክፍል ዝርዝር በንጹህ የውጤት ፓነል ውስጥ ይታያል። የCopy ቁልፍን አንዴ ይጫኑ እና አጠቃላይ ዝርዝሩ በክሊፕቦርድዎ ላይ ይሆናል—በReact ውስጥ className="..."፣ በHTML ውስጥ class="..."፣ ወይም በVue ውስጥ :class="..." ውስጥ ለመለጠፍ ዝግጁ።
ፈጣን የስራ ሂደት እንዲኖርዎት፣ ማንኛውም ኤለመንት ላይ በቀኝ ጠቅ በማድረግ "እንደ Tailwind ቅዳ" የሚለውን በቀጥታ ከአሳሹ ሜኑ መጠቀም ይችላሉ። የDevSuite ዶክን መክፈት አያስፈልግም—ዝም ብለው ቀኝ ጠቅ ያድርጉ፣ ይጫኑ እና ክፍሎቹ በክሊፕቦርድዎ ላይ ይሆናሉ።
ከቀላል ውክልናዎች ያለፈ ስራ ይሰራል:: የጥላ (shadow-md, shadow-lg)፣ የግራዲየንት፣ የቦርደር ስታይሎች፣ የflex/grid አቀማመጥ ክፍሎች፣ ግልጽነት (opacity) እሴቶች፣ እና እንደ max-width እና aspect ratios ያሉ ተስማሚ ባህሪያትንም ይይዛል።
ከአሳሹ መደበኛ እሴቶች የሚለዩ ክፍሎችን ብቻ ያካትታል—ተደጋጋሚ የሆኑ utility ክፍሎች የሉም። ውጤቱ አጭር እና ለስራ ዝግጁ ነው፣ ከውርስ ወይም ከመደበኛ እሴቶች በሚመጡ ክፍሎች አይጨናነቅም።
እንደ Tailwind ቅዳ covers the following, organized by category:
display (flex, grid, block)position (relative, absolute)flex-directionjustify-contentalign-itemsgapoverflowpadding (p-*)margin (m-*)width (w-*)height (h-*)max-widthmin-heightfont-size (text-*)font-weight (font-*)line-height (leading-*)letter-spacing (tracking-*)text-aligntext-transformcolor (text-*)background-color (bg-*)border-color (border-*)opacityborder-width (border-*)border-radius (rounded-*)border-stylebox-shadow (shadow-*)transform (scale-*, rotate-*)transitioncursorአንድን ድረ-ገጽ ከvanilla CSS ወይም Bootstrap ወደ Tailwind እየቀየሩ ነው? አሁን ባለው ገጽ ላይ እያንዳንዱን ዋና ኮምፖነንት ይጫኑ፣ የTailwind ክፍሎችን ይቅዱ እና ለአዲሶቹ የTailwind ኮምፖነንቶችዎ እንደ መነሻ ይጠቀሙባቸው። በሰዓታት የሚቆጠር በእጅ የመቀየር ስራን ያቃልላል።
በሌላ ድረ-ገጽ ላይ በሚያምር ሁኔታ የተሰራ ካርድ፣ የሄሮ ክፍል ወይም ናቪጌሽን አገኙ? እሱን ይጫኑ፣ የTailwind ክፍሎችን ያግኙ እና የራስዎን ስሪት ለመገንባት እንደ ማጣቀሻ ይጠቀሙባቸው። በደርዘን የሚቆጠሩ የCSS ባህሪያትን በእጅ መመርመር አያስፈልግም።
ከFigma ወይም PSD ዲዛይን አዳዲስ የTailwind ኮምፖነንቶችን ሲገነቡ፣ መጀመሪያ በአሳሹ ውስጥ DevTools ን በመጠቀም ዲዛይኑን ይተግብሩ፣ ከዚያ በትክክል የተሰሩ የutility ክፍሎችን በእጅ ከመጻፍ ይልቅ "እንደ Tailwind ቅዳ"ን በመጫን ያግኙ።
በእጅ የጻፉዋቸው የCSS እሴቶች በትክክል ከTailwind እሴቶች ጋር መዛመዳቸውን ያረጋግጡ። padding: 14px ብለው ከጻፉ፣ መሣሪያው ወደ p-3 (12px) ወይስ ወደ p-3.5 (14px) እንደሚጠጋ ያሳየዎታል—ይህም ስራው ከመውጣቱ በፊት አለመጣጣሞችን ለመለየት ይረዳል።
ለTailwind አዲስ ነዎት? ባህላዊ የCSS ባህሪያት ወደ utility ክፍሎች እንዴት እንደሚቀየሩ ለማየት በማንኛውም ድረ-ገጽ ላይ ኤለመንቶችን ይጫኑ። እውነተኛ ምሳሌዎችን በማየት የTailwind ክፍሎችን አሰያየም ሥርዓት ለመማር በይነተገናኝ መንገድ ነው።
የDevSuite Pro ተንሳፋፊ ዶክን ይክፈቱ እና "እንደ Tailwind ቅዳ" አዶን ይጫኑ። መሣሪያው ይሠራል እና ከርሰርዎ ወደ ኤለመንት መራጭነት ይቀየራል፣ ይህም ኤለመንቶችን መጫን እንደሚችሉ ያሳያል።
በገጹ ላይ ማንኛውንም ኤለመንት ይጫኑ—ቁልፍ፣ ካርድ፣ አርዕስት፣ ወይም የናቪጌሽን ባር። ኤለመንቱ ጎልቶ ይታያል እና የCSS ባህሪያቱ ይመረመራሉ። የተፈጠረውን የTailwind ክፍል ዝርዝር የሚያሳይ ተንሳፋፊ ፓነል ይታያል።
ፓነሉ አጠቃላይ የTailwind ክፍል ዝርዝርን በምክንያታዊ ቡድኖች ከፍሎ ያሳያል። የትኛው የCSS ባህሪ ወደ የትኛው Tailwind ክፍል እንደተቀየረ በትክክል ማየት ይችላሉ። እያንዳንዱ ክፍል የሚወክለውን የCSS እሴት ለማየት በእሱ ላይ ያንዣብቡ።
ሙሉውን የክፍል ዝርዝር ለመውሰድ "Copy" የሚለውን ቁልፍ ይጫኑ። በቀጥታ ወደ ኮምፖነንትዎ className፣ class attribute፣ ወይም template ይለጥፉ። ክፍሎቹ በመደበኛ የTailwind ዝግጅት ላይ ወዲያውኑ ይሰራሉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።