Nakili kama Tailwind

Vipengele Muhimu

Uongofu wa Papo hapo wa CSS-kuelekea-Tailwind

Bofya kipengele chochote na CSS yake kamili iliyokokotolewa inachambuliwa kwa wakati halisi. Kila sifa inayotumika inapangwa kwa darasa sawa la Tailwind — kutoka bg-purple-600 hadi rounded-lg hadi font-semibold. Uongofu hutokea papo hapo bila kuchelewa kwa kupakia au kuchakata.

Upangaji wa Madarasa kwa Akili

Chombo hicho hakifanyi tu uingizaji wa masharti — kinaelewa mfumo wa muundo wa Tailwind. Padding ya 12px inapangwa kwa p-3 (si thamani maalum), rangi zinaoanishwa na kivuli cha karibu zaidi katika palette ya Tailwind (mfano, #7c3aed inakuwa purple-600), na ukubwa wa fonti hupangwa kwa text-sm, text-base, text-lg, n.k.

Mbofyo Mmoja wa Kunakili kwenye Ubao wa Kunakili

Mfuatano wa darasa uliozalishwa unaonyeshwa kwenye paneli safi ya pato. Bofya kitufe cha Nakili mara moja na mfuatano mzima uko kwenye ubao wako wa kunakili — tayari kubandikwa kwenye className="..." katika React, class="..." katika HTML, au :class="..." katika Vue.

Ujumuishaji wa Menyu ya Muktadha

Kwa mtiririko wa kazi haraka zaidi, bonyeza-kulia kipengele chochote kwenye ukurasa ili kufikia "Nakili kama Tailwind" moja kwa moja kutoka kwa menyu ya muktadha wa kivinjari. Hakuna haja ya kufungua kizimbani cha DevSuite — bonyeza tu kulia, bofya, na madarasa yako kwenye ubao wako wa kunakili.

Hushughulikia Sifa Tata

Inakwenda zaidi ya upangaji rahisi. Hushughulikia vivuli vya sanduku (shadow-md, shadow-lg), gradients, mitindo ya mipaka, madarasa ya mpangilio wa flex/grid, thamani za opacity, na hata sifa zinazozingatia uwajibikaji kama max-width na uwiano wa aspect ratios.

Pato Safi, la Kiwango cha Chini

Inajumuisha tu madarasa ambayo yanatofautiana na chaguo-msingi za kivinjari — hakuna zana zisizo na lazima. Pato ni fupi na liko tayari kwa uzalishaji, halijajazwa na madarasa ya sifa zilizorithiwa au thamani za chaguo-msingi.

Unachoweza Kukagua

Nakili kama Tailwind covers the following, organized by category:

Mpangilio (Layout)

display (flex, grid, block)
position (relative, absolute)
flex-direction
justify-content
align-items
gap
overflow

Nafasi (Spacing)

padding (p-*)
margin (m-*)
width (w-*)
height (h-*)
max-width
min-height

Uandishi (Typography)

font-size (text-*)
font-weight (font-*)
line-height (leading-*)
letter-spacing (tracking-*)
text-align
text-transform

Rangi

color (text-*)
background-color (bg-*)
border-color (border-*)
opacity

Mipaka

border-width (border-*)
border-radius (rounded-*)
border-style

Athari

box-shadow (shadow-*)
transform (scale-*, rotate-*)
transition
cursor

Matumizi ya Kawaida

Kuhamia kwa Tovuti Iliyopo kwenda Tailwind

Unajenga upya tovuti kutoka vanilla CSS au Bootstrap kwenda Tailwind? Bofya kila sehemu kuu kwenye tovuti iliyopo, nakili madarasa ya Tailwind, na uyatumie kama mahali pa kuanzia kwa sehemu zako mpya za Tailwind. Huokoa saa nyingi za uandishi wa sifa kwa darasa kwa mkono.

Uchambuzi wa Miundo ya Usanifu

Umepata kadi iliyoundwa kwa uzuri, sehemu ya hero, au urambazaji kwenye tovuti nyingine? Ibonyeze, pata madarasa ya Tailwind, na uyatumie kama rejeleo la kujenga toleo lako mwenewe. Hakuna haja ya kukagua mwenyewe sifa nyingi za CSS.

Kuongeza Kasi ya Maendeleo ya Sehemu

Wakati wa kujenga sehemu mpya za Tailwind kutoka kwa mockup ya Figma au PSD, tekeleza muundo kwenye kivinjari kwanza ukitumia DevTools, kisha ubofye kipengele na Nakili kama Tailwind ili kupata madarasa halisi ya matumizi badala ya kuyaandika kwa mkono.

Uongofu wa Alama za Usanifu thabiti

Hakikisha thamani zako za CSS zilizoandikwa kwa mkono zinapangwa kwa thamani halali za kiwango cha Tailwind. Ikiwa uliandika padding: 14px, chombo kinakuonyesha ikiwa hiyo inazungushwa hadi p-3 (12px) au p-3.5 (14px) — kugundua kutokubaliana kabla ya kusafirishwa.

Kufundisha & Kujifunza Tailwind

Mgeni kwenye Tailwind? Bofya vipengele kwenye ukurasa wowote wa wavuti ili kuona jinsi sifa za jadi za CSS zinavyotafsiriwa kuwa madarasa ya matumizi. Ni njia ya maingiliano ya kujifunza mfumo wa majina ya darasa la Tailwind kwa kuona mifano halisi.

Jinsi ya Kutumia

Washa Nakili kama Tailwind

Fungua kizimbani kinachoelea cha DevSuite Pro na ubofye ikoni ya Nakili kama Tailwind. Chombo kinawashwa na kielekezi chako kinabadilika kuwa kiteuzi cha crosshair, ikionyesha kuwa sasa unaweza kubofya vipengele.

Bofya Kipengele Lengwa

Bofya kipengele chochote kwenye ukurasa — kitufe, kadi, kichwa, au bar ya urambazaji. Kipengele kinaangaziwa na CSS yake iliyokokotolewa inachambuliwa. Paneli inayoelea inaonekana ikionyesha mfuatano wa darasa la Tailwind uliozalishwa.

Kagua Madarasa Yaliyozalishwa

Paneli inaonyesha mfuatano kamili wa darasa la Tailwind uliovunjwa katika vikundi vya kimantiki. Unaweza kuona haswa ni sifa gani ya CSS iliyopangwa kwa darasa gani la Tailwind. Elea juu ya darasa lolote ili kuona thamani ya CSS ya msingi inayowakilisha.

Nakili & Bandika kwenye Msimbo Wako

Bofya kitufe cha "Nakili" ili kuchukua mfuatano kamili wa darasa. Ibandike moja kwa moja kwenye className ya sehemu yako, sifa ya darasa, au template. Madarasa hufanya kazi mara moja na usanidi wa kawaida wa Tailwind.