Tailwind CSS - Byggðu nútímalegar vefsíður hratt án þess að yfirgefa HTML-númerið þitt

Búðu til flókna hönnun á auðveldan hátt

Með Tailwind CSS verður það auðvelt að búa til flókna hönnun. Sambland af tólum flokkum og móttækilegum hönnun tólum gerir þér kleift að hanna flókið skipulag á auðveldan hátt, án þess að skerða frammistöðu og viðhald vefsvæðis þíns.

Byggja hvað sem er

Fegurð Tailwind CSS felst í fjölhæfni þess. Þú getur búið til allt frá einfaldri bloggsíðu til háþróaðs e-verslunarvettvangs, allt á meðan þú notar sömu leiðandi gagnsemisflokka.

Þú takmarkast aðeins af ímyndunaraflið. Helsti munurinn á því að nota Vanilla CSS er hraðinn sem þú getur smíðað sérsniðna hönnun á.

Hin hefðbundna nálgun að nota sérsniðna css flokka með html hlutum eins og div, div class, p class er alltaf valkostur en hraðabótin sem fylgir Tailwind CSS gerir líf þitt auðveldara.

Bestu starfsvenjur virka í raun ekki

Hefð er að CSS er skrifað með því að koma á safni alþjóðlegra stíla og betrumbæta þá á íhlut-fyrir-hluta grundvelli. Þó að þetta sé vinsæl aðferð getur það leitt til fyrirferðarmikils kóða sem erfitt er að viðhalda.

Tailwind CSS ögrar þessari hugmynd og heldur því fram að gagnsemi-fyrst CSS bjóði upp á hreinni og viðhaldshæfari lausn.

Vinsælasta íhlutasafnið fyrir Tailwind CSS

daisyUI er vinsælasta íhlutasafnið fyrir Tailwind CSS, og státar af yfir 50 forhönnuðum íhlutum, 500+ gagnsemisflokkum og nánast endalausum möguleikum. Það bjargar þér frá því að finna upp hjólið aftur í hvert skipti sem þú býrð til nýtt verkefni.

Ekki finna upp hjólið í hvert skipti

Í stað þess að eyða tíma þínum í það leiðinlega ferli að skrifa heilmikið af bekkjarheitum fyrir hvert nýtt verkefni, gerir Tailwind CSS þér kleift að nota vel skilgreint, merkingarfræðilegt sett af gagnaklassum.

Þessir flokkar eru endurnýtanlegir og vinna samfellt með CSS fossinum, sem gefur þér traustan grunn fyrir öll verkefni þín.

Tailwind CSS - A Utility First CSS Framework

Í kjarna sínum er Tailwind CSS CSS rammi sem er fyrsti notagildi. Þetta þýðir að það býður upp á lág-stigi, samsettan gagnsemi flokka sem þú getur notað til að byggja upp hvaða hönnun sem er, beint í HTML. Ekki lengur endalausar CSS skrár, aðeins einfaldur og leiðandi kóða.

Notaðu merkingarfræðileg flokkunöfn

Merkingarfræðileg bekkjarheiti bæta læsileika kóðans þíns, sem gerir það auðveldara að skilja hvað tiltekinn flokkur gerir bara með því að skoða nafnið hans. Þetta er einn af mörgum eiginleikum sem Tailwind CSS hefur tekið upp til að bæta upplifun þróunaraðila.

Hreint CSS. Framework Agnostic. Virkar alls staðar

Tailwind CSS bindur þig ekki við neinn sérstakan ramma. Það er einfaldlega hreint CSS, svo þú getur notað það með hvaða ramma sem er, eða jafnvel án ramma yfirleitt. Það virkar alls staðar þar sem CSS virkar.

Kostir Tailwind CSS

Kostir þess að nota Tailwind CSS eru meðal annars aukin framleiðni, minni CSS skráarstærð og aukin upplifun þróunaraðila vegna aðferðafræðinnar sem er fyrst í notkun. Að auki veitir Just-In-Time (JIT) stillingin leifturhraðan byggingartíma, sem flýtir enn frekar fyrir þróunarferlinu þínu.

Tailwind CSS Verðlagning

Tailwind CSS er opinn uppspretta verkefni, sem þýðir að það er algjörlega ókeypis í notkun. Kostnaðurinn kemur þegar þú vilt fá aðgang að úrvalsaðgerðum eins og HÍ íhlutum og sniðmátum, sem eru í boði í gegnum Tailwind UI.

Það er skoðanakennt og sveigjanlegt á sama tíma

Tailwind CSS veitir sterka skoðun á því hvernig eigi að skipuleggja CSS þinn, en samt er hann nógu sveigjanlegur til að leyfa sérsniðningu. Þetta jafnvægi gerir þér kleift að einbeita þér að því sem skiptir mestu máli - að byggja upp falleg notendaviðmót.

Nútímalegir eiginleikar

