Tailwind CSS - Hanga tere paetukutuku hou me te kore e whakarere i to HTML

Waihanga Hoahoa Matatini me te ngawari

Ma te Tailwind CSS, ka ngawari te hanga hoahoa uaua. Ko te whakakotahitanga o nga karaehe whaipainga me nga taputapu hoahoa whakautu ka taea e koe te hoahoa i nga whakatakotoranga uaua me te ngawari, me te kore e whakararu i te mahi me te pupuri i to paetukutuku.

Hanga tetahi mea

Ko te ataahua o Tailwind CSS kei roto i tona whaihua. Ka taea e koe te hanga i tetahi mea mai i te wharangi blog ngawari ki te papaaho e-tauhokohoko matatau, i te wa e whakamahi ana i nga karaehe whaipainga mohio.

He iti noa koe na to whakaaro. Ko te rereketanga nui mai i te whakamahi i te Vanilla CSS ko te tere ka taea e koe te hanga hoahoa ritenga.

Ko te huarahi tuku iho mo te whakamahi i nga karaehe css ritenga me nga waahanga html penei i te div, te akomanga div, te akomanga p he waahi tonu engari ko te tere tere ka tae mai me te Tailwind CSS ka ngawari ake to oranga.

Ko nga mahi tino pai kaore e tino mahi

I nga wa o mua, ka tuhia te CSS ma te whakatuu i nga momo ahua o te ao me te whakamahine i runga i te waahanga-a-waahanga. Ahakoa he tikanga rongonui tenei, ka taea e ia te arahi ki te waehere nui, uaua ki te pupuri.

Kei te wero a Tailwind CSS i tenei whakaaro, me te kii ko te CSS-tuatahi e tuku ana he otinga pai ake, he pai ake te tiaki.

Ko te whare pukapuka waahanga tino rongonui mo Tailwind CSS

Ko te daisyUI te whare pukapuka waahanga rongonui rawa atu mo Tailwind CSS, e whakanui ana i nga waahanga 50 i mua i hangaia, 500+ nga karaehe whaipainga, me nga huarahi mutunga kore. Ka tiakina koe mai i te whakahou i te wira i nga wa katoa ka hangaia e koe he kaupapa hou.

Kaua e Hangaia ano te wira i nga wa katoa

Engari ki te moumou taima ki te mahi hoha o te tuhi i nga ingoa maha o nga karaehe mo ia kaupapa hou, ka taea e Tailwind CSS te whakamahi i tetahi huinga o nga karaehe whaipainga.

Ka taea te whakamahi ano enei karaehe me te mahi pai me te riipene CSS, ka whai turanga pakari mo o kaupapa katoa.

Tailwind CSS - He Anga CSS Tuatahi Taputapu

Ko tana kaupapa matua, ko Tailwind CSS he anga mahi CSS tuatahi. Ko te tikanga ka whakarato i nga karaehe whaipainga taumata-iti, tito ka taea e koe te whakamahi ki te hanga i tetahi hoahoa, tika ki to HTML. Kaore he konae CSS mutunga kore, he waehere ngawari me te mohio noa.

Whakamahia nga Ingoa Karaehe Semantic

Ko nga ingoa o te karaehe Semantic e pai ake ai te panui o to waehere, he maamaa ake te maarama ki nga mahi a tetahi akomanga ma te titiro noa ki tona ingoa. Koinei tetahi o nga ahuatanga maha kua tangohia e Tailwind CSS hei whakapai ake i te wheako kaiwhakawhanake.

CSS parakore. Anga Agnostic. Mahi i nga wahi katoa

Kaore a Tailwind CSS e herea koe ki tetahi anga motuhake. He CSS parakore noa, na ka taea e koe te whakamahi me tetahi anga, ahakoa kaore he anga. Ka mahi i nga waahi katoa ka mahi a CSS.

Nga painga o Tailwind CSS

