Tailwind CSS - E hana wikiwiki i nā pūnaewele hou me ka haʻalele ʻole i kāu HTML

Hana i nā hoʻolālā paʻakikī me ka maʻalahi

Me Tailwind CSS, hana i nā hoʻolālā paʻakikī e lilo i makani. ʻO ka hui pū ʻana o nā papa hana pono a me nā pono hoʻolālā pane e hiki ai iā ʻoe ke hoʻolālā i nā hoʻolālā paʻakikī me ka maʻalahi, me ka ʻole o ka hoʻololi ʻana i ka hana a me ka mālama ʻana o kāu pūnaewele.

E kūkulu i kekahi mea

ʻO ka nani o Tailwind CSS aia i kona versatility. Hiki iā ʻoe ke hana i kekahi mea mai kahi ʻaoʻao blog maʻalahi i kahi kahua e-commerce holomua, ʻoiai e hoʻohana ana i nā papa hana intuitive like.

Ua kaupalena wale ʻia ʻoe e kou noʻonoʻo. ʻO ka ʻokoʻa nui mai ka hoʻohana ʻana iā Vanilla CSS ʻo ka wikiwiki e hiki ai iā ʻoe ke kūkulu i nā hoʻolālā maʻamau.

ʻO ke ala kuʻuna o ka hoʻohana ʻana i nā papa css maʻamau me nā ʻāpana html e like me div, div class, p class he koho mau akā ʻo ka hoʻomaikaʻi wikiwiki e hele mai me Tailwind CSS e maʻalahi kou ola.

ʻAʻole hana maoli nā hana maikaʻi loa

ʻO ka mea maʻamau, ua kākau ʻia ʻo CSS ma ka hoʻokumu ʻana i kahi hoʻonohonoho o nā ʻano honua a hoʻomaʻemaʻe iā lākou ma ke ʻano o nā ʻāpana. ʻOiai he ala kaulana kēia, hiki iā ia ke alakaʻi i ka code nui, paʻakikī e mālama.

Hoʻopiʻi ʻo Tailwind CSS i kēia manaʻo, me ka hoʻopaʻapaʻa ʻana e hāʻawi ka CSS pono-mua i kahi hopena maʻemaʻe, ʻoi aku ka mālama ʻana.

ʻO ka waihona waihona mea kaulana loa no Tailwind CSS

ʻO daisyUI ka waihona mea kaulana loa no Tailwind CSS, e kaena ana ma luna o 50 mau mea i hoʻolālā mua ʻia, 500+ mau papa pono, a me nā mea hiki ʻole ke pau. Mālama ia iā ʻoe mai ka hana hou ʻana i ka huila i kēlā me kēia manawa āu e hana ai i kahi papahana hou.

Mai hana hou i ka huila i kēlā me kēia manawa

Ma kahi o ka hoʻopau ʻana i kou manawa me ke kaʻina hana luhi o ke kākau ʻana i nā inoa papa he nui no kēlā me kēia papahana hou, hiki iā Tailwind CSS iā ʻoe ke hoʻohana i kahi pūʻulu o nā papa pono i wehewehe maikaʻi ʻia.

Hiki ke hoʻohana hou ʻia kēia mau papa a hana like me ka CSS cascade, hāʻawi iā ʻoe i kumu paʻa no kāu mau papahana āpau.

Tailwind CSS - He Utility First CSS Framework

Ma kāna kumu, ʻo Tailwind CSS kahi hoʻolālā CSS pono-mua. Hāʻawi kēia i nā papa haʻahaʻa haʻahaʻa, hiki iā ʻoe ke hoʻohana e kūkulu i kekahi hoʻolālā, pololei i kāu HTML. ʻAʻohe faila CSS pau ʻole, code maʻalahi a intuitive wale nō.

E hoʻohana i nā inoa papa Semantic

