Tailwind CSS - Pangani mawebusayiti amakono mwachangu osasiya HTML yanu

Pangani Zopanga Zovuta Mosavuta

Ndi Tailwind CSS, kupanga mapangidwe ovuta kumakhala kamphepo. Kuphatikizika kwa makalasi ogwiritsira ntchito ndi zida zoyankhira zomwe zimakupatsani mwayi wopangira masanjidwe ovuta mosavuta, osasokoneza magwiridwe antchito ndi kusamalidwa kwa tsamba lanu.

Mangani chilichonse

Kukongola kwa Tailwind CSS kwagona pakusinthasintha kwake. Mutha kupanga chilichonse kuchokera patsamba losavuta labulogu kupita pa nsanja yapamwamba ya e-commerce, mukugwiritsa ntchito makalasi omwewo mwanzeru.

Mumangokhala ndi malire ndi malingaliro anu. Kusiyana kwakukulu pogwiritsa ntchito Vanilla CSS ndi liwiro lomwe mungapangire mapangidwe achikhalidwe.

Njira yachikhalidwe yogwiritsira ntchito makalasi a css okhala ndi zigawo za html monga div, div class, p class nthawi zonse ndi njira yabwino koma kuwongolera liwiro komwe kumabwera ndi Tailwind CSS kumapangitsa moyo wanu kukhala wosavuta.

Zochita zabwino sizigwira ntchito

Mwachikhalidwe, CSS imalembedwa pokhazikitsa masitayelo apadziko lonse lapansi ndikuwongolera pagawo ndi gawo. Ngakhale iyi ndi njira yodziwika bwino, imatha kubweretsa ma code ambiri, ovuta kusunga.

Tailwind CSS imatsutsa lingaliro ili, ponena kuti zofunikira-zoyamba CSS zimapereka yankho loyera, losasunthika.

Laibulale yodziwika kwambiri ya Tailwind CSS

daisyUI ndiye laibulale yodziwika kwambiri ya Tailwind CSS, yomwe imadzitamandira zopitilira 50 zomwe zidapangidwira kale, makalasi 500+ othandizira, komanso kuthekera kosatha. Zimakupulumutsani kuti musayambitsenso gudumu nthawi iliyonse mukapanga pulojekiti yatsopano.

Osayambitsanso Wheel Nthawi Zonse

M'malo mowononga nthawi yanu ndi njira yotopetsa yolemba mayina amagulu ambiri pa polojekiti iliyonse yatsopano, Tailwind CSS imakuthandizani kuti mugwiritse ntchito makalasi omveka bwino komanso omveka bwino.

Maphunzirowa amatha kugwiritsidwanso ntchito ndipo amagwira ntchito mogwirizana ndi CSS cascade, kukupatsirani maziko olimba a mapulojekiti anu onse.

Tailwind CSS - A Utility First CSS Framework

Pachimake chake, Tailwind CSS ndi chida choyamba cha CSS. Izi zikutanthauza kuti imapereka makalasi otsika, ophatikizika omwe mungagwiritse ntchito kupanga mapangidwe aliwonse, mwachindunji mu HTML yanu. Palibenso mafayilo a CSS osatha, manambala osavuta komanso ozindikira.

Gwiritsani Ntchito Maina Amagulu A Semantic

Mayina a kalasi ya Semantic amathandizira kuwerengeka kwa code yanu, kupangitsa kuti zikhale zosavuta kumvetsetsa zomwe kalasi inayake imachita pongoyang'ana dzina lake. Ichi ndi chimodzi mwazinthu zambiri zomwe Tailwind CSS yatengera kuti ipititse patsogolo luso laopanga.

CSS yoyera. Framework Agnostic. Imagwira Kulikonse

Tailwind CSS sichimakumangani ku chimango china chilichonse. Ndi CSS yoyera, kotero mutha kuyigwiritsa ntchito ndi chimango chilichonse, kapena popanda chimango konse. Zimagwira ntchito kulikonse komwe CSS imagwira ntchito.

Ubwino wa Tailwind CSS

Ubwino wogwiritsa ntchito Tailwind CSS ukuphatikiza kuchulukirachulukira, kuchepetsedwa kwamafayilo a CSS, komanso luso lotsogola lotsogola chifukwa chakugwiritsa ntchito koyamba. Kuphatikiza apo, mawonekedwe a Just-In-Time (JIT) amapereka nthawi yomanga mwachangu, ndikufulumizitsa chitukuko chanu.

