Tailwind CSS – greitai kurkite modernias svetaines nepalikdami HTML

Lengvai kurkite sudėtingus dizainus

Su Tailwind CSS sudėtingų dizainų kūrimas tampa paprastas. Komunalinių paslaugų klasių ir interaktyvaus dizaino paslaugų derinys leidžia lengvai kurti sudėtingus maketus, nepakenkiant svetainės veikimui ir priežiūrai.

Statyti bet ką

Tailwind CSS grožis slypi jo universalumu. Galite sukurti bet ką – nuo ​​paprasto tinklaraščio puslapio iki pažangios el. prekybos platformos, naudodamiesi tomis pačiomis intuityviomis naudingumo klasėmis.

Jus riboja tik jūsų vaizduotė. Pagrindinis skirtumas nuo Vanilla CSS naudojimo yra greitis, kuriuo galite kurti pasirinktinius dizainus.

Tradicinis požiūris naudojant pasirinktines css klases su html komponentais, tokiais kaip div, div klasė, p klasė, visada yra galimybė, tačiau su Tailwind CSS gaunamas greičio pagerinimas palengvina jūsų gyvenimą.

Geriausia praktika iš tikrųjų neveikia

Tradiciškai CSS rašomas nustatant visuotinių stilių rinkinį ir patobulinant juos pagal kiekvieną komponentą. Nors tai yra populiarus metodas, jis gali sukelti didelių gabaritų, sunkiai prižiūrimą kodą.

Tailwind CSS meta iššūkį šiai idėjai, teigdama, kad CSS, kurio pirmenybė teikiama naudingumui, yra švaresnis ir lengviau prižiūrimas sprendimas.

Populiariausia „Tailwind CSS“ komponentų biblioteka

daisyUI yra populiariausia „Tailwind CSS“ komponentų biblioteka, turinti daugiau nei 50 iš anksto sukurtų komponentų, 500 ir daugiau naudingumo klasių ir praktiškai neribotomis galimybėmis. Taip išvengsite dviračio išradimo iš naujo kiekvieną kartą, kai kuriate naują projektą.

Neišradinėkite rato kiekvieną kartą iš naujo

Užuot gaišus laiką varginančiame rašant daugybę klasių pavadinimų kiekvienam naujam projektui, Tailwind CSS leidžia naudoti gerai apibrėžtą, semantinį naudingumo klasių rinkinį.

Šios klasės yra daugkartinio naudojimo ir harmoningai veikia su CSS kaskadu, suteikdamos jums tvirtą pagrindą visiems jūsų projektams.

Tailwind CSS – pirmoji CSS sistema

Iš esmės „Tailwind CSS“ yra CSS sistema, kuri pirmiausia yra naudinga. Tai reiškia, kad jame pateikiamos žemo lygio, sudaromos naudingumo klasės, kurias galite naudoti kurdami bet kokį dizainą tiesiogiai savo HTML. Daugiau jokių begalinių CSS failų, tik paprastas ir intuityvus kodas.

Naudokite semantinius klasių pavadinimus

Semantiniai klasių pavadinimai pagerina kodo skaitomumą, todėl lengviau suprasti, ką veikia konkreti klasė, pažvelgus į jos pavadinimą. Tai viena iš daugelio funkcijų, kurias „Tailwind CSS“ priėmė siekdama pagerinti kūrėjo patirtį.

Grynas CSS. Framework Agnostic. Veikia Visur

Tailwind CSS nesaisto jūsų su jokia konkrečia sistema. Tai tiesiog grynas CSS, todėl galite naudoti jį su bet kokia sistema arba net be jos. Jis veikia visur, kur veikia CSS.

Tailwind CSS pranašumai

„Tailwind CSS“ naudojimo pranašumai apima didesnį našumą, sumažintą CSS failo dydį ir patobulintą kūrėjo patirtį dėl metodologijos, kurioje pirmiausia naudojamas įrankis. Be to, „Just-In-Time“ (JIT) režimas užtikrina žaibišką kūrimo laiką, dar labiau pagreitindamas kūrimo procesą.

Tailwind CSS kainodara

Tailwind CSS yra atvirojo kodo projektas, o tai reiškia, kad juo galima naudotis visiškai nemokamai. Kaina atsiranda, kai norite pasiekti aukščiausios kokybės funkcijas, pvz., vartotojo sąsajos komponentus ir šablonus, kurie siūlomi naudojant „Tailwind UI“.

Jis turi savo nuomonę ir tuo pat metu lankstus

Tailwind CSS pateikia tvirtą nuomonę apie tai, kaip struktūrizuoti savo CSS, tačiau ji yra pakankamai lanksti, kad būtų galima tinkinti. Šis balansas leidžia sutelkti dėmesį į tai, kas svarbiausia – kurti gražias vartotojo sąsajas.

Šiuolaikinės savybės

Tailwind CSS apima modernias funkcijas, tokias kaip „Flexbox“, „Grid“ ir pasirinktines ypatybes, todėl tai puikus pasirinkimas kuriant šiuolaikines žiniatinklio programas.

Būtinos sąlygos naudoti Tailwind CSS