Hoʻomaikaʻi nā inoa papa Semantic i ka heluhelu ʻana o kāu code, e maʻalahi ka hoʻomaopopo ʻana i ka hana a kahi papa kikoʻī ma ka nānā ʻana i kona inoa. ʻO kēia kekahi o nā hiʻohiʻona nui a Tailwind CSS i hoʻohana e hoʻomaikaʻi i ka ʻike hoʻomohala.

CSS maemae. Hoʻolālā Agnostic. Hana ma na wahi a pau

ʻAʻole hoʻopaʻa ʻo Tailwind CSS iā ʻoe i kekahi ʻano kikoʻī. He CSS maʻemaʻe wale nō ia, no laila hiki iā ʻoe ke hoʻohana me kekahi ʻano hana, a ʻaʻole hoʻi me ka ʻole ʻole. Hana ia ma nā wahi āpau e hana ai ka CSS.

Nā pōmaikaʻi o Tailwind CSS

ʻO nā pōmaikaʻi o ka hoʻohana ʻana iā Tailwind CSS ka hoʻonui ʻana i ka huahana, hoʻemi ʻia ka nui o ka faila CSS, a me kahi ʻike hoʻomohala i hoʻonui ʻia ma muli o ke ʻano hana pono-mua. Hoʻohui ʻia, hāʻawi ke ʻano Just-In-Time (JIT) i nā manawa kūkulu wikiwiki ʻana i ka uila, ʻoi aku ka wikiwiki o kāu kaʻina hana.

Kumukūʻai CSS Tailwind

He papahana open-source ʻo Tailwind CSS, ʻo ia hoʻi he manuahi loa ia e hoʻohana. Hele mai ke kumukūʻai inā makemake ʻoe e komo i nā hiʻohiʻona premium e like me nā ʻāpana UI a me nā templates, i hāʻawi ʻia ma o Tailwind UI.

He manaʻo a maʻalahi i ka manawa like

Hāʻawi ʻo Tailwind CSS i kahi manaʻo ikaika e pili ana i ka hoʻolālā ʻana i kāu CSS, akā hiki ke maʻalahi e ʻae i ka hana maʻamau. Hiki i kēia kaulike ke nānā aku i ka mea nui loa - ke kūkulu ʻana i nā UI nani.

Nā hiʻohiʻona hou

Hoʻopili ʻo Tailwind CSS i nā hiʻohiʻona hou e like me Flexbox, Grid, a me nā waiwai maʻamau, e lilo ia i koho maikaʻi loa no ka hoʻomohala ʻana i nā noi pūnaewele hou.

Nā mea e pono ai no ka hoʻohana ʻana iā Tailwind CSS

Ma mua o kou hoʻomaka ʻana e hoʻohana iā Tailwind CSS, pono ʻoe i kahi ʻike kumu o HTML a me CSS.

I ka wā e hoʻohana ai iā Tailwind CSS

He kūpono ʻo Tailwind CSS no nā ʻano papahana pūnaewele āpau, nui a liʻiliʻi paha. Inā luhi ʻoe i ka hakakā ʻana me CSS a ke ʻimi nei i kahi hopena ʻoi aku ka maikaʻi a me ka hoʻomohala ʻana, a laila ʻo Tailwind CSS no ʻoe.

ʻAʻole i loko o nā papa hana?

Inā ʻaʻole ʻoe makemake i nā ʻāpana hana e like me React a i ʻole Vue, ʻaʻohe hopohopo. He framework-agnostic ka CSS Tailwind a hiki ke hoʻohana ʻia me HTML maʻemaʻe a me JavaScript.

Nā ʻano like a me nā ʻokoʻa ma waena o Tailwind CSS a me nā CSS Frameworks ʻē aʻe

ʻOiai e hāʻawi ana nā papa hana ʻē aʻe e like me Bootstrap a me Foundation i nā mea i hoʻolālā mua ʻia, hāʻawi ʻo Tailwind CSS iā ʻoe i nā mea hana e kūkulu ai i nā hoʻolālā maʻamau me ka haʻalele ʻole i kāu HTML. Eia nō naʻe, me ka hoʻohui ʻana o nā waihona waihona e like me daisyUI, hiki iā ʻoe ke hauʻoli i ka maikaʻi o nā ao ʻelua.