Mitengo ya Tailwind CSS

Tailwind CSS ndi pulojekiti yotseguka, kutanthauza kuti ndi yaulere kugwiritsa ntchito. Mtengo umabwera mukafuna kupeza zinthu zamtengo wapatali monga zigawo za UI ndi ma templates, omwe amaperekedwa kudzera mu Tailwind UI.

Ndi maganizo ndi kusintha pa nthawi yomweyo

Tailwind CSS imapereka malingaliro amphamvu amomwe mungapangire CSS yanu, komabe ndi yosinthika mokwanira kulola makonda. Izi zimakuthandizani kuti muyang'ane pazomwe zili zofunika kwambiri - kupanga ma UI okongola.

Zochitika zamakono

Tailwind CSS imakumbatira zinthu zamakono monga Flexbox, Grid, ndi makonda, zomwe zimapangitsa kukhala chisankho chabwino kwambiri chopangira mapulogalamu amakono a intaneti.

Zofunikira pakugwiritsa ntchito Tailwind CSS

Musanayambe kugwiritsa ntchito Tailwind CSS, muyenera kumvetsetsa HTML ndi CSS.

Nthawi Yomwe Mungagwiritsire Ntchito Tailwind CSS

Tailwind CSS ndi yoyenera pamitundu yonse yama projekiti apa intaneti, akulu kapena ang'onoang'ono. Ngati mwatopa ndi kulimbana ndi CSS ndikuyang'ana njira yothandiza kwambiri, yothandiza kutukula, ndiye kuti Tailwind CSS ndi yanu.

Osati mu chigawo frameworks?

Ngati simuli wokonda zigawo zamagulu ngati React kapena Vue, palibe nkhawa. Tailwind CSS ndi framework-agnostic ndipo itha kugwiritsidwa ntchito ndi HTML yoyera ndi JavaScript.

Kufanana ndi Kusiyana Pakati pa Tailwind CSS ndi Zina za CSS Frameworks

Pomwe machitidwe ena monga Bootstrap ndi Foundation amapereka zida zopangidwira kale, Tailwind CSS imakupatsani zida zomangira makonda osasiya HTML yanu. Komabe, ndi kuphatikiza kwa malaibulale amtundu ngati daisyUI, mutha kusangalala ndi zabwino kwambiri padziko lonse lapansi.

Mdima Wamdima

Chimodzi mwazinthu zaposachedwa kwambiri za Tailwind CSS ndi daisyUI ndi mawonekedwe amdima, omwe amakupatsani mwayi wopanga mawebusayiti amdima mosavutikira.

Flexbox Chitsanzo

Tailwind CSS imalumikizana bwino ndi mawonekedwe amakono a CSS ngati Flexbox. Mwachitsanzo, mutha kupanga masanjidwe omvera pogwiritsa ntchito makalasi monga flex, justify- center, items-center, ndi zina zotero.

Ndi kuphatikiza kwa Just-in-Time, mutha kuyesa mitundu yosiyanasiyana yamagulu othandizira mosavuta. Ngati gulu limodzi lothandizira silinagwire ntchito, ingolisinthani kuti musinthe mawonekedwe anu.

Chitsanzo cha Flexbox Layout

Pogwiritsa ntchito Tailwind CSS, ndizosavuta kupanga masanjidwe ovuta ngati bar yomvera. Nachi chitsanzo:

<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20"><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"></path></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">Home</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">About</a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">Contact</a>
    </div>
  </div>
</nav>

Zomwe zakonzedwa kale

Ngati mwaganiza zogwiritsa ntchito tailwind css code mu polojekiti yanu, mudzatha kupeza zinthu zambiri zomwe zidakonzedweratu pa intaneti. Mutha kutengera chilichonse mwa izi ndikusinthira tsamba lanu.

Momwe mungasinthire CSS kukhala Tailwind CSS

Kutha kusintha CSS kukhala makalasi a Tailwind CSS ndichinthu chomwe opanga ambiri amafunikira. Pali mawebusayiti ambiri pa intaneti omwe adamangidwa Tailwind CSS isanakhalepo. Masambawa amagwiritsa ntchito css yokhala ndi masitayelo komanso akatswiri opanga masamba akufuna kusamutsa masambawa kupita ku Tailwind CSS.

