Tailwind CSS - Vaka mawebhusaiti azvino nekukurumidza usingasiye HTML yako

Gadzira Complex Dhizaini zviri nyore

NeTailwind CSS, kugadzira dhizaini yakaoma inova mhepo. Iko kusanganiswa kwemakirasi ekushandisa uye inopindura dhizaini yedhizaini inobvumidza iwe kugadzira akaomesesa marongero zviri nyore, pasina kukanganisa pakuita uye kuchengetedza kwewebhusaiti yako.

Vaka chero chinhu

Kunaka kweTailwind CSS kuri mukusiyana kwayo. Iwe unogona kugadzira chero chinhu kubva kune yakapusa blog peji kuenda kune yepamusoro e-commerce chikuva, zvese uchishandisa iwo akafanana intuitive utility makirasi.

Unongogumira pakufunga kwako. Musiyano mukuru kubva pakushandisa Vanilla CSS ndiko kumhanya kwaunogona kuvaka magadzirirwo etsika.

Maitiro echinyakare ekushandisa makirasi css makirasi ane html zvikamu se div, div kirasi, p kirasi inogara iri sarudzo asi kukurumidza kuvandudza kunouya neTailwind CSS kunoita kuti hupenyu hwako huve nyore.

Maitiro akanaka haashande

Sechinyakare, CSS inonyorwa nekumisikidza seti yezvitaera zvepasi rose uye nekuzvinatsa pachikamu-ne-chikamu. Kunyange iyi iri nzira yakakurumbira, inogona kutungamira kune yakawanda, yakaoma-kuchengeta kodhi.

Tailwind CSS inopikisa pfungwa iyi, ichipokana kuti utility-yekutanga CSS inopa yakachena, inochengeteka mhinduro.

Iyo inonyanya kufarirwa chikamu raibhurari yeTailwind CSS

daisyUI ndiyo inonyanya kufarirwa chikamu raibhurari yeTailwind CSS, ichizvikudza pamusoro pe50 zvakafanogadzirwa zvinhu, 50+ makirasi ekushandisa, uye zvingangoita zvisingaperi. Inokuchengetedza kubva pakudzoreredza vhiri pese paunogadzira chirongwa chitsva.

Usaitezve Kugadzira Wheel Nguva dzese

Panzvimbo pekupedza nguva yako neinonetesa maitiro ekunyora akawanda emakirasi mazita ega ega chirongwa chitsva, Tailwind CSS inoita kuti iwe ushandise yakanyatsotsanangurwa, semantic seti yemakirasi ekushandisa.

Aya makirasi anogona kushandiswa zvakare uye anoshanda zvinowirirana neCSS cascade, achikupa hwaro hwakasimba hwemapurojekiti ako ese.

Tailwind CSS - A Utility Chekutanga CSS Framework

Pakati payo, Tailwind CSS ishandiso-yekutanga CSS chimiro. Izvi zvinoreva kuti inopa yakaderera-level, composable utility makirasi aunogona kushandisa kuvaka chero dhizaini, zvakananga muHTML yako. Hapasisina magumo eCSS mafaera, ingori nyore uye intuitive kodhi.

Shandisa Semantic Kirasi Mazita

Semantic kirasi mazita anovandudza kuverenga kwekodhi yako, zvichiita kuti zvive nyore kunzwisisa izvo kirasi chaiyo inoita nekutarisa zita rayo. Ichi ndicho chimwe chezvinhu zvakawanda zvakatorwa neTailwind CSS kuvandudza ruzivo rwemugadziri.

CSS yakachena. Framework Agnostic. Inoshanda Kwese

Tailwind CSS haisungiri iwe kune chero chimiro. Ingori yakachena CSS, saka unogona kuishandisa nechero chimiro, kana kunyangwe isina kana hurongwa zvachose. Inoshanda kwese uko CSS inoshanda.

Mabhenefiti eTailwind CSS

