Tailwind CSS - Kọ awọn oju opo wẹẹbu ode oni ni iyara laisi fifi HTML rẹ silẹ

Ṣẹda Awọn apẹrẹ eka pẹlu irọrun

Pẹlu Tailwind CSS, ṣiṣẹda awọn aṣa eka di afẹfẹ. Ijọpọ ti awọn kilasi ohun elo ati awọn ohun elo apẹrẹ idahun ngbanilaaye lati ṣe apẹrẹ awọn ipilẹ intricate pẹlu irọrun, laisi ibajẹ lori iṣẹ ṣiṣe ati itọju oju opo wẹẹbu rẹ.

Kọ ohunkohun

Awọn ẹwa ti Tailwind CSS wa da ni awọn oniwe-versatility. O le ṣẹda ohunkohun lati oju-iwe bulọọgi ti o rọrun si pẹpẹ e-commerce ti ilọsiwaju, gbogbo lakoko lilo awọn kilasi ohun elo ogbon inu kanna.

O ti wa ni opin nikan nipasẹ oju inu rẹ. Iyatọ akọkọ lati lilo Vanilla CSS ni iyara ninu eyiti o le kọ awọn aṣa aṣa.

Ọna ibile ti lilo awọn kilasi css aṣa pẹlu awọn paati HTML bii div, kilasi div, kilasi p nigbagbogbo jẹ aṣayan ṣugbọn ilọsiwaju iyara ti o wa pẹlu Tailwind CSS jẹ ki igbesi aye rẹ rọrun.

Awọn iṣe ti o dara julọ ko ṣiṣẹ gangan

Ni aṣa, CSS jẹ kikọ nipasẹ idasile akojọpọ awọn aṣa agbaye ati isọdọtun wọn lori ipilẹ paati-nipasẹ-paati. Lakoko ti eyi jẹ ọna olokiki, o le ja si olopobobo, koodu lile lati ṣetọju.

Tailwind CSS koju imọran yii, jiyàn pe IwUlO-akọkọ CSS nfunni ni mimọ, ojutu itọju diẹ sii.

Ile-ikawe paati olokiki julọ fun Tailwind CSS

daisyUI jẹ ile-ikawe paati olokiki julọ fun Tailwind CSS, ti o nṣogo lori awọn paati 50 ti a ṣe tẹlẹ, awọn kilasi iwulo 500+, ati awọn aye ailopin. O gba o lati a reinventing kẹkẹ ni gbogbo igba ti o ṣẹda titun kan ise agbese.

Maa ko Tun-pilẹ Kẹkẹ Ni gbogbo igba

Dipo ki o padanu akoko rẹ pẹlu ilana ti o nira ti kikọ awọn dosinni ti awọn orukọ kilasi fun iṣẹ akanṣe tuntun kọọkan, Tailwind CSS ngbanilaaye lati lo asọye daradara, eto atunmọ ti awọn kilasi iwulo.

Awọn kilasi wọnyi jẹ atunlo ati ṣiṣẹ ni ibamu pẹlu kasikedi CSS, pese fun ọ ni ipilẹ to lagbara fun gbogbo awọn iṣẹ akanṣe rẹ.

Tailwind CSS – A IwUlO First CSS Framework

Ni ipilẹ rẹ, Tailwind CSS jẹ ilana CSS akọkọ-iwUlO. Eyi tumọ si pe o pese ipele kekere, awọn kilasi iwUlO idapọ ti o le lo lati kọ eyikeyi apẹrẹ, taara ninu HTML rẹ. Ko si awọn faili CSS ailopin diẹ sii, nikan rọrun ati koodu ogbon.

Lo Awọn orukọ Kilasi Itumọ

Awọn orukọ kilasi atunmọ ṣe ilọsiwaju kika ti koodu rẹ, jẹ ki o rọrun lati ni oye kini kilasi kan ṣe kan nipa wiwo orukọ rẹ. Eyi jẹ ọkan ninu ọpọlọpọ awọn ẹya ti Tailwind CSS ti gba lati ni ilọsiwaju iriri idagbasoke.

CSS mimọ. Framework Agnostic. Ṣiṣẹ Nibikibi

Tailwind CSS ko dè ọ si eyikeyi ilana kan pato. O rọrun CSS mimọ, nitorinaa o le lo pẹlu ilana eyikeyi, tabi paapaa laisi ilana rara. O ṣiṣẹ nibi gbogbo ti CSS ṣiṣẹ.

Awọn anfani ti Tailwind CSS

Awọn anfani ti lilo Tailwind CSS pẹlu iṣelọpọ ti o pọ si, iwọn faili CSS ti o dinku, ati iriri idagbasoke idagbasoke nitori ilana-iwUlO-akọkọ. Ni afikun, ipo Just-In-Time (JIT) n pese awọn akoko kikọ ina-yara, ni iyara siwaju ilana idagbasoke rẹ.

