Tailwind CSS – looge moodsaid veebisaite kiiresti ilma HTML-ist lahkumata

Looge lihtsalt keerulisi kujundusi

Tailwind CSS-iga muutub keerukate kujunduste loomine imelihtsaks. Utiliidiklasside ja tundlike disainiutiliitide kombinatsioon võimaldab teil hõlpsalt kujundada keerulisi paigutusi, ilma et see kahjustaks veebisaidi jõudlust ja hooldatavust.

Ehitage ükskõik mida

Tailwind CSS-i ilu seisneb selle mitmekülgsuses. Saate luua kõike alates lihtsast ajaveebilehest kuni täiustatud e-kaubanduse platvormini, kasutades samu intuitiivseid utiliidiklasse.

Teid piirab ainult teie kujutlusvõime. Peamine erinevus Vanilla CSS-i kasutamisest on kohandatud kujunduse loomise kiirus.

Traditsiooniline lähenemine kohandatud css-klasside kasutamisele html-komponentidega, nagu div, div klass, p klass, on alati valik, kuid Tailwind CSS-iga kaasnev kiiruse parandamine muudab teie elu lihtsamaks.

Parimad tavad tegelikult ei tööta

Traditsiooniliselt kirjutatakse CSS-i globaalsete stiilide komplekti loomise ja nende komponentide kaupa täpsustamise teel. Kuigi see on populaarne meetod, võib see kaasa tuua mahuka ja raskesti hooldatava koodi.

Tailwind CSS seab selle arusaama kahtluse alla, väites, et utiliidipõhine CSS pakub puhtamat ja paremini hooldatavat lahendust.

Tailwind CSS-i kõige populaarsem komponentteek

daisyUI on Tailwind CSS-i kõige populaarsem komponenditeek, millel on üle 50 eeldisainitud komponendi, 500+ utiliidiklassi ja peaaegu lõputud võimalused. See säästab teid ratast uuesti leiutamast iga kord, kui loote uue projekti.

Ärge leiutage ratast iga kord uuesti

Selle asemel, et raisata oma aega iga uue projekti jaoks kümnete klassinimede kirjutamise tüütu protsessiga, võimaldab Tailwind CSS teil kasutada hästi määratletud semantilist utiliidiklasside komplekti.

Need klassid on korduvkasutatavad ja töötavad harmooniliselt CSS-i kaskaadiga, pakkudes teile kõigi projektide jaoks tugeva aluse.

Tailwind CSS – Utility esimene CSS-i raamistik

Oma põhiolemuselt on Tailwind CSS utiliidipõhine CSS-raamistik. See tähendab, et see pakub madala tasemega komponeeritavaid utiliidiklasse, mida saate kasutada mis tahes kujunduse loomiseks otse oma HTML-is. Enam pole lõputuid CSS-faile, vaid lihtne ja intuitiivne kood.

Kasutage semantilisi klassinimesid

Semantilised klassinimed parandavad teie koodi loetavust, muutes selle nime vaatamise kaudu lihtsamaks aru, mida konkreetne klass teeb. See on üks paljudest funktsioonidest, mille Tailwind CSS on arendajakogemuse parandamiseks kasutusele võtnud.

Puhas CSS. Raamistiku agnostik. Töötab kõikjal

Tailwind CSS ei seo teid ühegi konkreetse raamistikuga. See on lihtsalt puhas CSS, nii et saate seda kasutada mis tahes raamistikuga või isegi ilma raamistikuta. See töötab kõikjal, kus töötab CSS.

Tailwind CSS-i eelised

Tailwind CSS-i kasutamise eelised hõlmavad suuremat tootlikkust, väiksemat CSS-faili suurust ja täiustatud arendajakogemust tänu utiliidi esmase metoodikale. Lisaks pakub Just-In-Time (JIT) režiim välkkiire ehitusaega, kiirendades veelgi teie arendusprotsessi.

Tailwind CSS-i hinnakujundus

Tailwind CSS on avatud lähtekoodiga projekt, mis tähendab, et selle kasutamine on täiesti tasuta. Kulud tulevad siis, kui soovite juurde pääseda esmaklassilistele funktsioonidele, nagu kasutajaliidese komponendid ja mallid, mida pakutakse Tailwindi kasutajaliidese kaudu.

See on samal ajal arvamuslik ja paindlik

Tailwind CSS annab kindla arvamuse CSS-i struktureerimise kohta, kuid see on piisavalt paindlik, et võimaldada kohandamist. See tasakaal võimaldab teil keskenduda kõige olulisemale – kaunite kasutajaliideste loomisele.

Kaasaegsed omadused

Tailwind CSS hõlmab kaasaegseid funktsioone, nagu Flexbox, Grid ja kohandatud atribuute, mistõttu on see suurepärane valik kaasaegsete veebirakenduste arendamiseks.

Tailwind CSS-i kasutamise eeldused