Mabhenefiti ekushandisa Tailwind CSS anosanganisira kuwedzera kubereka, kuderedzwa kweCSS faira saizi, uye yakagadziridzwa ruzivo rwekuvandudza nekuda kwekushandisa-yekutanga nzira. Pamusoro pezvo, iyo Just-In-Time (JIT) modhi inopa mheni-inokurumidza kuvaka nguva, ichiwedzera kukurumidza kusimudzira maitiro ako.

Tailwind CSS Mitengo

Tailwind CSS chirongwa chakavhurika-sosi, zvinoreva kuti yakasununguka zvachose kushandisa. Mutengo unouya kana iwe uchida kuwana ma premium maficha senge UI zvikamu uye matemplate, ayo anopihwa kuburikidza neTailwind UI.

Iyo ine mafungiro uye inoshanduka panguva imwe chete

Tailwind CSS inopa maonero akasimba ekugadzirisa CSS yako, asi inoshanduka zvakakwana kubvumira kugadzirisa. Iyi chiyero inoita kuti iwe utarise pane izvo zvinonyanya kukosha - kuvaka maUI akanaka.

Modern features

Tailwind CSS inombundira maficha emazuva ano seFlexbox, Grid, uye zvivakwa zvetsika, zvichiita kuti ive sarudzo yakanaka yekugadzira mawebhusaiti emazuva ano.

Zvinodiwa zvekushandisa Tailwind CSS

Usati watanga kushandisa Tailwind CSS, unoda nzwisiso yekutanga yeHTML neCSS.

Nguva Yekushandisa Tailwind CSS

Tailwind CSS inokodzera marudzi ese emapurojekiti ewebhu, makuru kana madiki. Kana iwe wakaneta nekuita mutsimba neCSS uye uchitsvaga inoshanda, yekuvandudza-inoshamwaridzika mhinduro, saka Tailwind CSS ndeyako.

Kwete muzvikamu zvezvikamu?

Kana iwe usiri fan yezvikamu zvimiro seReact kana Vue, hapana kunetseka. Tailwind CSS is framework-agnostic uye inogona kushandiswa ne HTML yakachena uye JavaScript.

Kufanana uye Kusiyana pakati peTailwind CSS uye Mamwe maCSS Frameworks

Nepo mamwe masisitimu akaita seBootstrap neNheyo achipa zvakafanogadzirwa zvinhu, Tailwind CSS inokupa maturusi ekuvaka akazara tsika magadzirirwo pasina kusiya yako HTML. Nekudaro, nekubatanidzwa kwemaraibhurari echikamu senge daisyUI, iwe unogona ikozvino kunakidzwa neakanakisa epasirese.

Rima Mode

Imwe yeazvino maficha eTailwind CSS uye daisyUI ndiyo yakasviba modhi, iyo inokugonesa iwe kugadzira rima-themed mawebhusaiti zvisina basa.

Flexbox Muenzaniso

Tailwind CSS inobatanidza zvakanaka neazvino CSS maficha seFlexbox. Semuenzaniso, unogona kugadzira dhizaini inopindura uchishandisa makirasi senge flex, justify-centre, zvinhu-pakati, zvichingodaro.

Nekusanganiswa kweJust-in-Time, unogona kuedza akasiyana utility kirasi kukosha zviri nyore. Kana imwe kirasi yekushandisa isina kushanda, ingoichinja kuti igadzirise chinhu chako.

Muenzaniso weFlexbox Layout

Uchishandisa Tailwind CSS, zviri nyore kugadzira zvimiro zvakaomarara senge bhaa yekufambisa inoteerera. Heino muenzaniso:

<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>

Yakagadzirirwa-yakagadzirwa zvikamu

Kana ukafunga kushandisa tailwind css kodhi mupurojekiti yako, iwe unozokwanisa kuwana akawanda premade zvikamu online. Iwe unogona kukopa chero cheizvi uye kugadzirisa kune yako webhusaiti.

Maitiro ekushandura CSS kuita Tailwind CSS