Tailwind CSS nær yfir nútíma eiginleika eins og Flexbox, Grid og sérsniðna eiginleika, sem gerir það að frábæru vali til að þróa nútíma vefforrit.

Forsendur fyrir notkun Tailwind CSS

Áður en þú byrjar að nota Tailwind CSS þarftu grunnskilning á HTML og CSS.

Hvenær á að nota Tailwind CSS

Tailwind CSS hentar fyrir allar tegundir vefverkefna, stór sem smá. Ef þú ert þreyttur á að glíma við CSS og leita að skilvirkari, þróunarvænni lausn, þá er Tailwind CSS fyrir þig.

Ekki inn í íhluta ramma?

Ef þú ert ekki aðdáandi íhlutaramma eins og React eða Vue, engar áhyggjur. Tailwind CSS er ramma-agnostic og hægt að nota með hreinu HTML og JavaScript.

Líkindi og munur á Tailwind CSS og öðrum CSS ramma

Þó að aðrir rammar eins og Bootstrap og Foundation bjóða upp á fyrirfram hannaða íhluti, þá gefur Tailwind CSS þér tækin til að smíða alveg sérsniðna hönnun án þess að skilja HTML-inn þinn eftir. Hins vegar, með samþættingu íhlutasafna eins og daisyUI, geturðu nú notið þess besta úr báðum heimum.

Dark Mode

Einn af nýjustu eiginleikum Tailwind CSS og daisyUI er myrka stillingin, sem gerir þér kleift að búa til vefsíður með dökkt þema áreynslulaust.

Flexbox Dæmi

Tailwind CSS fellur vel að nútíma CSS eiginleikum eins og Flexbox. Til dæmis geturðu búið til móttækilegt skipulag með því að nota flokka eins og flex, justify-center, items-center, og svo framvegis.

Með blöndunni af Just-in-Time geturðu prófað mismunandi gildi notendaflokka auðveldlega. Ef einn gagnsemisflokkur virkaði ekki skaltu einfaldlega breyta honum til að sérsníða þáttinn þinn.

Dæmi um Flexbox skipulag

Með því að nota Tailwind CSS er auðvelt að búa til flókið skipulag eins og móttækilega leiðsögustiku. Hér er dæmi:

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

Tilbúnir íhlutir

Ef þú ákvaðst að nota tailwind css kóða í verkefninu þínu muntu geta fundið marga forgerða íhluti á netinu. Þú getur afritað eitthvað af þessu og sérsniðið fyrir þína eigin vefsíðu.

Hvernig á að breyta CSS í Tailwind CSS

Að geta breytt CSS í Tailwind CSS flokka er eitthvað sem flestir forritarar þurfa. Það eru margar vefsíður á netinu byggðar áður en Tailwind CSS var til. Þessar vefsíður nota css með stílblaði og sérfræðingar í vefþróun vilja flytja þessar síður yfir í Tailwind CSS.

DivMagic er vefþróunartæki smíðað fyrir vefhönnuði og hugbúnaðarframleiðendur. Það gerir kleift að afrita hvaða stíl sem er frá vanillu css til Tailwind CSS. Með einum smelli geturðu breytt hvaða íhlut sem er á netinu í Tailwind CSS og notað Tailwind í verkefninu þínu og sérsniðið stílinn eins og þú vilt.

Kafaðu djúpt í Tailwind CSS heimspeki

Hugmyndafræðin á bak við Tailwind CSS er að einbeita sér að gagnsemi. Þetta þýðir að í stað þess að forskilgreina íhlutaflokka, býður Tailwind CSS upp á lágstigs gagnsemisflokka sem gerir þér kleift að smíða einstaka hönnun án þess að yfirgefa HTML-númerið þitt.

Af hverju að hverfa frá hefðbundnum CSS?

Hefðbundin CSS getur valdið óhóflegri notkun á hnekkingum, uppblásnum skrám og 'div súpu'. Með því að skipta yfir í fyrsta CSS ramma eins og Tailwind CSS geturðu dregið úr þessum vandamálum, sem leiðir til hreinni og straumlínulagaðra kóðagrunns.

Upplifðu kraft gagnsemisnámskeiðanna

Notkunartímar hjálpa þér að forðast að endurtaka sömu stíla í gegnum stílblöðin þín. Það er meginreglan um „Ekki endurtaka sjálfan þig“ (DRY). Þessir flokkar spara þér verulegan tíma og fyrirhöfn og leiða til kóðagrunns sem hægt er að viðhalda mjög vel.

Að kanna Tailwind CSS tilskipanir

Tailwind CSS kynnir nokkrar tilskipanir sem hægt er að nota í stílblöðunum þínum. Þar á meðal eru @apply, @variants og @screen. Skilningur og notkun þessara tilskipana getur aukið Tailwind CSS upplifun þína til muna. Þetta er hægt að setja í Tailwind Config CSS skrána. Þú getur skrifað css flokka með þessari aðferð.

Framlengdu Tailwind CSS með viðbótum

