Tailwind CSS - Manangana tranokala maoderina haingana nefa tsy miala amin'ny HTML-nao

Mamorona endrika sarotra amin'ny mora

Miaraka amin'ny Tailwind CSS, lasa mora ny mamorona endrika sarotra. Ny fitambaran'ny kilasin'ny utilitaire sy ny fitaovana famolavolana mandray andraikitra dia ahafahanao mamolavola drafitra saro-takarina amin'ny fomba mora, tsy mampandefitra ny fampandehanana sy ny fikojakojana ny tranokalanao.

Manorena na inona na inona

Ny hatsaran'ny Tailwind CSS dia miankina amin'ny fahaizany. Azonao atao ny mamorona na inona na inona avy amin'ny pejin'ny bilaogy tsotra mankany amin'ny sehatra e-varotra avo lenta, miaraka amin'ny fampiasana kilasy fampiasa intuitive mitovy.

Voafetrao ihany ny sainao. Ny fahasamihafana lehibe amin'ny fampiasana Vanilla CSS dia ny hafainganam-pandeha ahafahanao manamboatra endrika manokana.

Ny fomba nentim-paharazana amin'ny fampiasana kilasy css mahazatra miaraka amin'ny singa html toy ny div, div class, p class dia safidy foana fa ny fanatsarana haingana miaraka amin'ny Tailwind CSS dia manamora ny fiainanao.

Tsy mandeha ny fanao tsara indrindra

Amin'ny fomba mahazatra, ny CSS dia nosoratana tamin'ny alàlan'ny fametrahana andiana karazana manerantany ary manadio azy ireo amin'ny singa tsirairay. Na dia fomba malaza aza ity, dia mety hitarika ho amin'ny kaody goavana sy sarotra tazonina.

Ny Tailwind CSS dia manohitra an'io hevitra io, amin'ny filazana fa ny CSS voalohany dia manome vahaolana madio kokoa sy azo tazomina kokoa.

Ny tranomboky singa malaza indrindra ho an'ny Tailwind CSS

daisyUI no famakiam-boky singa malaza indrindra ho an'ny Tailwind CSS, mirehareha mihoatra ny 50 singa efa novolavolaina, 500+ kilasy fampiasa, ary saika tsy misy farany. Mamonjy anao amin'ny fanavaozana ny kodia isaky ny mamorona tetikasa vaovao ianao.

Aza mamorona indray ny kodia isaky ny mandeha

Raha tokony handany ny fotoananao amin'ny dingana mandreraka amin'ny fanoratana anarana am-polony ho an'ny tetikasa vaovao tsirairay ianao, ny Tailwind CSS dia ahafahanao mampiasa andiana kilasy fampiasa voafaritra tsara sy semantika.

Ireo kilasy ireo dia azo ampiasaina indray ary miara-miasa amin'ny CSS cascade, manome anao fototra mafy orina ho an'ny tetikasanao rehetra.

Tailwind CSS - Framework CSS voalohany ampiasaina

Amin'ny fotony, Tailwind CSS dia rafitra CSS voalohany ampiasaina. Midika izany fa manome kilasy fampiasa amin'ny ambaratonga ambany sy azo ampiasaina izay azonao ampiasaina hanamboarana endrika rehetra, mivantana amin'ny HTML-nao. Tsy misy rakitra CSS tsy misy farany intsony, kaody tsotra sy intuitive fotsiny.

Mampiasà Anaran'ny kilasy Semantika

Ny anaran'ny kilasy semantika dia manatsara ny fahaiza-mamaky ny kaody anao, ka manamora ny fahazoana ny zavatra ataon'ny kilasy manokana amin'ny fijerena ny anarany fotsiny. Io no iray amin'ireo endri-javatra maro noraisin'i Tailwind CSS hanatsarana ny traikefan'ny mpamorona.

CSS madio. Framework Agnostic. Miasa na aiza na aiza

Ny Tailwind CSS dia tsy mamatotra anao amin'ny rafitra manokana. CSS madio fotsiny izy io, ka azonao ampiasaina amin'ny rafitra rehetra, na tsy misy rafitra mihitsy aza. Miasa na aiza na aiza misy ny CSS miasa.

Ny tombony amin'ny Tailwind CSS

