Msaidizi wa Tailwind

Vipengele Muhimu

Mgawanyo wa Madarasa Yaliyoainishwa

Madarasa ya Tailwind yamepangwa katika kategoria wazi: Mpangilio (flex, grid, nafasi), Nafasi (padding, margin, gap), Uandishi (font size, weight, rangi), Rangi (background, maandishi, mpaka), Mipaka (radius, upana, mtindo), na Athari (shadow, opacity, transform). Kila kategoria inaweza kukunjwa na imeandikwa wazi.

Bofya Kipengele Chochote ili Kukagua

Bofya kipengele chochote — vifungo, kadi, vichwa, pembejeo, kontena — na jopo linajaa mara moja mgawanyo kamili wa madarasa ya Tailwind. Kipengele kinaangaziwa na mpaka wa zambarau ili ujue haswa ni nini kinachokaguliwa.

Nakili Madarasa Mmoja Mmoja

Kila darasa la Tailwind linaonyeshwa kama tag inayoweza kubofya. Bofya tag yoyote (kama p-5 au font-bold) ili kunakili darasa hilo tu kwenye ubao wako wa kunakili. Uhuishaji mdogo wa "copied" unathibitisha hatua hiyo. Ni kamili kwa wakati unahitaji darasa moja au mawili maalum.

Nakili Madarasa Yote kwa Wakati Mmoja

Kitufe cha "Nakili Madarasa Yote" chini kinazalisha mfuatano safi wa madarasa yote ya Tailwind na kuunakili kwenye ubao wako wa kunakili. Tayari kubandikwa kwenye className="..." au class="..." moja kwa moja.

Upangaji Sahihi wa Kiwango

Kila thamani inapangwa kwa kiwango cha nafasi na ukubwa cha Tailwind. Fonti ya 16px inapangwa kwa text-base, padding ya 24px inapangwa kwa p-6, na #7c3aed inapangwa kwa purple-600. Wakati mechi kamili haipo, thamani ya kiwango cha karibu zaidi huchaguliwa na kuonyeshwa.

Elea ili Kuona Chanzo cha CSS

Elea juu ya tag yoyote ya darasa la Tailwind kwenye jopo ili kuona thamani ya CSS iliyokokotolewa ya asili iliyozalishwa kutoka kwayo. Kwa mfano, kuelekea juu ya "p-5" kunaonyesha "padding: 20px". Mtazamo huu wa pande mbili unakusaidia kujifunza kiwango cha Tailwind kwa kuunganisha madarasa na thamani halisi za CSS.

Unachoweza Kukagua

Msaidizi wa Tailwind covers the following, organized by category:

Madarasa ya Mpangilio

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

Madarasa ya Nafasi

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

Madarasa ya Uandishi

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

Madarasa ya Rangi

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

Border Classes

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

Madarasa ya Athari

shadow-sm / shadow-md / shadow-lg
ring-*
transition
duration-*
hover:*

Matumizi ya Kawaida

Kuelewa Mtindo Kamili wa Kipengele

Tofauti na mfuatano mmoja wa darasa, mtazamo ulioainishwa unakusaidia kuelewa muundo kamili wa kipengele. Angalia kuwa kadi inatumia flex layout, padding maalum, uandishi wa ujasiri, background ya slate, mipaka iliyozungushwa, na kivuli kidogo — kila kipengele katika sehemu yake mwenyewe.

Kujenga Sehemu Mpya kutoka kwa Marejeleo

Kagua kipengele kilichoundwa vizuri kwenye tovuti yoyote, kisha ukizalishe upya katika mradi wako wa Tailwind kwa kunakili madarasa ya kategoria husika. Chukua mpangilio kutoka kipengele kimoja, uandishi kutoka kingine, na rangi kutoka kwa palette ya brand yako — changanya na uoanishe.

Kujifunza Mfumo wa Majina wa Tailwind

Elea juu ya tag za darasa ili kuona thamani za chanzo cha CSS. Upangaji huu wa maingiliano ndiyo njia ya haraka zaidi ya kujifunza kuwa p-4 inamaanisha 16px, text-lg inamaanisha 18px, au kwamba purple-600 ni #7c3aed. Geuza tovuti yoyote kuwa zoezi la kujifunza Tailwind.

Kukagua Matumizi ya Tailwind kwenye Tovuti Yako Mwenyewe

Kagua vipengele kwenye tovuti yako iliyojengwa kwa Tailwind ili kuthibitisha kuwa vinatumia nafasi, rangi, na uandishi thabiti kutoka kwa mfumo wa usanifu. Tambua thamani za bahati mbaya (kama p-[13px]) ambazo zinapaswa kuwa thamani za kiwango cha kawaida (p-3 au p-3.5).

Kulinganisha Nakili kama Tailwind vs Msaidizi wa Tailwind

Tumia Nakili kama Tailwind wakati unahitaji mfuatano wa haraka wa darasa wa kubandika. Tumia Msaidizi wa Tailwind unapotaka kusoma mgawanyo, kunakili madarasa mmoja mmoja kwa kuchagua, au kuelewa kwa nini madarasa maalum ya Tailwind yalichaguliwa kwa kila sifa ya CSS.

Jinsi ya Kutumia

Washa Msaidizi wa Tailwind

Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Tailwind Helper. Chombo kinawashwa na jopo linaonekana upande wa kulia, tayari kuonyesha migawanyo ya darasa.

Bofya Kipengele ili Kukagua

Bofya kipengele chochote kwenye ukurasa. Kinaangaziwa na mpaka wa zambarau, na jopo linajaa madarasa ya Tailwind yaliyoainishwa. Kila kategoria (Mpangilio, Nafasi, Uandishi, Rangi, Mipaka, Athari) inaonyeshwa kama sehemu yenye tag za darasa.

Chunguza Kategoria

Vinjari kategoria ili kuelewa muundo kamili wa mtindo wa kipengele. Kila darasa ni tag inayoweza kubofya — elea ili kuona thamani ya CSS ya chanzo, bofya ili kunakili darasa hilo mmoja mmoja.

Nakili Unachohitaji

Bofya tag mmoja mmoja ili kunakili madarasa maalum, au tumia kitufe cha "Nakili Madarasa Yote" chini ili kuchukua kila kitu kama mfuatano mmoja. Bandika moja kwa moja kwenye sehemu yako ya Tailwind.

Bofya Kipengele Kingine

Bofya kipengele tofauti kwenye ukurasa ili kusasisha papo hapo jopo na madarasa mapya. Hakuna haja ya kuzima na kuwasha tena — bofya tu ili kukagua vipengele vingi mfululizo.