← ወደ ባህሪያት ይመለሱ
Pro

Tailwind ረዳት

Tailwind ረዳት በማንኛውም ድረ-ገጽ ላይ ማንኛውንም ኤለመንት ይፈትሻል እና ተዛማጅ Tailwind CSS ክፍሎች ጠቅላላ፣ የተደረደረ ክፍፍል ያመነጫል። ቀላል ክፍል ጽሁፍ ይልቅ ውጤቶችን በምድብ ያደራጃል — Layout፣ ስፔሲንግ፣ ታይፖግራፊ፣ ቀለሞች፣ ድንበሮች እና ውጤቶች — ማንኛውንም ክፍል ምን እንደሚቆጣጠር በትክክል ለመረዳት።

እንደ Tailwind ቅዳ ፈጣን ክፍል ጽሁፍ ለመለጠፍ ሲሰጥ Tailwind ረዳት ጥልቅ ጓደኛ ነው። ለ Tailwind ቃላት ውስጥ ኤለመንት ሙሉ ስታይል ውህድ ለመረዳት የሚፈልጉ ገንቢዎች ተገንብቷል። ማንኛውም ክፍል ያለው ስያሜ ጠቅ ያድርጉ ያንን ብቻ ለመቅዳት ወይም "ሁሉንም ቅዳ" ሙሉ ጽሁፍ ለማግኘት ይጠቀሙ።

የቀጥታ ቅድመ እይታ
example.com/dashboard
Click any element to inspect
Project Dashboard
Selected element
Progress: 65%
Tailwind Classes
Layout
flex flex-col items-start
Spacing
p-5 gap-3
Typography
text-sm font-semibold text-white
Background & Border
bg-slate-900 rounded-lg border border-slate-700
Copy All Classes
ቁልፍ ባህሪያት

የተደረደረ ክፍል ክፍፍል

Tailwind ክፍሎች ግልፅ ምድቦች ውስጥ ይደራጃሉ — Layout (flex፣ grid፣ position)፣ ስፔሲንግ (padding፣ margin፣ gap)፣ ታይፖግራፊ (font size፣ weight፣ color)፣ ቀለሞች (background፣ text፣ border)፣ ድንበሮች (radius፣ width) እና ውጤቶች (shadow፣ opacity)።

ለመፈተሽ ማንኛውንም ኤለመንት ጠቅ ያድርጉ

ማንኛውንም ኤለመንት ጠቅ ያድርጉ — ቁልፎች፣ ካርዶች፣ ርዕሶች፣ ግቤቶች — ፓነሉ ሙሉ Tailwind ክፍል ክፍፍል ወዲያውኑ ይሞላል። ኤለመንቱ ሐምራዊ ድንበር ይደመቃል።

የግለሰብ ክፍሎችን ይቅዱ

ማንኛውም Tailwind ክፍል ሊጠቅ የሚችል ስያሜ ሆኖ ይታያል። ያንን ብቻ ለመቅዳት ማንኛውንም ስያሜ (እንደ p-5 ወይም font-bold) ጠቅ ያድርጉ።

ሁሉንም ክፍሎች በአንድ ጊዜ ይቅዱ

ከታች ያለው "ሁሉንም ክፍሎች ቅዳ" ቁልፍ ንጹህ ክፍተት-ተለያይ Tailwind ክፍሎች ጽሁፍ ያመነጫል ወደ ቅንጥቦር ይቀዳል።

ትክክለኛ ስኬል ካርታ

ማንኛውም ዋጋ ወደ Tailwind ነባሪ ስፔሲንግ እና መጠን ስኬል ይካርታል። 16px ፎንት ወደ text-base፣ 24px padding ወደ p-6 እና #7c3aed ወደ purple-600 ይካርታል።

CSS ምንጭ ለማየት Hover ያድርጉ

በፓነል ውስጥ ማንኛውም Tailwind ክፍል ስያሜ ላይ hover ያድርጉ ከየትኛው ዋና CSS ዋጋ እንደተመነጨ ለማየት። ምሳ. "p-5" ላይ hover ማድረግ "padding: 20px" ያሳያል።

ምን መመርመር ይችላሉ

Tailwind ረዳት covers the following, organized by category:

Layout ክፍሎች

  • flex
  • grid
  • block
  • inline-flex
  • relative
  • absolute
  • sticky
  • items-center
  • justify-between
  • gap-*