Prieš pradėdami naudoti Tailwind CSS, turite išmanyti HTML ir CSS.

Kada naudoti Tailwind CSS

Tailwind CSS tinka visų tipų žiniatinklio projektams, dideliems ar mažiems. Jei pavargote kovoti su CSS ir ieškote efektyvesnio, kūrėjams patogesnio sprendimo, „Tailwind CSS“ kaip tik jums.

Neįtraukiama į komponentų sistemas?

Jei nesate tokių komponentų sistemų kaip „React“ ar „Vue“ gerbėjas, nesijaudinkite. Tailwind CSS yra sistemos agnostinis ir gali būti naudojamas su grynu HTML ir JavaScript.

Tailwind CSS ir kitų CSS sistemų panašumai ir skirtumai

Nors kitose sistemose, tokiose kaip „Bootstrap“ ir „Fundament“, siūlomi iš anksto sukurti komponentai, „Tailwind CSS“ suteikia jums įrankius, leidžiančius sukurti visiškai pasirinktinius dizainus nepaliekant HTML. Tačiau integravę komponentų bibliotekas, tokias kaip daisyUI, dabar galite mėgautis geriausiais iš abiejų pasaulių.

Tamsusis režimas

Viena iš naujausių „Tailwind CSS“ ir „daisyUI“ funkcijų yra tamsusis režimas, leidžiantis be vargo kurti tamsios temos svetaines.

Flexbox pavyzdys

Tailwind CSS puikiai integruojasi su šiuolaikinėmis CSS funkcijomis, tokiomis kaip „Flexbox“. Pavyzdžiui, galite sukurti interaktyvų išdėstymą naudodami tokias klases kaip flex, justify-center, items-center ir pan.

Naudodami „Just-in-Time“ derinį galite lengvai išbandyti įvairias naudingumo klases. Jei viena paslaugų klasė neveikė, tiesiog pakeiskite ją, kad pritaikytumėte elementą.

„Flexbox“ išdėstymo pavyzdys

Naudojant Tailwind CSS, lengva sukurti sudėtingus išdėstymus, pavyzdžiui, reaguojančią naršymo juostą. Štai pavyzdys:

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

Paruošti komponentai

Jei nusprendėte savo projekte naudoti tailwind css kodą, galėsite rasti daug iš anksto paruoštų komponentų internete. Galite nukopijuoti bet kurį iš jų ir pritaikyti savo svetainei.

Kaip konvertuoti CSS į Tailwind CSS

Daugeliui kūrėjų reikia galimybės konvertuoti CSS į Tailwind CSS klases. Internete yra daug svetainių, sukurtų prieš tai, kai egzistavo „Tailwind CSS“. Šiuose tinklalapiuose naudojamas css su stilių lentele, o žiniatinklio kūrimo specialistai nori perkelti šiuos puslapius į Tailwind CSS.

DivMagic yra žiniatinklio kūrimo įrankis, sukurtas žiniatinklio kūrėjams ir programinės įrangos kūrėjams. Tai leidžia nukopijuoti bet kokį stilių iš vanilla css į Tailwind CSS. Vienu spustelėjimu galite konvertuoti bet kurį komponentą internete į Tailwind CSS ir naudoti Tailwind savo projekte bei tinkinti stilių bet kokiu būdu.

Pasinerkite į Tailwind CSS filosofiją

Tailwind CSS filosofija yra sutelkti dėmesį į naudingumą. Tai reiškia, kad vietoj iš anksto nustatytų komponentų klasių „Tailwind CSS“ pateikia žemo lygio paslaugų klases, kurios leidžia sukurti unikalų dizainą nepaliekant HTML.

Kodėl verta atsisakyti tradicinio CSS?

Dėl tradicinio CSS gali būti per daug naudojami nepaisymai, išpūsti failai ir „div sriuba“. Pereidami prie CSS sistemos, kuriai pirmiausia reikia naudingų paslaugų, pvz., Tailwind CSS, galite palengvinti šias problemas, todėl kodų bazė bus švaresnė ir supaprastinta.

Patirkite naudingų paslaugų klasių galią

Naudingumo klasės padeda išvengti tų pačių stilių kartojimo stiliaus lapuose. Tai principas „Nekartokite savęs“ (DRY). Šios klasės sutaupo daug laiko ir pastangų bei sukuria labai prižiūrimą kodų bazę.

„Tailwind CSS“ direktyvų tyrinėjimas

„Tailwind CSS“ pateikia keletą direktyvų, kurias galima naudoti jūsų stiliaus lentelėse. Tai apima @apply , @variants ir @screen. Šių direktyvų supratimas ir naudojimas gali labai pagerinti jūsų „Tailwind CSS“ patirtį. Juos galima įdėti į Tailwind Config CSS failą. Naudodami šį metodą galite rašyti css klases.

Išplėskite Tailwind CSS naudodami papildinius

Tailwind CSS gali būti išplėstas naudojant papildinius, pridedant naujų funkcijų arba pritaikant esamą. Sužinokite, kaip panaudoti papildinius, kad padidintumėte savo žiniatinklio projektų efektyvumą ir estetiką.