Kukwanisa kushandura CSS kuita Tailwind CSS makirasi chinhu chinodiwa nevazhinji vanogadzira. Kune akawanda mawebhusaiti painternet akavakwa Tailwind CSS isati yavapo. Aya mapeji ewebhu anoshandisa css ane stylesheet uye nyanzvi dzekuvandudza webhu dzinoda kutamisa mapeji aya kuenda kuTailwind CSS.

DivMagic chishandiso chekuvandudza dandemutande chakavakirwa webhu kuvandudza uye vanogadzira software. Iyo inobvumira chero maitiro akodzerwe kubva kuvanilla css kuenda kuTailwind CSS. Nekudzvanya kamwe chete, unogona kushandura chero chikamu painternet kuita Tailwind CSS uye shandisa Tailwind mupurojekiti yako uye kugadzirisa chimiro chero nzira yaunoda.

Dive Zvakadzika muTailwind CSS Philosophy

Ihwo huzivi kuseri kweTailwind CSS ndeyekutarisa pane zvekushandisa. Izvi zvinoreva kuti pachinzvimbo chekufanotsanangura makirasi echikamu, Tailwind CSS inopa yakaderera-level utility makirasi anogonesa iwe kuvaka yakasarudzika madhizaini pasina kusiya HTML yako.

Sei Kutama Kubva kuChinyakare CSS?

Traditional CSS inogona kukonzera kushandiswa zvakanyanya kwepamusoro, mafaera akaputika, uye 'div soup'. Nekuchinja kune utility-yekutanga CSS chimiro seTailwind CSS, unogona kudzoreredza nyaya idzi, zvichikonzera yakachena, yakawedzera kurongeka codebase.

Sangana neSimba reUtility Makirasi

Utility makirasi anokubatsira kuti urege kudzokorora masitayipi mamwe chete mumashiti ako ese. Ndiyo nheyo ye "Usazvidzokorora" (DRY). Aya makirasi anosevha iwe yakakosha nguva uye kushanda nesimba uye anotungamira kune inochengetedzwa kwazvo codebase.

Kuongorora Tailwind CSS Directives

Tailwind CSS inosvitsa mashoma madhairekitori anogona kushandiswa mukati memasitaera ako. Izvi zvinosanganisira @apply, @variants, uye @screen. Kunzwisisa uye kushandisa mirairo iyi kunogona kusimudzira zvakanyanya yako Tailwind CSS ruzivo. Izvi zvinogona kuiswa muTailwind Config CSS faira. Unogona kunyora css makirasi uchishandisa nzira iyi.

Wedzera Tailwind CSS nePlugins

Tailwind CSS inogona kuwedzerwa nemapulagi, kuwedzera mashandiro matsva kana kugadzirisa iripo. Dzidza maitiro ekusimudzira maplugins kuti uwedzere kugona uye kunaka kwemapurojekiti ako ewebhu.

Batanidza Tailwind CSS muKufambiswa Kwebasa Kwako

Kubatanidza Tailwind CSS mukufambisa kwekufambisa kwako kwakatwasuka, ungave uri kushandisa maturusi ekuvaka seWebpack kana Parcel, kana kushanda nemafuremu akaita seNext.js kana Gatsby.

Wedzera Kuwanika neTailwind CSS

Tailwind CSS inokurudzira dhizaini inowanikwa nekubatanidza huwandu hweARIA hunhu mumakirasi ayo. Gadzira mamwe anosvikika nzvimbo uye wedzera ruzivo rwemushandisi kune wese munhu.

Batanidza Simba reFlexbox uye Grid neTailwind CSS

Shandisa mamodule emazuva ano eCSS seFlexbox uye Grid ine Tailwind CSS. Dzidza kuti makirasi ekushandisa anogona kushandiswa sei kudzora marongero nenzira inoshanduka uye inoteerera.

Maitiro ekugadzirisa yako Tailwind CSS Projects

Tailwind CSS inopa akati wandei maturusi ekugadzirisa uye matekiniki anoita kuti kuziva uye kugadzirisa nyaya dzemataera zvive nyore. Nzwisisa maturusi aya uye uvandudze hunyanzvi hwako hwekugadzirisa.