ስፔሲንግ ክፍሎች

  • p-* (padding)
  • m-* (margin)
  • px-* py-*
  • mx-auto
  • space-x-*
  • w-* h-*
  • max-w-*
  • min-h-*

ታይፖግራፊ ክፍሎች

  • text-sm / text-base / text-lg
  • font-normal / font-bold
  • leading-* (line-height)
  • tracking-* (letter-spacing)
  • text-center
  • uppercase

ቀለም ክፍሎች

  • text-{color}-{shade}
  • bg-{color}-{shade}
  • border-{color}-{shade}
  • opacity-*

ድንበር ክፍሎች

  • border
  • border-2
  • rounded-* (radius)
  • border-solid / dashed
  • divide-*

ውጤት ክፍሎች

  • shadow-sm / shadow-md / shadow-lg
  • ring-*
  • transition
  • duration-*
  • hover:*
የተለመዱ የአጠቃቀም ሁኔታዎች

ኤለመንት ሙሉ ስታይል መረዳት

ቀላል ክፍል ጽሁፍ ይልቅ የተደረደረ እይታ ኤለመንት ሙሉ ውህድ ለመረዳት ያስችላል — flex layout፣ ተኮር padding፣ ደፍ ታይፖግራፊ፣ slate ዳራ፣ ክብ ድንበሮች እና ስውር ጥላ ማንኛውም ገጽ በራሱ ክፍል።

ከማጣቀሻዎች አዳዲስ ክፍሎችን መገንባት

በማንኛውም ድረ-ገጽ ላይ በሚያምር ሁኔታ የተነደፈ ኤለመንት ይፈትሹ ከዚያ ተዛማጅ ምድብ ክፍሎችን በመቅዳት በ Tailwind ፕሮጀክትዎ ውስጥ ዳግም ይፍጠሩ።

Tailwind ስያሜ ስርዓት መማር

CSS ምንጭ ዋጋዎችን ለማየት ክፍል ስያሜዎች ላይ hover ያድርጉ — p-4 16px ማለት፣ text-lg 18px ማለት ለመማር ፈጣኑ መንገድ።

በራስዎ ጣቢያ Tailwind አጠቃቀም ኦዲት

ከንድፍ ሥርዓት ወጥ ስፔሲንግ፣ ቀለሞች እና ታይፖግራፊ ጥቅም ላይ መዋላቸውን ለማረጋገጥ Tailwind ጣቢያዎ ኤለመንቶች ይፈትሹ።

Tailwind ቅዳ vs Tailwind ረዳት ማወዳደር

ፈጣን ክፍል ጽሁፍ ሲፈልጉ Tailwind ቅዳ ይጠቀሙ። ክፍፍሉን ለማጥናት ወይም ክፍሎችን በምርጫ ለመቅዳት Tailwind ረዳት ይጠቀሙ።

እንዴት እንደሚጠቀሙ
1

Tailwind ረዳት ያንቁ

የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና Tailwind ረዳት አዶን ጠቅ ያድርጉ።

2

ለመፈተሽ ኤለመንት ጠቅ ያድርጉ

በገጹ ላይ ማንኛውንም ኤለመንት ጠቅ ያድርጉ። ሐምራዊ ድንበር ይደመቃል ፓነሉ በተደረደሩ Tailwind ክፍሎች ይሞላል።

3

ምድቦችን ያፈላልጉ

ኤለመንቱ ሙሉ ስታይል ውህድ ለመረዳት ምድቦቹን ያሰሱ። ማንኛውም ክፍል ሊጠቅ የሚችል ስያሜ ነው።

4

የሚፈልጉትን ይቅዱ

ተኮር ክፍሎችን ለመቅዳት የግለሰብ ስያሜዎች ጠቅ ያድርጉ ወይም ሁሉንም እንደ አንድ ጽሁፍ ለማግኘት "ሁሉንም ቅዳ" ይጠቀሙ።

5

ሌላ ኤለመንት ጠቅ ያድርጉ

ፓነሉን በአዲስ ክፍሎች ለማዘመን ሌላ ኤለመንት ጠቅ ያድርጉ። ማጥፋት አያስፈልግም — ብዙ ኤለመንቶችን ለመፈተሽ ጠቅ ይቀጥሉ።

ለመሞከር ዝግጁ ነዎት? Tailwind ረዳት?

DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።

ወደ Chrome ያክሉ ወደ Edge ያክሉ ወደ FireFox ያክሉ