Ko nga painga o te whakamahi i te Tailwind CSS ko te whakanui ake i te hua, te whakaiti i te rahi o te konae CSS, me te wheako kaiwhakawhanake kua pai ake na te tikanga whaipainga-tuatahi. I tua atu, ko te aratau Just-In-Time (JIT) e whakarato ana i nga waa hanga tere-uira, ka tere ake to mahi whanaketanga.

Utu Tailwind CSS

Ko Tailwind CSS he kaupapa tuwhera-puna, ko te tikanga he tino kore utu ki te whakamahi. Ka tae mai te utu ina hiahia koe ki te uru atu ki nga ahuatanga moni penei i nga waahanga UI me nga tauira, ka tukuna ma te Tailwind UI.

He whakaaro me te ngawari i te wa ano

Ko te Tailwind CSS he tino whakaaro me pehea te hanga i to CSS, engari he ngawari ki te tuku whakaritenga. Ma tenei toenga ka taea e koe te aro ki nga mea nui — te hanga UI ataahua.

Nga ahuatanga hou

Kei te awhi a Tailwind CSS i nga ahuatanga hou penei i te Flexbox, Grid, me nga rawa ritenga, he mea tino pai mo te whakawhanake i nga tono tukutuku hou.

Nga whakaritenga mo te whakamahi Tailwind CSS

I mua i to tiimata ki te whakamahi Tailwind CSS, me maarama koe ki te HTML me te CSS.

Ahea te whakamahi Tailwind CSS

He pai te Tailwind CSS mo nga momo kaupapa tukutuku katoa, nui, iti ranei. Mena kei te ngenge koe ki te mamau me CSS me te rapu i tetahi otinga pai ake, he pai ki te kaiwhakawhanake, na Tailwind CSS mo koe.

Kaore i roto i nga anga waahanga?

Mena kaore koe i te pai ki nga anga waahanga penei i te React me te Vue ranei, kaua e awangawanga. Ko te Tailwind CSS he anga-agnostic ka taea te whakamahi me te HTML parakore me te JavaScript.

He ritenga me nga rereke i waenga i te Tailwind CSS me etahi atu anga CSS

Ahakoa ko etahi atu anga penei i a Bootstrap me te Foundation e tuku ana i nga waahanga i hangaia i mua, ka hoatu e Tailwind CSS ki a koe nga taputapu ki te hanga hoahoa tino ritenga me te kore e waiho to HTML. Heoi, na te whakaurunga o nga whare pukapuka penei i te daisyUI, ka taea e koe te pai ki nga ao e rua.

Aratau pouri

Ko tetahi o nga ahuatanga hou o Tailwind CSS me te daisyUI ko te aratau pouri, e taea ai e koe te hanga paetukutuku kaupapa pouri ma te ngawari.

Tauira Flexbox

He pai te whakauru a Tailwind CSS ki nga ahuatanga CSS hou penei i te Flexbox. Hei tauira, ka taea e koe te hanga tahora urupare ma te whakamahi i nga karaehe penei i te flex, justify-center, items-center, me era atu.

Ma te whakakotahitanga o Just-in-Time, ka taea e koe te whakamatau i nga uara karaehe whaipainga rereke. Mena karekau tetahi karaehe whaipainga i mahi, whakarereke noa hei whakarite i to huānga.

He Tauira Tahora Flexbox

Ma te whakamahi i te Tailwind CSS, he ngawari ki te hanga whakatakotoranga uaua penei i te pae whakaterenga aro. Anei he tauira:

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

Nga waahanga kua rite

Mena kua whakatau koe ki te whakamahi i te waehere css tailwind i roto i to kaupapa, ka kitea e koe he maha nga waahanga kua oti te hanga i runga ipurangi. Ka taea e koe te kape i tetahi o enei ka whakarite mo to ake paetukutuku.

Me pehea te huri i te CSS ki te Tailwind CSS