Įtraukite Tailwind CSS į savo darbo eigą

Integruoti Tailwind CSS į savo kūrimo darbo eigą yra nesudėtinga, nesvarbu, ar naudojate kūrimo įrankius, pvz., „Webpack“ ar „Parcel“, ar dirbate su tokiomis sistemomis kaip „Next.js“ ar „Gatsby“.

Pagerinkite prieinamumą naudodami Tailwind CSS

Tailwind CSS skatina prieinamą dizainą įtraukdama į savo klases ARIA atributų asortimentą. Sukurkite labiau prieinamas sąsajas ir pagerinkite naudotojo patirtį visiems.

Išnaudokite „Flexbox“ ir „Grid“ galią su „Tailwind CSS“.

Pasinaudokite šiuolaikiniais CSS išdėstymo moduliais, pvz., „Flexbox“ ir „Grid“ su „Tailwind CSS“. Sužinokite, kaip naudingumo klasės gali būti naudojamos lanksčiai ir greitai valdyti išdėstymą.

Kaip derinti savo Tailwind CSS projektus

Tailwind CSS suteikia keletą derinimo įrankių ir metodų, kurie palengvina stiliaus problemų nustatymą ir sprendimą. Supraskite šiuos įrankius ir patobulinkite derinimo įgūdžius.

Sukurkite spalvingą žiniatinklį naudodami „Tailwind CSS“.

Tailwind CSS pateikiama su plačia tinkinamų spalvų palete. Sužinokite, kaip naudoti ir pritaikyti šias spalvas, kad sukurtumėte ryškius ir vizualiai patrauklius dizainus.

Kurkite greičiau naudodami Tailwind CSS JIT režimą

Pasinerkite į Tailwind CSS „Just-In-Time“ režimą. Supraskite, kaip tai veikia ir kaip tai gali žymiai pagreitinti jūsų kūrimo ir kūrimo laiką.

Nuo nulio iki herojaus: Master Tailwind CSS

Leiskitės į kelionę, kad įsisavintumėte Tailwind CSS. Nuo aplinkos nustatymo iki pažangių temų tyrinėjimo – šis išsamus vadovas jums padės.

Tinkinkite Tailwind CSS pagal savo poreikius

Viena didžiausių „Tailwind CSS“ privalumų yra jos lankstumas. Sužinokite, kaip pritaikyti Tailwind pagal konkrečius jūsų projekto poreikius.

Praktinės priemonės su Tailwind CSS

Įsitraukite į praktinį mokymąsi per daugybę praktinių pavyzdžių. Sužinokite, kaip sukurti įvairius žiniatinklio komponentus naudojant Tailwind CSS ir DaisyUI.

Perėjimas iš kitų CSS sistemų į Tailwind CSS

Svarstote galimybę pereiti prie Tailwind CSS? Supraskite pagrindinius „Tailwind“ ir kitų sistemų skirtumus ir išmokite efektyvių projektų perkėlimo strategijų.

Galite naudoti DivMagic ar panašius įrankius, kad žymiai padidintumėte perkėlimo greitį.

Žiniatinklio kūrimo įrankiai, tokie kaip „DivMagic“, leidžia vienu paspaudimu nukopijuoti bet kokį dizainą ir stilių iš bet kurios svetainės.

Paprastas pavyzdys: reaguojančio kortelės komponento kūrimas

Štai pavyzdys, kaip galite sukurti interaktyvų kortelės komponentą naudodami Tailwind CSS. Šiame komponente bus vaizdas, pavadinimas ir aprašymas.

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

Formos kūrimas naudojant Tailwind CSS

Formos sukūrimas naudojant Tailwind CSS yra paprastas ir intuityvus. Štai paprasta kontaktų forma:

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

Tailwind CSS tinkinimas

Tailwind CSS leidžia tinkinti numatytąją konfigūraciją, pritaikant paslaugų klases pagal jūsų poreikius. Žemiau yra pavyzdys, kaip tinkinti spalvų paletę.

Šie pavyzdžiai parodo „Tailwind CSS“ lankstumą ir paprastumą, parodydami, kaip jie gali padėti efektyviai ir efektyviai sukurti modernius, reaguojančius žiniatinklio komponentus.

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

Ar man reikės CSS failo?

Vienintelis failas, kurio jums reikia naudojant Tailwind CSS, yra tailwind.config.js failas.

Tame faile bus jūsų konfigūracijos nustatymai. Jūs nerašysite css ar neturėsite jokio kito css failo. Šis konfigūracijos failas yra vienintelis, kurio jums reikės.

Kokia yra geriausia „Tailwind CSS“ praktika?

Norėdami gauti išsamų paaiškinimą apie geriausią „Tailwind CSS“ praktiką, žr. kitą straipsnį „Tailwind CSS“ geriausia praktika.

Tailwind CSS: interneto dizaino ateitis

Apmąstykite, kaip Tailwind CSS formuoja interneto dizaino ateitį. Sužinokite apie jo įtaką ir augimo potencialą žiniatinklio kūrimo pramonėje.