Enne Tailwind CSS-i kasutamise alustamist vajate HTML-i ja CSS-i põhiteadmisi.

Millal kasutada Tailwindi CSS-i?

Tailwind CSS sobib igat tüüpi veebiprojektide jaoks, olgu need suured või väikesed. Kui olete väsinud CSS-iga maadlemisest ja otsite tõhusamat, arendajasõbralikumat lahendust, on Tailwind CSS teie jaoks.

Kas mitte komponentide raamistikesse?

Kui te ei ole selliste komponentraamistike nagu React või Vue fänn, ärge muretsege. Tailwind CSS on raamistiku agnostiline ja seda saab kasutada puhta HTML-i ja JavaScriptiga.

Tailwindi CSS-i ja muude CSS-i raamistike sarnasused ja erinevused

Kui teised raamistikud, nagu Bootstrap ja Foundation, pakuvad eelkujundatud komponente, siis Tailwind CSS annab teile tööriistad täiesti kohandatud kujunduste loomiseks ilma HTML-ist lahkumata. Komponentteekide (nt daisyUI) integreerimisega saate nüüd nautida mõlema maailma parimat.

Tume režiim

Üks Tailwind CSS-i ja daisyUI uusimaid funktsioone on tume režiim, mis võimaldab teil hõlpsalt luua tumedateemalisi veebisaite.

Flexboxi näide

Tailwind CSS integreerub hästi kaasaegsete CSS-i funktsioonidega, nagu Flexbox. Näiteks saate luua tundliku paigutuse, kasutades selliseid klasse nagu flex, justify-center, items-center ja nii edasi.

Just-in-Time kombinatsiooniga saate hõlpsalt proovida erinevaid kasuliku klassi väärtusi. Kui üks utiliidiklass ei töötanud, muutke seda lihtsalt oma elemendi kohandamiseks.

Flexboxi paigutuse näide

Tailwind CSS-i abil on lihtne luua keerulisi paigutusi, näiteks tundliku navigeerimisriba. Siin on näide:

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

Valmis komponendid

Kui otsustasite oma projektis kasutada tailwind css-koodi, leiate Internetist palju valmiskomponente. Saate neid kopeerida ja oma veebisaidi jaoks kohandada.

Kuidas teisendada CSS Tailwind CSS-iks

CSS-i teisendamine Tailwind CSS-i klassideks on midagi, mida enamik arendajaid vajab. Internetis on palju veebisaite, mis on loodud enne Tailwind CSS-i olemasolu. Need veebilehed kasutavad CSS-i koos stiilitabeliga ja veebiarenduse spetsialistid soovivad need lehed Tailwind CSS-i üle viia.

DivMagic on veebiarendustööriist, mis on loodud veebiarendajatele ja tarkvaraarendajatele. See võimaldab vanilla css-ist Tailwind CSS-i kopeerida mis tahes stiili. Ühe klõpsuga saate teisendada mis tahes Interneti-komponendi Tailwind CSS-iks ja kasutada Tailwindi oma projektis ning kohandada stiili nii, nagu soovite.

Sukeldu sügavale Tailwindi CSS-i filosoofiasse

Tailwind CSS-i filosoofia on keskenduda kasulikkusele. See tähendab, et komponendiklasside eelmääratlemise asemel pakub Tailwind CSS madala taseme utiliidiklasse, mis võimaldavad teil luua ainulaadseid kujundusi HTML-ist lahkumata.

Miks traditsioonilisest CSS-ist eemalduda?

Traditsiooniline CSS võib põhjustada ülekirjutuste, ülespuhutud failide ja „div-suppi” liigset kasutamist. Kui lähete üle utiliidipõhisele CSS-raamistikule, nagu Tailwind CSS, saate neid probleeme leevendada, mille tulemuseks on puhtam ja sujuvam koodibaas.

Kogege kasulike klasside võimsust

Utiliidiklassid aitavad teil vältida samade stiilide kordamist kogu stiilitabelites. See on põhimõte "Ära korda ennast" (KUIVA). Need klassid säästavad märkimisväärselt aega ja vaeva ning viivad hästi hooldatava koodibaasini.

Tailwindi CSS-i direktiivide uurimine

Tailwind CSS tutvustab mõnda direktiivi, mida saate oma stiilitabelites kasutada. Nende hulka kuuluvad @apply , @variants ja @screen. Nende direktiivide mõistmine ja kasutamine võib teie Tailwindi CSS-i kogemust oluliselt parandada. Need saab paigutada Tailwind Config CSS-faili. Seda lähenemisviisi kasutades saate kirjutada css-klasse.

Laiendage Tailwind CSS-i pistikprogrammidega

Tailwind CSS-i saab laiendada pluginatega, lisades uusi funktsioone või kohandades olemasolevat. Siit saate teada, kuidas kasutada pistikprogramme oma veebiprojektide tõhususe ja esteetika maksimeerimiseks.