Ko te kaha ki te huri i te CSS ki nga karaehe Tailwind CSS tetahi mea e hiahiatia ana e te nuinga o nga kaihanga. He maha nga paetukutuku kei runga ipurangi i hangaia i mua i te noho a Tailwind CSS. Ka whakamahia e enei wharangi paetukutuku css me te pepa ahua me nga tohunga whakawhanake paetukutuku e hiahia ana ki te heke i enei wharangi ki Tailwind CSS.

Ko te DivMagic he taputapu whanaketanga paetukutuku i hangaia mo te kaiwhakawhanake paetukutuku me nga kaihanga rorohiko. Ka taea e ia te kape mai i te vanilla css ki Tailwind CSS. Ma te panui kotahi, ka taea e koe te huri i tetahi waahanga i runga i te ipurangi ki te Tailwind CSS me te whakamahi i te Tailwind i roto i to kaupapa me te whakarite i te ahua ki te hiahia koe.

Ruku Hohonu ki Tailwind CSS Philosophy

Ko te whakaaro kei muri i te Tailwind CSS ko te aro ki te whaipainga. Ko te tikanga, kaua ki te tautuhi i nga karaehe waahanga, ka whakaratohia e Tailwind CSS nga karaehe whaipainga taumata iti e taea ai e koe te hanga hoahoa ahurei me te kore e whakarere i to HTML.

He aha te neke atu i te CSS tawhito?

Ko te CSS tuku iho ka nui rawa te whakamahi o nga taapiri, nga konae pupuhi, me te 'hupa div'. Ma te huri ki te anga CSS-tuatahi penei i te Tailwind CSS, ka taea e koe te whakamaarama i enei take, ka puta mai he papawaewae maamaa ake.

Ka wheako i te Mana o nga Karaehe Taputapu

Ka awhina nga karaehe taputapu ki a koe ki te karo i te tukurua i nga momo ahua puta noa i o rau ahua. He maataapono tenei mo "Kaua e Whakahoki i a Koe" (MAROKE). Ko enei karaehe ka whakaora i a koe i te waa me te whakapau kaha me te arahi ki te turanga waehere ka taea te pupuri.

Te torotoro i te Tailwind CSS Directives

Ko te Tailwind CSS e whakaatu ana i etahi tohutohu ka taea te whakamahi i roto i o pepa ahua. Ko enei ko @apply , @variants , me @screen. Ma te mohio me te whakamahi i enei tohutohu ka taea te whakanui ake i to wheako Tailwind CSS. Ka taea te whakanoho ki te konae Tailwind Config CSS. Ka taea e koe te tuhi i nga akomanga css ma te whakamahi i tenei huarahi.

Whakaroahia te Tailwind CSS me nga monomai

Ka taea te taapiri Tailwind CSS me nga monomai, me te taapiri i nga mahi hou, te whakarite ranei i te mea o mua. Akohia me pehea te whakamahi i nga monomai hei whakanui ake i te pai me te rerehua o o kaupapa tukutuku.

Whakaurua Tailwind CSS ki To Rerenga Mahi

Ko te whakauru i te Tailwind CSS ki roto i to rerenga mahi whanaketanga he maamaa, ahakoa kei te whakamahi koe i nga taputapu hanga penei i te Webpack, Parcel ranei, kei te mahi me nga anga penei i a Next.js, Gatsby ranei.

Whakanuia te Urunga me te Tailwind CSS

Ka whakatenatena a Tailwind CSS i te hoahoa uru ma te whakauru i nga momo huanga ARIA i roto i ana akomanga. Waihangahia nga atanga ngawari ake me te whakarei ake i te wheako kaiwhakamahi mo te katoa.

Whakamahia te Mana o Flexbox me te Matiti me Tailwind CSS

Whakamahia nga waahanga tahora CSS hou penei i te Flexbox me te Matiti me te Tailwind CSS. Akohia me pehea te whakamahi i nga karaehe whaipainga hei whakahaere i te whakatakotoranga ma te ngawari me te aro.

Me pehea te patuiro i o Kaupapa CSS Tailwind