Iye owo Tailwind CSS

Tailwind CSS jẹ iṣẹ akanṣe orisun-ìmọ, eyiti o tumọ si pe o ni ọfẹ patapata lati lo. Iye idiyele naa wa nigbati o fẹ wọle si awọn ẹya Ere bii awọn paati UI ati awọn awoṣe, eyiti a funni nipasẹ Tailwind UI.

O jẹ ero ati rọ ni akoko kanna

Tailwind CSS n pese ero ti o lagbara lori bi o ṣe le ṣe agbekalẹ CSS rẹ, sibẹ o rọ to lati gba isọdi laaye. Iwọntunwọnsi yii jẹ ki o dojukọ ohun ti o ṣe pataki julọ - kikọ awọn UI ẹlẹwa.

Modern awọn ẹya ara ẹrọ

Tailwind CSS gba awọn ẹya ode oni bii Flexbox, Grid, ati awọn ohun-ini aṣa, ṣiṣe ni yiyan nla fun idagbasoke awọn ohun elo wẹẹbu ode oni.

Awọn ibeere fun Lilo Tailwind CSS

Ṣaaju ki o to bẹrẹ lilo Tailwind CSS, o nilo oye ipilẹ ti HTML ati CSS.

Nigbati Lati Lo Tailwind CSS

Tailwind CSS dara fun gbogbo iru awọn iṣẹ akanṣe wẹẹbu, nla tabi kekere. Ti o ba rẹ o ti jijakadi pẹlu CSS ati wiwa fun imunadoko diẹ sii, ojutu ore-olugbegbega, lẹhinna Tailwind CSS jẹ fun ọ.

Ko sinu awọn ilana paati?

Ti o ko ba jẹ olufẹ ti awọn ilana paati bi React tabi Vue, ko si aibalẹ. Tailwind CSS jẹ ilana-agnostic ati pe o le ṣee lo pẹlu HTML ati JavaScript mimọ.

Awọn ibajọra ati Awọn Iyatọ Laarin Tailwind CSS ati Awọn Ilana CSS miiran

Lakoko ti awọn ilana miiran bii Bootstrap ati Foundation nfunni awọn paati ti a ṣe tẹlẹ, Tailwind CSS fun ọ ni awọn irinṣẹ lati kọ awọn aṣa aṣa patapata laisi fifi HTML rẹ silẹ. Sibẹsibẹ, pẹlu iṣọpọ ti awọn ile-ikawe paati bii daisyUI, o le ni bayi gbadun ohun ti o dara julọ ti awọn agbaye mejeeji.

Ipo Dudu

Ọkan ninu awọn ẹya tuntun ti Tailwind CSS ati daisyUI ni ipo dudu, eyiti o fun ọ laaye lati ṣẹda awọn oju opo wẹẹbu ti o ni dudu lainidi.

Apeere Flexbox

Tailwind CSS ṣepọ daradara pẹlu awọn ẹya CSS ode oni bii Flexbox. Fun apẹẹrẹ, o le ṣẹda ipilẹ idahun nipa lilo awọn kilasi bii Flex, aarin-idalare, aarin awọn ohun kan, ati bẹbẹ lọ.

Pẹlu apapọ ti Akoko-ni-akoko, o le gbiyanju awọn iye kilasi ohun elo oriṣiriṣi ni irọrun. Ti kilasi ohun elo kan ko ba ṣiṣẹ, yi pada nirọrun lati ṣe akanṣe ipin rẹ.

Apẹẹrẹ Ifilelẹ Flexbox kan

Lilo Tailwind CSS, o rọrun lati ṣẹda awọn ipalemo idiju bii igi lilọ kiri ti o ni idahun. Eyi ni apẹẹrẹ:

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

Ṣetan-ṣe irinše

Ti o ba pinnu lati lo koodu css iru afẹfẹ ninu iṣẹ akanṣe rẹ, iwọ yoo ni anfani lati wa ọpọlọpọ awọn paati ti a ti ṣe tẹlẹ lori ayelujara. O le daakọ eyikeyi ninu iwọnyi ati ṣe akanṣe fun oju opo wẹẹbu tirẹ.

Bii o ṣe le yipada CSS si Tailwind CSS

Ni anfani lati yi CSS pada si awọn kilasi Tailwind CSS jẹ nkan ti ọpọlọpọ awọn olupilẹṣẹ nilo. Ọpọlọpọ awọn oju opo wẹẹbu wa lori intanẹẹti ti a ṣe ṣaaju Tailwind CSS wa. Awọn oju-iwe wẹẹbu wọnyi lo css pẹlu iwe aṣa ati awọn alamọdaju idagbasoke wẹẹbu fẹ lati jade lọ si awọn oju-iwe wọnyi si Tailwind CSS.