ʻAno ʻeleʻele

ʻO kekahi o nā hiʻohiʻona hou o Tailwind CSS a me daisyUI ʻo ke ʻano ʻeleʻele, e hiki ai iā ʻoe ke hana i nā pūnaewele ʻeleʻele me ka maʻalahi.

Laʻana Flexbox

Hoʻohui maikaʻi ʻo Tailwind CSS me nā hiʻohiʻona CSS hou e like me Flexbox. No ka laʻana, hiki iā ʻoe ke hana i kahi hoʻolālā pane me ka hoʻohana ʻana i nā papa e like me flex, justify-center, items-center, a pēlā aku.

Me ka hui pū ʻana o Just-in-Time, hiki iā ʻoe ke hoʻāʻo maʻalahi i nā waiwai papa hana like ʻole. Inā ʻaʻole i hana kekahi papa pono, e hoʻololi wale ia e hoʻopilikino i kāu mea.

He Laʻana Hoʻolālā Flexbox

Me ka hoʻohana ʻana iā Tailwind CSS, maʻalahi ka hana ʻana i nā hoʻolālā paʻakikī e like me kahi pae hoʻokele pane. Eia kekahi laʻana:

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

Nā mea i hoʻomākaukau ʻia

Inā hoʻoholo ʻoe e hoʻohana i ka tailwind css code i kāu pāhana, hiki iā ʻoe ke ʻimi i nā ʻāpana premade he nui ma ka pūnaewele. Hiki iā ʻoe ke kope i kekahi o kēia mau mea a hoʻopilikino no kāu pūnaewele ponoʻī.

Pehea e hoʻololi ai i CSS i Tailwind CSS

ʻO ka hiki ke hoʻololi i ka CSS i nā papa CSS Tailwind kahi mea e pono ai ka hapa nui o nā mea hoʻomohala. Nui nā pūnaewele ma ka pūnaewele i kūkulu ʻia ma mua o ka noho ʻana o Tailwind CSS. Hoʻohana kēia mau ʻaoʻao pūnaewele i ka css me ka stylesheet a makemake ka poʻe loea hoʻomohala pūnaewele e neʻe i kēia mau ʻaoʻao i Tailwind CSS.

ʻO DivMagic kahi mea hana hoʻomohala pūnaewele i kūkulu ʻia no ka mea hoʻomohala pūnaewele a me nā mea hoʻomohala polokalamu. Hiki iā ia ke kope kope i kekahi ʻano mai vanilla css a i Tailwind CSS. Me hoʻokahi kaomi, hiki iā ʻoe ke hoʻololi i kekahi ʻāpana ma ka pūnaewele i Tailwind CSS a hoʻohana iā Tailwind i kāu papahana a hana i ke ʻano i ke ʻano āu e makemake ai.

Luʻu hohonu i loko o Tailwind CSS Philosophy

ʻO ke kumumanaʻo ma hope o Tailwind CSS e kālele i ka pono. ʻO ke ʻano o kēia ma kahi o ka wehewehe ʻana i nā papa ʻāpana, hāʻawi ʻo Tailwind CSS i nā papa haʻahaʻa haʻahaʻa e hiki ai iā ʻoe ke kūkulu i nā hoʻolālā kūʻokoʻa me ka haʻalele ʻole i kāu HTML.

No ke aha e neʻe ai i kahi CSS kuʻuna?

Hiki i ka CSS kuʻuna ke hoʻohana nui i nā overrides, nā faila bloated, a me ka 'div soup'. Ma ka hoʻololi ʻana i kahi hoʻolālā CSS pono-mua e like me Tailwind CSS, hiki iā ʻoe ke hoʻohaʻahaʻa i kēia mau pilikia, ka hopena i kahi codebase maʻemaʻe a maʻalahi.