Ny tombony amin'ny fampiasana Tailwind CSS dia ahitana ny fampitomboana ny vokatra, ny fampihenana ny haben'ny rakitra CSS, ary ny traikefan'ny mpamorona nohatsaraina noho ny fomba fiasa voalohany. Fanampin'izany, ny maodely Just-In-Time (JIT) dia manome fotoana fanamboarana haingana, manafaingana kokoa ny fizotran'ny fivoaranao.

Tailwind CSS Pricing

Ny Tailwind CSS dia tetik'asa misokatra, izay midika fa malalaka tanteraka ny fampiasana azy. Ny vidiny dia tonga rehefa te-hiditra amin'ny endri-javatra premium toy ny singa sy ny maodely UI ianao, izay atolotra amin'ny alàlan'ny Tailwind UI.

Mihevitra izy io ary miovaova amin'ny fotoana iray ihany

Ny Tailwind CSS dia manome hevitra mafonja momba ny fomba handrafetana ny CSS-nao, nefa azo atao tsara ny mamela ny fanamboarana. Ity fifandanjana ity dia ahafahanao mifantoka amin'ny zava-dehibe indrindra - ny fananganana UI tsara tarehy.

Endri-javatra maoderina

Ny Tailwind CSS dia manana endri-javatra maoderina toa ny Flexbox, Grid, ary fananana manokana, ka mahatonga azy io ho safidy tsara indrindra amin'ny famolavolana rindranasa tranonkala maoderina.

Fepetra takiana amin'ny fampiasana Tailwind CSS

Alohan'ny hanombohanao mampiasa Tailwind CSS dia mila fahatakarana fototra momba ny HTML sy CSS ianao.

Rahoviana ny fampiasana Tailwind CSS

Tailwind CSS dia mety amin'ny karazana tetikasan-tranonkala rehetra, lehibe na kely. Raha reraky ny tolona amin'ny CSS ianao ary mitady vahaolana mahomby kokoa sy mora kokoa amin'ny mpamorona, dia ho anao ny Tailwind CSS.

Tsy ao anatin'ny rafitra singa?

Raha tsy mpankafy ny rafitra singa toa ny React na Vue ianao dia aza manahy. Tailwind CSS dia framework-agnostic ary azo ampiasaina amin'ny HTML sy JavaScript madio.

Fitoviana sy fahasamihafana eo amin'ny Tailwind CSS sy ny Frameworks CSS hafa

Raha toa ny rafitra hafa toa an'i Bootstrap sy Foundation dia manolotra singa efa nomanina mialoha, ny Tailwind CSS dia manome anao ny fitaovana hananganana endrika manokana tsy misy miala amin'ny HTML anao. Na izany aza, miaraka amin'ny fampidirana ireo tranomboky singa toa ny daisyUI, afaka mankafy ny tsara indrindra amin'ny tontolo roa ianao izao.

Dark Mode

Ny iray amin'ireo endri-javatra farany amin'ny Tailwind CSS sy daisyUI dia ny maody maizina, izay ahafahanao mamorona tranokala misy lohahevitra maizina.

Ohatra Flexbox

Tailwind CSS dia mitambatra tsara amin'ny endri-javatra CSS maoderina toa ny Flexbox. Ohatra, azonao atao ny mamorona rindrankajy mandray andraikitra amin'ny fampiasana kilasy toy ny flex, justify-center, item-center, sy ny sisa.

Miaraka amin'ny fitambaran'ny Just-in-Time, azonao atao ny manandrana mora foana ny soatoavina kilasin'ny utility. Raha toa ka tsy mandeha ny kilasin'ny fitaovana iray dia ovay fotsiny izany mba hanamboarana ny singanao.

Ohatra iray amin'ny fametrahana Flexbox

Amin'ny fampiasana Tailwind CSS, mora ny mamorona drafitra saro-takarina toy ny bara fitetezana mandray andraikitra. Ity misy ohatra iray:

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

Ireo singa efa vita

Raha nanapa-kevitra ny hampiasa kaody css tailwind amin'ny tetikasanao ianao, dia ho afaka hahita singa efa vita amin'ny Internet ianao. Azonao atao ny mandika ny iray amin'ireo ary manamboatra ny tranokalanao manokana.

Ahoana ny fomba hamadihana ny CSS ho Tailwind CSS