DivMagic ndi chida chothandizira pa intaneti chomwe chimapangidwira opanga mawebusayiti ndi opanga mapulogalamu. Imalola masitayilo aliwonse kukopera kuchokera ku vanila css kupita ku Tailwind CSS. Kungodina kamodzi, mutha kusintha gawo lililonse pa intaneti kukhala Tailwind CSS ndikugwiritsa ntchito Tailwind mu projekiti yanu ndikusintha masitayilo mwanjira iliyonse yomwe mungafune.

Lowani mu Tailwind CSS Philosophy

Lingaliro lakumbuyo kwa Tailwind CSS ndikungoyang'ana zofunikira. Izi zikutanthauza kuti m'malo mofotokozeratu makalasi azinthu, Tailwind CSS imapereka makalasi otsika omwe amakuthandizani kupanga mapangidwe apadera osasiya HTML yanu.

Chifukwa Chiyani Muyenera Kuchoka ku CSS Yachikhalidwe?

CSS Yachikhalidwe ikhoza kuyambitsa kugwiritsa ntchito mopitilira muyeso, mafayilo otupa, ndi 'div soup'. Mwa kusamukira ku chimango choyamba cha CSS ngati Tailwind CSS, mutha kuchepetsa izi, zomwe zimapangitsa kuti pakhale codebase yoyera, yowongoka kwambiri.

Dziwani Mphamvu za Makalasi Othandizira

Maphunziro ofunikira amakuthandizani kupewa kubwereza masitayelo omwewo pamapepala anu. Ndi mfundo ya "Musadzibwereze nokha" (DRY). Maphunzirowa amakupulumutsirani nthawi yofunikira komanso khama ndipo amatsogolera ku codebase yokhazikika.

Kuwona Tailwind CSS Directives

Tailwind CSS imabweretsa malangizo angapo omwe angagwiritsidwe ntchito m'mapepala anu. Izi zikuphatikiza @apply, @variants, ndi @screen. Kumvetsetsa ndikugwiritsa ntchito malangizowa kumatha kukulitsa luso lanu la Tailwind CSS. Izi zitha kuyikidwa mu fayilo ya Tailwind Config CSS. Mutha kulemba makalasi a css pogwiritsa ntchito njirayi.

Wonjezerani Tailwind CSS ndi mapulagini

Tailwind CSS imatha kukulitsidwa ndi mapulagini, kuwonjezera magwiridwe antchito kapena kusintha yomwe ilipo. Phunzirani momwe mungagwiritsire ntchito mapulagini kuti muwonjezere kuchita bwino komanso kukongola kwamapulojekiti anu apa intaneti.

Phatikizani Tailwind CSS mu Ntchito Yanu

Kuphatikiza Tailwind CSS mumayendedwe anu achitukuko ndikosavuta, kaya mukugwiritsa ntchito zida zomangira ngati Webpack kapena Parcel, kapena mukugwira ntchito ndi zomangira monga Next.js kapena Gatsby.

Limbikitsani Kufikika ndi Tailwind CSS

Tailwind CSS imalimbikitsa mapangidwe opezeka mwa kuphatikiza mitundu ingapo ya ARIA m'makalasi ake. Pangani malo ofikirako ambiri ndikuwonjezera mwayi wogwiritsa ntchito aliyense.

Gwirizanitsani Mphamvu ya Flexbox ndi Gridi ndi Tailwind CSS

Gwiritsani ntchito ma module amakono a CSS monga Flexbox ndi Grid yokhala ndi Tailwind CSS. Phunzirani momwe makalasi othandizira angagwiritsire ntchito kuwongolera masanjidwe mosinthika komanso molabadira.

Momwe Mungasinthire Ntchito Zanu za Tailwind CSS

Tailwind CSS imapereka zida zingapo zochotsera zolakwika ndi njira zomwe zimapangitsa kuzindikira ndi kuthetsa zovuta zamakongoletsedwe mosavuta. Mvetsetsani zida izi ndikukulitsa luso lanu lowongolera.

Pangani Webusaiti Yokongola ndi Tailwind CSS

Tailwind CSS imabwera ndi gulu lalikulu lamitundu yosinthika makonda. Phunzirani momwe mungagwiritsire ntchito ndikusintha mitundu iyi kuti mupange mapangidwe owoneka bwino komanso owoneka bwino.

Pangani Mwachangu ndi Tailwind CSS 'JIT Mode