E ʻike i ka mana o nā papa hana pono

Kōkua nā papa hoʻohana iā ʻoe e pale i ka hana hou ʻana i nā ʻano like ʻole i loko o kāu pepa style. He kumu ia o "Mai Hana Hou iā ʻoe iho" (DRY). Mālama kēia mau papa iā ʻoe i ka manawa nui a me ka hoʻoikaika ʻana a alakaʻi i kahi codebase mālama ʻia.

Ke ʻimi nei i nā kuhikuhi CSS Tailwind

Hoʻokomo ʻo Tailwind CSS i kekahi mau kuhikuhi i hiki ke hoʻohana ʻia i loko o kāu ʻano pepa. Aia kēia mau mea @apply , @variants , a me @screen. ʻO ka hoʻomaopopo ʻana a me ka hoʻohana ʻana i kēia mau kuhikuhi hiki ke hoʻonui nui i kāu ʻike Tailwind CSS. Hiki ke hoʻokomo ʻia kēia mau mea i loko o ka faila Tailwind Config CSS. Hiki iā ʻoe ke kākau i nā papa css me ka hoʻohana ʻana i kēia ala.

Hoʻonui i ka Tailwind CSS me nā Plugins

Hiki ke hoʻonui ʻia ʻo Tailwind CSS me nā plugins, e hoʻohui i nā hana hou a i ʻole e hana maʻamau i ka mea i loaʻa. E aʻo pehea e hoʻohana ai i nā plugins e hoʻonui i ka pono a me ka nani o kāu mau papahana pūnaewele.

E hoʻokomo i ka CSS Tailwind i kāu Kaʻina Hana

ʻO ka hoʻohui ʻana iā Tailwind CSS i kāu kaʻina hana hoʻomohala maʻalahi, inā ʻoe e hoʻohana ana i nā mea hana e like me Webpack a i ʻole Parcel, a i ʻole e hana pū me nā frameworks e like me Next.js a i ʻole Gatsby.

E hoʻonui i ka hiki me Tailwind CSS

Paipai ʻo Tailwind CSS i ka hoʻolālā hiki ke komo ma o ka hoʻokomo ʻana i nā ʻano ʻano ARIA i loko o kāna mau papa. E hana i nā pilina maʻalahi a hoʻonui i ka ʻike mea hoʻohana no kēlā me kēia.

Hoʻohana i ka mana o Flexbox a me Grid me Tailwind CSS

Hoʻohana i nā modula hoʻolālā CSS hou e like me Flexbox a me Grid me Tailwind CSS. E aʻo pehea e hoʻohana ʻia ai nā papa pono no ka hoʻomalu ʻana i ka hoʻolālā ma ke ʻano maʻalahi a pane.

Pehea e hoʻopau ai i kāu mau papahana CSS Tailwind

Hāʻawi ʻo Tailwind CSS i nā mea hana debugging a me nā ʻenehana e maʻalahi ka ʻike a me ka hoʻoponopono ʻana i nā pilikia styling. E hoʻomaopopo i kēia mau mea hana a hoʻonui i kāu mau mākau debugging.

E hana i kahi pūnaewele waihoʻoluʻu me Tailwind CSS

Hele mai ʻo Tailwind CSS me kahi palette ākea o nā kala hiki ke hana. E aʻo i ka hoʻohana ʻana a me ka hoʻopilikino ʻana i kēia mau kala e hana i nā hoʻolālā nani a nani hoʻi.

E hoʻomohala wikiwiki me ke ʻano JIT Tailwind CSS

E ʻimi hohonu i ke ʻano Just-In-Time o Tailwind CSS. E hoʻomaopopo i ke ʻano o ka hana a pehea e hiki ai iā ia ke wikiwiki i kāu hoʻomohala ʻana a me ke kūkulu ʻana i nā manawa.

Mai Zero a Hero: Master Tailwind CSS