Ny fahafahana manova CSS ho kilasy Tailwind CSS dia zavatra ilain'ny ankamaroan'ny mpamorona. Betsaka ny tranokala ao amin'ny Internet naorina talohan'ny nisian'ny Tailwind CSS. Ireo pejin-tranonkala ireo dia mampiasa css miaraka amin'ny stylesheet ary ireo matihanina amin'ny fampivoarana tranonkala dia maniry ny hamindra ireo pejy ireo amin'ny Tailwind CSS.

DivMagic dia fitaovana fampivoarana tranonkala natao ho an'ny mpamorona tranonkala sy mpamorona rindrambaiko. Mamela ny fomba rehetra azo adika avy amin'ny vanilla css mankany Tailwind CSS. Amin'ny tsindry iray, azonao atao ny manova ny singa rehetra amin'ny Internet ho Tailwind CSS ary mampiasa Tailwind amin'ny tetikasanao ary manamboatra ny fomba tianao.

Midira lalina ao amin'ny Filozofia CSS Tailwind

Ny filozofia ao ambadiky ny Tailwind CSS dia ny mifantoka amin'ny fampiasa. Midika izany fa tsy mamaritra ny kilasy singa, ny Tailwind CSS dia manome kilasy fampiasa ambany kokoa izay ahafahanao manamboatra endrika tsy manam-paharoa nefa tsy miala amin'ny HTML-nao.

Nahoana no miala amin'ny CSS nentim-paharazana?

Ny CSS nentim-paharazana dia mety hahatonga ny fampiasana tafahoatra ny overrides, ny rakitra mibontsina ary ny 'soup div'. Amin'ny alàlan'ny fifindrana amin'ny rafitra CSS voalohany toy ny Tailwind CSS, azonao atao ny manamaivana ireo olana ireo, ka miteraka codebase madio kokoa sy mirindra kokoa.

Manandrama ny herin'ny kilasin'ny Utility

Manampy anao hisoroka ny famerimberenan'ny fomba mitovy amin'ny taratasin-dalao ny kilasin'ny fitaovana. Fitsipika iray amin'ny "Aza mamerina ny tenanao" (MAINA). Ireo kilasy ireo dia mitahiry fotoana sy ezaka lehibe ho anao ary mitondra any amin'ny codebase azo karakaraina.

Mikaroka ny Tailwind CSS Directives

Tailwind CSS dia mampiditra torolalana vitsivitsy azo ampiasaina ao anatin'ny takelakao. Anisan'izany ny @apply , @variants , ary @screen. Ny fahatakarana sy ny fampiasana ireo torolalana ireo dia afaka manatsara ny traikefanao Tailwind CSS. Ireo dia azo apetraka ao amin'ny rakitra CSS Tailwind Config. Azonao atao ny manoratra kilasy css amin'ny fampiasana an'io fomba io.

Hanitatra Tailwind CSS miaraka amin'ny Plugins

Ny Tailwind CSS dia azo itarina miaraka amin'ny plugins, manampy fiasa vaovao na manamboatra ny efa misy. Ianaro ny fomba fampiasana plugins mba hampitomboana ny fahombiazan'ny tetikasanao amin'ny tranonkalanao.

Ampidiro ny Tailwind CSS ao amin'ny workflow-nao

Ny fampidirana Tailwind CSS amin'ny rindranasan'ny fampandrosoana dia tsotra, na mampiasa fitaovana fananganana toy ny Webpack na Parcel ianao, na miara-miasa amin'ny rafitra toy ny Next.js na Gatsby.

Ampitomboy ny fidirana amin'ny Tailwind CSS

Ny Tailwind CSS dia mamporisika ny famolavolana azo idirana amin'ny fampidirana ireo toetra ARIA isan-karazany ao amin'ny kilasiny. Mamorona fifandraisana azo idirana kokoa ary ampitomboy ny traikefan'ny mpampiasa ho an'ny rehetra.

Ampiasao ny herin'ny Flexbox sy Grid miaraka amin'ny Tailwind CSS

Ampiasao ny maody famolavolana CSS maoderina toa ny Flexbox sy Grid miaraka amin'ny Tailwind CSS. Ianaro ny fomba azo ampiasana ny kilasin'ny fampiasa amin'ny fanaraha-maso ny fandrindrana amin'ny fomba mora azo sy mora raisina.

Ahoana ny fanesorana ny tetikasa Tailwind CSS anao

Ny Tailwind CSS dia manome fitaovana sy teknika debugging maromaro izay manamora ny fahafantarana sy famahana ny olan'ny styling. Fantaro ireo fitaovana ireo ary ampitomboy ny fahaizanao debug.