DivMagic jẹ ohun elo idagbasoke wẹẹbu ti a ṣe fun idagbasoke wẹẹbu ati awọn olupilẹṣẹ sọfitiwia. O gba eyikeyi ara laaye lati daakọ lati fanila css si Tailwind CSS. Pẹlu ọkan tẹ, o le ṣe iyipada eyikeyi paati lori intanẹẹti si Tailwind CSS ki o lo Tailwind ninu iṣẹ akanṣe rẹ ki o ṣe aṣa aṣa ni ọna ti o fẹ.

Dive Jin sinu Tailwind CSS Philosophy

Imọye ti o wa lẹhin Tailwind CSS ni lati dojukọ ohun elo. Eyi tumọ si dipo asọye awọn kilasi paati tẹlẹ, Tailwind CSS n pese awọn kilasi iwulo ipele kekere ti o jẹ ki o ṣe awọn aṣa alailẹgbẹ laisi fifi HTML rẹ silẹ.

Kini idi ti Lọ kuro ni CSS Ibile?

CSS ti aṣa le fa iloju lilo awọn ifasilẹ, awọn faili gbin, ati 'ọbẹ div'. Nipa yiyi pada si IwUlO-akọkọ CSS ilana bi Tailwind CSS, o le din awon oran wọnyi mu, Abajade ni a regede, diẹ streamlined codebase.

Ni iriri Agbara Awọn kilasi IwUlO

Awọn kilasi IwUlO ṣe iranlọwọ fun ọ lati yago fun atunwi awọn aṣa kanna jakejado awọn iwe aṣa rẹ. O jẹ ilana ti “Maṣe Tun Ara Rẹ Tun” (DRY). Awọn kilasi wọnyi ṣafipamọ akoko pataki ati ipa ati yorisi koodu mimọ ti o le ṣetọju giga.

Ṣiṣawari Awọn Itọsọna Tailwind CSS

Tailwind CSS ṣafihan awọn itọsọna diẹ ti o le ṣee lo laarin awọn iwe aṣa rẹ. Iwọnyi pẹlu @apply, @variants, ati @iboju. Loye ati lilo awọn itọsọna wọnyi le mu iriri CSS Tailwind rẹ ga pupọ. Awọn wọnyi le wa ni gbe sinu Tailwind Config CSS faili. O le kọ awọn kilasi css ni lilo ọna yii.

Fa Tailwind CSS pẹlu Awọn afikun

Tailwind CSS le faagun pẹlu awọn afikun, fifi iṣẹ ṣiṣe tuntun kun tabi isọdi ti o wa tẹlẹ. Kọ ẹkọ bi o ṣe le lo awọn afikun lati mu iṣẹ ṣiṣe ati ẹwa ti awọn iṣẹ akanṣe wẹẹbu rẹ pọ si.

Ṣafikun Tailwind CSS sinu Sisẹ-iṣẹ Rẹ

Ṣiṣẹpọ Tailwind CSS sinu iṣan-iṣẹ idagbasoke rẹ jẹ taara, boya o nlo awọn irinṣẹ kikọ bii Webpack tabi Parcel, tabi ṣiṣẹ pẹlu awọn ilana bii Next.js tabi Gatsby.

Ṣe ilọsiwaju Wiwọle pẹlu Tailwind CSS

Tailwind CSS ṣe iwuri fun apẹrẹ iraye si nipasẹ pẹlu ọpọlọpọ awọn abuda ARIA ni awọn kilasi rẹ. Ṣẹda diẹ sii awọn atọkun wiwọle ati mu iriri olumulo pọ si fun gbogbo eniyan.

Ṣe ijanu Agbara Flexbox ati Akoj pẹlu Tailwind CSS

Lo awọn modulu akọkọ CSS ode oni bii Flexbox ati Grid pẹlu Tailwind CSS. Kọ ẹkọ bii awọn kilasi iwulo ṣe le ṣee lo lati ṣakoso ifilelẹ ni irọrun ati ọna idahun.

Bii o ṣe le ṣatunṣe Awọn iṣẹ akanṣe CSS Tailwind Rẹ

Tailwind CSS n pese ọpọlọpọ awọn irinṣẹ n ṣatunṣe aṣiṣe ati awọn ilana ti o jẹ ki idamo ati yanju awọn ọran aṣa rọrun. Loye awọn irinṣẹ wọnyi ki o mu awọn ọgbọn n ṣatunṣe aṣiṣe rẹ pọ si.