E hoʻomaka i kahi huakaʻi e aʻo iā Tailwind CSS. Mai ka hoʻonohonoho ʻana i kou kaiapuni a i ka ʻimi ʻana i nā kumuhana holomua, ua uhi ʻia kēia alakaʻi piha iā ʻoe.

Hoʻopilikino iā Tailwind CSS i kāu makemake

ʻO kekahi o nā ikaika nui o Tailwind CSS ʻo kona maʻalahi. E aʻo pehea e hana ai iā Tailwind e kūpono i nā pono kikoʻī o kāu papahana.

Hoʻohana lima me Tailwind CSS

E komo i ke aʻo lima lima ma o ke ʻano o nā hiʻohiʻona kūpono. E ʻimi pehea e kūkulu ai i nā ʻāpana pūnaewele like ʻole me Tailwind CSS a me DaisyUI.

Ke neʻe nei mai nā CSS Frameworks ʻē aʻe i Tailwind CSS

Ke noʻonoʻo nei e hoʻololi iā Tailwind CSS? E hoʻomaopopo i nā ʻokoʻa nui ma waena o Tailwind a me nā papa hana ʻē aʻe, a e aʻo i nā hoʻolālā kūpono no ka neʻe ʻana i kāu mau papahana.

Hiki iā ʻoe ke hoʻohana iā DivMagic a i ʻole nā ​​​​mea hana like e hoʻonui nui ai i kou wikiwiki.

ʻO nā mea hana hoʻomohala pūnaewele e like me DivMagic e ʻae iā ʻoe e kope i kekahi mea i kēlā me kēia hoʻolālā a me kekahi ʻano mai kekahi pūnaewele me hoʻokahi kaomi.

He Laʻana Maʻalahi: Ke kūkulu ʻana i kahi ʻāpana kāleka pane

Eia kahi laʻana o ke kūkulu ʻana i kahi ʻāpana kāleka pane me ka Tailwind CSS. Loaʻa i kēia ʻāpana kekahi kiʻi, poʻo inoa, a me kahi wehewehe.

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

Ke kūkulu ʻana i kahi palapala me Tailwind CSS

He maʻalahi ka hana ʻana i kahi palapala me Tailwind CSS. Eia kahi palapala hoʻopili maʻalahi:

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

Hoʻopilikino iā Tailwind CSS

Hāʻawi ʻo Tailwind CSS iā ʻoe e hana i kāna hoʻonohonoho paʻamau, e hoʻopili i nā papa pono i kāu mau pono. Aia ma lalo iho kahi laʻana o ka hoʻopilikino ʻana i ka papa kala.

Hōʻike kēia mau hiʻohiʻona i ka maʻalahi a me ka maʻalahi o Tailwind CSS, e hōʻike ana pehea e hiki ai iā lākou ke kōkua iā ʻoe i ka hana ʻana i nā ʻāpana pūnaewele pane a me ka maikaʻi.

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

Makemake au i kekahi faila CSS?

ʻO ka faila wale nō āu e pono ai me Tailwind CSS ʻo ia ka faila tailwind.config.js.

Na kēlā faila e mālama i kāu mau hoʻonohonoho hoʻonohonoho. ʻAʻole ʻoe e kākau css a i ʻole he faila css ʻē aʻe. ʻO kēia faila hoʻonohonoho ka mea āu e pono ai.

He aha nā hana maikaʻi loa no Tailwind CSS?

No ka wehewehe kikoʻī e pili ana i nā hana maikaʻi loa o Tailwind CSS, e ʻoluʻolu e ʻike i kā mākou ʻatikala ʻO Tailwind CSS Best Practices.

Tailwind CSS: ʻO ka hope o ka hoʻolālā pūnaewele

E noʻonoʻo i ka hana ʻana o Tailwind CSS i ka wā e hiki mai ana o ka hoʻolālā pūnaewele. E aʻo e pili ana i kona mana a me ka hiki ke ulu i ka ʻoihana hoʻomohala pūnaewele.