Mamorona tranonkala miloko miaraka amin'ny Tailwind CSS

Tailwind CSS dia tonga miaraka amin'ny palette midadasika misy loko azo zahana. Ianaro ny fomba fampiasana sy fanamboarana ireo loko ireo mba hamoronana endrika mavitrika sy manintona.

Mamorona haingana kokoa amin'ny fomba JIT Tailwind CSS

Midira lalindalina kokoa amin'ny fomba Just-In-Time an'ny Tailwind CSS. Fantaro ny fomba fiasany sy ny fomba ahafahany manafaingana ny fivoaranao sy ny fotoana fananganana anao.

From Zero to Hero: Master Tailwind CSS

Miroso amin'ny dia amin'ny fifehezana ny Tailwind CSS. Avy amin'ny fametrahana ny tontolo iainanao ka hatramin'ny fijerena lohahevitra mandroso, ity torolàlana feno ity dia norakofanao.

Amboary ny CSS Tailwind amin'ny zavatra ilainao

Ny iray amin'ireo tanjaky ny Tailwind CSS dia ny fahaizany. Ianaro ny fomba fanamboarana ny Tailwind hifanaraka amin'ny filan'ny tetikasanao manokana.

Fahazoana tanana amin'ny Tailwind CSS

Mandraisa anjara amin'ny fianarana an-tanana amin'ny alalan'ny andiana ohatra azo ampiharina. Tadiavo ny fomba fananganana singa web isan-karazany amin'ny fampiasana Tailwind CSS sy DaisyUI.

Fifindra-monina avy amin'ny Frameworks CSS hafa mankany Tailwind CSS

Mieritreritra ny hifindra amin'ny Tailwind CSS? Fantaro ny fahasamihafana lehibe eo amin'ny Tailwind sy ny rafitra hafa, ary mianara paikady mahomby amin'ny fifindranana ny tetikasanao.

Azonao atao ny mampiasa DivMagic na fitaovana mitovy amin'izany mba hampitomboana ny hafainganam-pandehanao.

Ny fitaovana fampivoarana tranonkala toa an'i DivMagic dia ahafahanao mandika ny singa rehetra amin'ny endrika sy ny fomba rehetra avy amin'ny tranokala amin'ny tsindry iray.

Ohatra Tsotra: Manangana singa karatra mandray andraikitra

Ity misy ohatra iray amin'ny fomba ahafahanao manangana singa karatra mandray andraikitra amin'ny fampiasana Tailwind CSS. Ity singa ity dia ahitana sary, lohateny ary famaritana.

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

Manangana endrika miaraka amin'ny Tailwind CSS

Ny famoronana endrika miaraka amin'ny Tailwind CSS dia tsotra sy intuitive. Ity misy endrika fifandraisana tsotra:

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

Manamboatra CSS Tailwind

Ny Tailwind CSS dia ahafahanao mampifanaraka ny firafitry ny default, mampifanaraka ireo kilasy ilaina amin'ny filanao. Ity ambany ity dia misy ohatra iray amin'ny fomba fanamboarana ny palette miloko.

Ireo ohatra ireo dia mampiseho ny fahaiza-manaony sy ny fahatsoran'ny Tailwind CSS, mampiseho ny fomba ahafahan'izy ireo manampy anao amin'ny famoronana singa web maoderina sy mandray andraikitra amin'ny fomba mahomby sy mahomby.

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

Mila rakitra CSS ve aho?

Ny hany rakitra ilainao amin'ny Tailwind CSS dia ny rakitra tailwind.config.js.

Io rakitra io dia hitazona ny firafitry ny fandrindranao. Tsy hanoratra css ianao na manana rakitra css hafa. Ity rakitra fanamafisana ity ihany no ilainao.

Inona avy ireo fomba fanao tsara indrindra ho an'ny Tailwind CSS?

Raha mila fanazavana amin'ny antsipiriany momba ny fomba fanao tsara indrindra amin'ny Tailwind CSS, azafady jereo ny lahatsoratray Tailwind CSS Best Practices.

Tailwind CSS: Ny hoavin'ny Web Design

Saintsaino ny fomba namolavolan'ny Tailwind CSS ny hoavin'ny famolavolana tranonkala. Mianara momba ny fitaoman'izy io sy ny mety ho fivoarany eo amin'ny indostrian'ny fampivoarana tranonkala.