Yang'anani mozama mu Tailwind CSS's Just-In-Time mode. Mvetserani momwe zimagwirira ntchito komanso momwe zingakulitsire kwambiri chitukuko chanu ndi nthawi yomanga.

Kuchokera ku Zero kupita ku Hero: Master Tailwind CSS

Yambirani ulendo wodziwa bwino Tailwind CSS. Kuchokera pakukhazikitsa malo anu mpaka pakuwunika mitu yapamwamba, bukuli lakufotokozerani.

Sinthani Mwamakonda Anu Tailwind CSS Pazosowa Zanu

Chimodzi mwazamphamvu kwambiri za Tailwind CSS ndi kusinthasintha kwake. Phunzirani momwe mungasinthire Tailwind kuti igwirizane ndi zosowa za polojekiti yanu.

Kulumikizana ndi Tailwind CSS

Chitanipo kanthu pakuphunzira pamanja pogwiritsa ntchito zitsanzo zothandiza. Onani momwe mungapangire magawo osiyanasiyana a intaneti pogwiritsa ntchito Tailwind CSS ndi DaisyUI.

Kusamuka kuchokera ku Zina za CSS Frameworks kupita ku Tailwind CSS

Mukuganiza zosinthira ku Tailwind CSS? Mvetsetsani kusiyana kwakukulu pakati pa Tailwind ndi zomangira zina, ndipo phunzirani njira zabwino zosinthira mapulojekiti anu.

Mutha kugwiritsa ntchito DivMagic kapena zida zofananira kuti muwonjezere liwiro lanu losamuka.

Zida zopangira mawebusayiti ngati DivMagic zimakupatsani mwayi wokopera chilichonse chopangidwa ndi mtundu uliwonse patsamba lililonse ndikudina kamodzi.

Chitsanzo Chosavuta: Kumanga Chigawo cha Makhadi Omvera

Nachi chitsanzo cha momwe mungapangire gawo lamakhadi omvera pogwiritsa ntchito Tailwind CSS. Chigawochi chidzakhala ndi chithunzi, mutu, ndi kufotokozera.

<div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="/img/store.jpg" alt="Store">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Your Product</div>
      <p class="mt-2 text-gray-500">This is a brief description of your product. The card uses utility classes for padding, text color, and the uppercase font styling.</p>
    </div>
  </div>
</div>

Kupanga Fomu ndi Tailwind CSS

Kupanga fomu ndi Tailwind CSS ndikosavuta komanso mwachilengedwe. Nayi fomu yolumikizirana yosavuta:

<div class="w-full max-w-xs">
  <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="username">
        Username
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Username">
    </div>
    <div class="mb-6">
      <label class="block text-gray-700 text-sm font-bold mb-2" for="password">
        Password
      </label>
      <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="******************">
    </div>
    <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Sign In
      </button>
    </div>
  </form>
</div>

Kusintha Tailwind CSS

Tailwind CSS imakupatsani mwayi wosinthira masinthidwe ake, kugwirizanitsa makalasi ofunikira malinga ndi zosowa zanu. Pansipa pali chitsanzo cha momwe mungasinthire makonda amtundu.

Zitsanzozi zikuwonetsa kusinthasintha ndi kuphweka kwa Tailwind CSS, kusonyeza momwe angakuthandizireni kupanga zigawo zamakono, zomvera pa intaneti moyenera komanso moyenera.

module.exports = {
  theme: {
    extend: {
      colors: {
        'custom-blue': '#243c5a',
        'custom-green': '#387c6d',
      }
    }
  }
}

Kodi ndifunika fayilo iliyonse ya CSS?

Fayilo yokhayo yomwe mungafune ndi Tailwind CSS ndi fayilo ya tailwind.config.js.

Fayiloyo isunga zokonda zanu. Simukhala mukulemba css kapena kukhala ndi fayilo ina ya css. Fayilo yosinthira iyi ndi imodzi yokha yomwe mungafune.

Kodi njira zabwino za Tailwind CSS ndi ziti?

Kuti mumve zambiri za machitidwe abwino a Tailwind CSS, chonde onani nkhani yathu ina Tailwind CSS Best Practices.

Tailwind CSS: Tsogolo la Kapangidwe ka Webusaiti

Ganizirani momwe Tailwind CSS ikusinthira tsogolo la mapangidwe awebusayiti. Phunzirani za mphamvu zake komanso kuthekera kwakukula kwamakampani opanga mawebusayiti.