Hægt er að útvíkka Tailwind CSS með viðbótum, bæta við nýjum virkni eða sérsníða þann sem fyrir er. Lærðu hvernig á að nýta viðbætur til að hámarka skilvirkni og fagurfræði vefverkefna þinna.

Settu Tailwind CSS inn í verkflæðið þitt

Það er einfalt að samþætta Tailwind CSS í þróunarvinnuflæðið þitt, hvort sem þú ert að nota byggingarverkfæri eins og Webpack eða Parcel, eða að vinna með ramma eins og Next.js eða Gatsby.

Auktu aðgengi með Tailwind CSS

Tailwind CSS hvetur til aðgengilegrar hönnunar með því að innihalda úrval af ARIA eiginleikum í flokkum sínum. Búðu til aðgengilegri viðmót og bættu notendaupplifunina fyrir alla.

Nýttu kraftinn í Flexbox og Grid með Tailwind CSS

Nýttu nútíma CSS skipulagseining eins og Flexbox og Grid með Tailwind CSS. Lærðu hvernig hægt er að nota gagnsemisflokka til að stjórna skipulagi á sveigjanlegan og móttækilegan hátt.

Hvernig á að kemba tailwind CSS verkefnin þín

Tailwind CSS býður upp á nokkur kembiverkfæri og aðferðir sem auðvelda að bera kennsl á og leysa stílvandamál. Skildu þessi verkfæri og bættu villuleitarhæfileika þína.

Búðu til litríkan vef með Tailwind CSS

Tailwind CSS kemur með breitt úrval af sérhannaðar litum. Lærðu hvernig á að nota og sérsníða þessa liti til að búa til lifandi og sjónrænt aðlaðandi hönnun.

Þróaðu hraðar með JIT-stillingu Tailwind CSS

Kafa dýpra í Tailwind CSS Just-In-Time ham. Skildu hvernig það virkar og hvernig það getur flýtt verulega fyrir þróun þinni og uppbyggingartíma.

From Zero to Hero: Master Tailwind CSS

Farðu í ferðalag til að ná tökum á Tailwind CSS. Frá því að setja upp umhverfið þitt til að kanna háþróuð efni, þessi yfirgripsmikla handbók hefur þig fjallað um.

Sérsníddu Tailwind CSS að þínum þörfum

Einn stærsti styrkur Tailwind CSS er sveigjanleiki þess. Lærðu hvernig á að sérsníða Tailwind að sérstökum þörfum verkefnisins.

Komast í hendur með Tailwind CSS

Taktu þátt í praktísku námi í gegnum röð hagnýtra dæma. Kannaðu hvernig á að smíða margs konar vefíhluti með Tailwind CSS og DaisyUI.

Flutningur frá öðrum CSS ramma yfir í Tailwind CSS

Ertu að íhuga að skipta yfir í Tailwind CSS? Skildu lykilmuninn á Tailwind og öðrum ramma og lærðu árangursríkar aðferðir til að flytja verkefnin þín.

Þú getur notað DivMagic eða svipuð verkfæri til að auka flutningshraðann verulega.

Vefþróunarverkfæri eins og DivMagic gera þér kleift að afrita hvaða þætti sem er hvaða hönnun sem er og hvaða stíl sem er af hvaða vefsíðu sem er með einum smelli.

Einfalt dæmi: Byggja móttækilegan kortahluta

Hér er dæmi um hvernig þú getur smíðað móttækilegan kortahluta með Tailwind CSS. Þessi hluti mun innihalda mynd, titil og lýsingu.

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

Byggja eyðublað með Tailwind CSS

Að búa til eyðublað með Tailwind CSS er einfalt og leiðandi. Hér er einfalt snertingareyðublað:

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

Aðlaga Tailwind CSS

Tailwind CSS gerir þér kleift að sérsníða sjálfgefna stillingu þess og sníða tólaflokkana að þínum þörfum. Fyrir neðan er dæmi um hvernig á að sérsníða litaspjaldið.

Þessi dæmi sýna sveigjanleika og einfaldleika Tailwind CSS, sýna hvernig þau geta hjálpað þér að búa til nútímalega, móttækilega vefhluta á skilvirkan og skilvirkan hátt.

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

Þarf ég einhverja CSS skrá?

Eina skráin sem þú þarft með Tailwind CSS er tailwind.config.js skráin.

Sú skrá mun geyma stillingar þínar. Þú munt ekki skrifa css eða hafa neina aðra css skrá. Þessi stillingarskrá er sú eina sem þú þarft.

Hver eru bestu starfsvenjur fyrir Tailwind CSS?

Fyrir nákvæmar útskýringar á Tailwind CSS bestu starfsvenjum, vinsamlegast sjáðu aðra grein okkar Tailwind CSS Best Practices.

Tailwind CSS: Framtíð vefhönnunar

Hugleiddu hvernig Tailwind CSS mótar framtíð vefhönnunar. Lærðu um áhrif þess og möguleika til vaxtar í vefþróunariðnaðinum.