Kaasake Tailwindi CSS oma töövoogu

Tailwind CSS-i integreerimine oma arendustöövoogu on lihtne, olenemata sellest, kas kasutate ehitustööriistu, nagu Webpack või Parcel, või töötate raamistikega, nagu Next.js või Gatsby.

Täiustage juurdepääsetavust Tailwind CSS-iga

Tailwind CSS julgustab ligipääsetavat disaini, lisades oma klassidesse hulga ARIA atribuute. Looge juurdepääsetavamad liidesed ja parandage kasutajakogemust kõigi jaoks.

Kasutage Tailwind CSS-iga Flexboxi ja Gridi jõudu

Kasutage kaasaegseid CSS-i paigutusmooduleid, nagu Flexbox ja Grid koos Tailwind CSS-iga. Siit saate teada, kuidas utiliidiklasse saab kasutada paigutuse paindlikuks ja tundlikuks juhtimiseks.

Kuidas siluda oma Tailwindi CSS-projekte

Tailwind CSS pakub mitmeid silumistööriistu ja tehnikaid, mis muudavad stiiliprobleemide tuvastamise ja lahendamise lihtsamaks. Mõistke neid tööriistu ja täiustage oma silumisoskusi.

Looge Tailwind CSS-iga värviline veeb

Tailwind CSS-il on lai kohandatavate värvide palett. Siit saate teada, kuidas neid värve kasutada ja kohandada erksate ja visuaalselt atraktiivsete kujunduste loomiseks.

Arendage kiiremini Tailwind CSS-i JIT-režiimiga

Sukelduge sügavamale Tailwind CSS-i Just-In-Time režiimi. Saate aru, kuidas see töötab ja kuidas see võib teie arendus- ja ehitusaega märkimisväärselt kiirendada.

Nullist kangelaseks: Master Tailwind CSS

Alustage Tailwindi CSS-i valdamise teekonda. See põhjalik juhend hõlmab teid alates keskkonna seadistamisest kuni täpsemate teemade uurimiseni.

Kohandage Tailwindi CSS-i vastavalt oma vajadustele

Tailwind CSS-i üks suurimaid tugevusi on selle paindlikkus. Siit saate teada, kuidas Tailwindi kohandada vastavalt teie projekti spetsiifilistele vajadustele.

Tailwind CSS-iga praktiline tutvumine

Osalege praktilises õppes praktiliste näidete seeria kaudu. Uurige, kuidas Tailwind CSS-i ja DaisyUI-ga luua mitmesuguseid veebikomponente.

Üleminek muudelt CSS-i raamistikelt Tailwind CSS-ile

Kas kaalute üleminekut Tailwind CSS-ile? Mõistke peamisi erinevusi Tailwindi ja muude raamistike vahel ning õppige tõhusaid strateegiaid oma projektide üleviimiseks.

Saate kasutada DivMagici või sarnaseid tööriistu, et oluliselt suurendada oma migratsioonikiirust.

Veebiarenduse tööriistad, nagu DivMagic, võimaldavad teil ühe klõpsuga kopeerida mis tahes kujunduse ja stiili mis tahes elemendi mis tahes veebisaidilt.

Lihtne näide: tundliku kaardikomponendi loomine

Siin on näide sellest, kuidas saate Tailwind CSS-i abil luua tundliku kaardikomponendi. See komponent sisaldab pilti, pealkirja ja kirjeldust.

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

Vormi koostamine Tailwind CSS-iga

Tailwind CSS-iga vormi loomine on lihtne ja intuitiivne. Siin on lihtne kontaktivorm:

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

Tailwindi CSS-i kohandamine

Tailwind CSS võimaldab teil kohandada selle vaikekonfiguratsiooni, kohandades utiliidi klasse vastavalt teie vajadustele. Allpool on näide värvipaleti kohandamise kohta.

Need näited tutvustavad Tailwind CSS-i paindlikkust ja lihtsust, näidates, kuidas need aitavad teil tõhusalt ja tulemuslikult luua kaasaegseid, tundlike veebikomponente.

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

Kas mul on vaja CSS-faili?

Ainus fail, mida Tailwind CSS-iga vajate, on fail tailwind.config.js.

See fail sisaldab teie konfiguratsiooniseadeid. Te ei kirjuta css-i ega kasuta muid css-faile. See konfiguratsioonifail on ainus, mida vajate.

Millised on Tailwindi CSS-i parimad tavad?

Tailwindi CSS-i parimate tavade üksikasjaliku selgituse saamiseks vaadake meie teist artiklit Tailwind CSS-i parimad tavad.

Tailwind CSS: veebidisaini tulevik

Mõelge sellele, kuidas Tailwind CSS kujundab veebidisaini tulevikku. Lisateave selle mõju ja kasvupotentsiaali kohta veebiarendustööstuses.