Gadzira Webhu Ine Ruvara neTailwind CSS

Tailwind CSS inouya neyakakura palette yemavara anogoneka. Dzidza mashandisiro nekugadzirisa mavara aya kuti ugadzire madhizaini anoyevedza uye anoyevedza.

Gadzira nekukurumidza neTailwind CSS 'JIT Mode

Dzvanya zvakadzika muTailwind CSS's Just-In-Time modhi. Nzwisisa kuti inoshanda sei uye kuti inogona sei kukurumidzira kukura kwako uye kuvaka nguva.

Kubva kuZero kuenda kuGamba: Master Tailwind CSS

Tanga rwendo rwekudzidzira Tailwind CSS. Kubva pakumisikidza nharaunda yako kusvika pakuongorora misoro yepamusoro, iyi gwara rakazara rawakafukidza.

Gadzirisa Tailwind CSS kune Zvaunoda

Rimwe remasimba makuru eTailwind CSS kushanduka kwayo. Dzidza maitiro ekugadzirisa Tailwind kuti ienderane nezvinodiwa zvepurojekiti yako.

Kuwana Maoko neTailwind CSS

Batanidza mukudzidza-mawoko kuburikidza nenhevedzano yemienzaniso inoshanda. Ongorora maitiro ekugadzira akasiyana ewebhu macomputer uchishandisa Tailwind CSS uye DaisyUI.

Kutama kubva kune Mamwe maCSS Frameworks kuenda kuTailwind CSS

Kufunga kuchinja kuTailwind CSS? Nzwisisa misiyano yakakosha pakati peTailwind uye mamwe marongero, uye dzidza maitiro anoshanda ekutamisa mapurojekiti ako.

Iwe unogona kushandisa DivMagic kana maturusi akafanana kuti uwedzere zvakanyanya kumhanya kwako kwekufambisa.

Webhu maturusi ekuvandudza seDivMagic anotendera iwe kukopa chero chinhu chero dhizaini uye chero chimiro kubva kune chero webhusaiti nekudzvanya kumwe chete.

Muenzaniso Wakareruka: Kuvaka Chikamu Chekadhi Inoteerera

Heino muenzaniso wekuti iwe ungavaka sei inopindura kadhi chikamu uchishandisa Tailwind CSS. Ichi chikamu chichava nemufananidzo, musoro, uye tsananguro.

<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>

Kuvaka Fomu neTailwind CSS

Kugadzira fomu neTailwind CSS yakatwasuka uye inonzwisisika. Heino fomu rekuonana riri nyore:

<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>

Kugadzirisa Tailwind CSS

Tailwind CSS inokutendera kuti ugadzirise kurongeka kwayo, kugadzirisa makirasi ekushandisa kune zvaunoda. Pazasi pane eis muenzaniso wemaitiro ekugadzirisa iyo pendi yemuvara.

Iyi mienzaniso inoratidza kuchinjika uye kureruka kweTailwind CSS, ichiratidza nzira yavanogona kukubatsira nayo kugadzira zvemazuva ano, zvinopindura zvewebhu zvinobudirira uye zvinobudirira.

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

Ndichada chero CSS faira?

Iyo chete faira yaunoda neTailwind CSS ndiyo tailwind.config.js faira.

Iyo faira inobata yako configuration settings. Iwe hausi kuzonyora css kana kuve nechero imwe css faira. Iyi faira yekumisikidza ndiyo yega yauchazoda.

Ndeapi maitiro akanakisa eTailwind CSS?

Kuti uwane tsananguro yakadzama pamusoro peTailwind CSS maitiro akanaka, ndapota ona chimwe chinyorwa chedu Tailwind CSS Best Practices.

Tailwind CSS: Iyo Ramangwana reWebhu Dhizaini

Funga nezvekuti Tailwind CSS iri kuumba sei ramangwana rewebhu dhizaini. Dzidza nezve simba rayo uye mukana wekukura muindasitiri yekuvandudza webhu.