Ka whakaratohia e Tailwind CSS etahi taputapu patuiro me nga tikanga e ngawari ai te tautuhi me te whakaoti i nga take whakaahua. Kia mohio ki enei taputapu me te whakarei ake i o pukenga patuiro.

Waihangatia he Tukutuku Tae me te Tailwind CSS

Ka tae mai a Tailwind CSS me te papatae whanui o nga tae ka taea te whakarite. Akohia me pehea te whakamahi me te whakarite i enei tae ki te hanga hoahoa hihiri me te titiro.

Whakawhanake Tere me te Aratau JIT Tailwind CSS

Ruku hohonu ki te aratau Just-In-Time a Tailwind CSS. Kia mohio koe me pehea te mahi me te pehea e tere ake ai to whanaketanga me to waa hanga.

Mai i te Kore ki te Toa: Master Tailwind CSS

Haere ki te haere ki te whakahaere i te Tailwind CSS. Mai i te whakatuu i to taiao ki te torotoro i nga kaupapa matatau, kua hipokina e koe tenei aratohu matawhānui.

Whakaritea Tailwind CSS ki o hiahia

Ko tetahi o nga kaha nui o Tailwind CSS ko tona ngawari. Akohia me pehea te whakarite Tailwind kia rite ki nga hiahia motuhake o to kaupapa.

Te Mahi-a-ringa me Tailwind CSS

Whakauru ki te ako-a-ringa ma te raupapa o nga tauira mahi. Torotoro me pehea te hanga momo momo waahanga tukutuku ma te whakamahi i te Tailwind CSS me te DaisyUI.

Heke mai i etahi atu anga CSS ki Tailwind CSS

Kei te whakaaro ki te huri ki Tailwind CSS? Kia mohio ki nga rereketanga nui i waenga i a Tailwind me etahi atu anga, ka ako i nga rautaki whai hua mo te heke i o kaupapa.

Ka taea e koe te whakamahi i te DivMagic, i nga taputapu rite ranei hei whakanui ake i to tere heke.

Ko nga taputapu whanaketanga paetukutuku penei i te DivMagic ka taea e koe te kape i tetahi huānga tetahi hoahoa me tetahi momo mai i tetahi paetukutuku me te paato kotahi.

He Tauira Maamaa: Hangaia he Waahanga Kaari Whakautu

Anei tetahi tauira mo te hanga i tetahi waahanga kaari urupare ma te whakamahi i te Tailwind CSS. Kei roto i tenei waahanga he ahua, he taitara, he whakaahuatanga.

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

Hangaia he Puka me Tailwind CSS

Ko te hanga i tetahi puka me te Tailwind CSS he maamaa, he maamaa hoki. Anei he puka whakapā ngawari:

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

Whakaritea Tailwind CSS

Ko te Tailwind CSS ka taea e koe te whakarite i tana whirihoranga taunoa, me te whakarite i nga karaehe whaipainga ki o hiahia. Kei raro iho he tauira mo te whakarite i te papatae tae.

Ko enei tauira e whakaatu ana i te ngawari me te ngawari o Tailwind CSS, e whakaatu ana me pehea e taea ai e koe te awhina i a koe ki te hanga i nga waahanga tukutuku hou, whakautu pai me te whai hua.

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

Ka hiahia ahau ki tetahi konae CSS?

Ko te konae anake me Tailwind CSS ko te konae tailwind.config.js.

Ma taua kōnae e pupuri i o tautuhinga whirihoranga. Kare koe e tuhi css, he konae css ke atu ranei. Ko tenei kōnae whirihoranga anake ka hiahia koe.

He aha nga mahi pai mo Tailwind CSS?

Mo te whakamaarama taipitopito mo nga whakaritenga pai a Tailwind CSS, tirohia ta maatau tuhinga Tailwind CSS Best Practices.

Tailwind CSS: Te heke mai o te Hoahoa Tukutuku

Whakaarohia te ahua o te Tailwind CSS ki te hanga i te ahua o te hoahoa paetukutuku. Akohia tona awe me te kaha mo te tipu i roto i te umanga whanaketanga paetukutuku.