Ṣẹda Oju opo wẹẹbu Awọ pẹlu Tailwind CSS

Tailwind CSS wa pẹlu paleti gbooro ti awọn awọ isọdi. Kọ ẹkọ bi o ṣe le lo ati ṣe akanṣe awọn awọ wọnyi lati ṣẹda larinrin ati awọn apẹrẹ ti o wu oju.

Dagbasoke yiyara pẹlu Tailwind CSS 'JIT Ipo

Ṣe jinle si ipo Tailwind CSS's Just-Ni-Time mode. Loye bii o ṣe n ṣiṣẹ ati bii o ṣe le ṣe iyara idagbasoke rẹ ni pataki ati kọ awọn akoko.

Lati odo si akoni: Titunto si Tailwind CSS

Lọ si irin-ajo kan si Titunto si Tailwind CSS. Lati siseto agbegbe rẹ lati ṣawari awọn koko-ọrọ ilọsiwaju, itọsọna okeerẹ yii ti bo ọ.

Ṣe akanṣe Tailwind CSS si Awọn iwulo Rẹ

Ọkan ninu awọn agbara nla ti Tailwind CSS ni irọrun rẹ. Kọ ẹkọ bi o ṣe le ṣe akanṣe Tailwind lati ba awọn iwulo pato ti iṣẹ akanṣe rẹ mu.

Ngba Ọwọ-lori pẹlu Tailwind CSS

Kopa ninu ikẹkọ ọwọ-lori nipasẹ lẹsẹsẹ awọn apẹẹrẹ ti o wulo. Ṣawari bi o ṣe le kọ ọpọlọpọ awọn paati wẹẹbu ni lilo Tailwind CSS ati DaisyUI.

Iṣilọ lati Awọn ilana CSS miiran si Tailwind CSS

Ṣe o pinnu lati yipada si Tailwind CSS? Loye awọn iyatọ bọtini laarin Tailwind ati awọn ilana miiran, ki o kọ ẹkọ awọn ilana ti o munadoko fun gbigbe awọn iṣẹ akanṣe rẹ lọ.

O le lo DivMagic tabi awọn irinṣẹ ti o jọra lati mu iyara ijira rẹ pọ si ni pataki.

Awọn irinṣẹ idagbasoke wẹẹbu bii DivMagic gba ọ laaye lati daakọ eyikeyi ẹya eyikeyi apẹrẹ ati eyikeyi ara lati oju opo wẹẹbu eyikeyi pẹlu titẹ kan.

Apeere Rọrun: Ṣiṣe Kọpọ Kaadi Idahun kan

Eyi ni apẹẹrẹ ti bii o ṣe le kọ paati kaadi idahun nipa lilo Tailwind CSS. Ẹya paati yii yoo ni aworan kan ninu, akọle, ati apejuwe kan.

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

Ṣiṣe Fọọmu kan pẹlu Tailwind CSS

Ṣiṣẹda fọọmu kan pẹlu Tailwind CSS jẹ taara ati ogbon inu. Eyi ni fọọmu olubasọrọ ti o rọrun:

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

Customizing Tailwind CSS

Tailwind CSS gba ọ laaye lati ṣe akanṣe iṣeto aiyipada rẹ, titọ awọn kilasi ohun elo si awọn iwulo rẹ. Ni isalẹ wa apẹẹrẹ ti bii o ṣe le ṣatunṣe paleti awọ.

Awọn apẹẹrẹ wọnyi ṣe afihan irọrun ati ayedero ti Tailwind CSS, n ṣe afihan bi wọn ṣe le ṣe iranlọwọ fun ọ lati ṣẹda igbalode, awọn paati wẹẹbu ti o ṣe idahun daradara ati imunadoko.

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

Ṣe Emi yoo nilo eyikeyi faili CSS?

Faili kan ṣoṣo ti o nilo pẹlu Tailwind CSS ni faili tailwind.config.js.

Faili yẹn yoo mu awọn eto atunto rẹ mu. Iwọ kii yoo kọ css tabi ni eyikeyi faili css miiran. Faili iṣeto ni nikan ni iwọ yoo nilo.

Kini awọn iṣe ti o dara julọ fun Tailwind CSS?

Fun alaye alaye lori Tailwind CSS awọn iṣe ti o dara julọ, jọwọ wo nkan miiran wa Awọn adaṣe Ti o dara julọ Tailwind CSS.

Tailwind CSS: Ojo iwaju ti Apẹrẹ wẹẹbu

Ronu lori bi Tailwind CSS ṣe n ṣe apẹrẹ ọjọ iwaju ti apẹrẹ wẹẹbu. Kọ ẹkọ nipa ipa rẹ ati agbara fun idagbasoke ni ile-iṣẹ idagbasoke wẹẹbu.