Tailwind CSS - HTML-ээ орхихгүйгээр орчин үеийн вэбсайтуудыг хурдан бүтээгээрэй

Нарийн төвөгтэй дизайныг хялбархан бүтээх

Tailwind CSS-ийн тусламжтайгаар нарийн төвөгтэй дизайн хийх нь сэвшээ салхи болно. Хэрэглээний ангиуд болон хариу үйлдэл үзүүлэх дизайны хэрэгслүүдийн хослол нь вэбсайтынхаа гүйцэтгэл, засвар үйлчилгээний чанарыг алдагдуулахгүйгээр нарийн төвөгтэй байршлыг хялбархан зохиох боломжийг олгодог.

Юу ч барина

Tailwind CSS-ийн гоо үзэсгэлэн нь түүний олон талт байдалд оршдог. Та энгийн блог хуудсаас эхлээд дэвшилтэт цахим худалдааны платформ хүртэл юуг ч үүсгэх боломжтой, мөн адил зөн совингийн хэрэглээний ангиудыг ашиглаж болно.

Та зөвхөн өөрийн төсөөллөөр хязгаарлагддаг. Vanilla CSS-ийг ашиглахаас гол ялгаа нь та захиалгат загвар бүтээх хурд юм.

div, div class, p class зэрэг html бүрэлдэхүүн хэсгүүдтэй захиалгат css ангиудыг ашиглах уламжлалт арга нь үргэлж сонголт байдаг боловч Tailwind CSS-тэй хамт ирдэг хурдыг сайжруулах нь таны амьдралыг илүү хялбар болгодог.

Шилдэг туршлагууд үнэндээ ажиллахгүй байна

Уламжлал ёсоор CSS нь дэлхийн хэв маягийн багцыг бий болгож, бүрэлдэхүүн хэсэг тус бүрээр нь боловсронгуй болгох замаар бичдэг. Хэдийгээр энэ нь түгээмэл арга боловч энэ нь асар том, арчлахад хэцүү кодыг бий болгодог.

Tailwind CSS нь энэ ойлголтыг эсэргүүцэж, хамгийн түрүүнд хэрэглэгдэх CSS нь илүү цэвэр, засвар үйлчилгээтэй шийдлийг санал болгодог гэж үздэг.

Tailwind CSS-ийн хамгийн алдартай бүрэлдэхүүн номын сан

daisyUI бол Tailwind CSS-ийн хамгийн алдартай бүрэлдэхүүн хэсэг бөгөөд урьдчилан боловсруулсан 50 гаруй бүрэлдэхүүн хэсэг, 500 гаруй хэрэглээний анги, бараг төгсгөлгүй боломжуудтай. Энэ нь таныг шинэ төсөл бүтээх бүртээ дугуйг дахин зохион бүтээхээс аварна.

Дугуйг дахин бүү зохион бүтээгээрэй

Tailwind CSS нь шинэ төсөл болгонд олон арван ангийн нэр бичих уйтгартай үйл явцад цагаа дэмий үрэхийн оронд сайн тодорхойлсон, утгын ангиллын багцыг ашиглах боломжийг танд олгоно.

Эдгээр ангиуд нь дахин ашиглагдах боломжтой бөгөөд CSS каскадтай зохицон ажиллаж, таны бүх төслүүдэд бат бөх суурийг тавьж өгнө.

Tailwind CSS - Анхны хэрэглүүрийн CSS хүрээ

Үндсэндээ Tailwind CSS нь хамгийн анхны CSS хүрээ юм. Энэ нь таны HTML дээр шууд ямар ч загвар бүтээхэд ашиглаж болох доод түвшний, нэгтгэх боломжтой хэрэглээний ангиудыг өгдөг гэсэн үг юм. Төгсгөлгүй CSS файл байхгүй, зөвхөн энгийн бөгөөд ойлгомжтой код.

Семантик ангийн нэрийг ашигла

Семаль ангийн нэрс нь таны кодын унших чадварыг сайжруулж, зөвхөн нэрийг нь хараад тухайн анги юу хийдгийг ойлгоход хялбар болгодог. Энэ бол хөгжүүлэгчийн туршлагыг сайжруулахын тулд Tailwind CSS-ийн олон боломжуудын нэг юм.

Цэвэр CSS. Агностик хүрээ. Хаа сайгүй ажилладаг

Tailwind CSS нь таныг ямар нэгэн тодорхой хүрээтэй холбохгүй. Энэ бол зүгээр л цэвэр CSS тул та үүнийг ямар ч хүрээтэй, бүр ямар ч хүрээгүй ашиглах боломжтой. Энэ нь CSS ажилладаг хаа сайгүй ажилладаг.

Tailwind CSS-ийн ашиг тус

Tailwind CSS-ийг ашиглахын давуу талууд нь бүтээмжийг нэмэгдүүлэх, CSS файлын хэмжээг багасгах, анхдагч хэрэглээний аргачлалын ачаар хөгжүүлэгчийн сайжруулсан туршлага зэрэг орно. Нэмж дурдахад, Just-In-Time (JIT) горим нь аянга шиг хурдан бүтээх хугацааг өгч, таны хөгжүүлэлтийн процессыг улам хурдасгадаг.

Tailwind CSS үнэ

Tailwind CSS нь нээлттэй эхийн төсөл бөгөөд ашиглахад бүрэн үнэ төлбөргүй гэсэн үг. Tailwind UI-ээр дамжуулан санал болгож буй UI бүрэлдэхүүн хэсгүүд болон загварууд гэх мэт дээд зэрэглэлийн функцүүдэд хандахыг хүссэн үед зардал гардаг.

Энэ нь нэгэн зэрэг үзэл бодолтой, уян хатан байдаг

Tailwind CSS нь таны CSS-ийг хэрхэн бүтэцжүүлэх талаар хүчтэй санал бодлыг өгдөг боловч энэ нь өөрчлөхөд хангалттай уян хатан байдаг. Энэхүү тэнцвэр нь танд хамгийн чухал зүйл болох сайхан UI бүтээхэд анхаарлаа төвлөрүүлэх боломжийг олгоно.

Орчин үеийн онцлог

Tailwind CSS нь Flexbox, Grid, захиалгат шинж чанарууд зэрэг орчин үеийн функцуудыг багтаасан бөгөөд энэ нь орчин үеийн вэб програмуудыг хөгжүүлэхэд маш сайн сонголт болгодог.

Tailwind CSS ашиглах урьдчилсан нөхцөл

Tailwind CSS-г ашиглаж эхлэхээсээ өмнө HTML болон CSS-ийн талаар үндсэн ойлголттой байх шаардлагатай.

Tailwind CSS-г хэзээ ашиглах вэ

Tailwind CSS нь том жижиг бүх төрлийн вэб төслүүдэд тохиромжтой. Хэрэв та CSS-тэй тэмцэлдэхээс залхаж, илүү үр дүнтэй, хөгжүүлэгчдэд ээлтэй шийдлийг хайж байгаа бол Tailwind CSS танд зориулагдсан болно.

Бүрэлдэхүүн хэсэг рүү орохгүй юу?

Хэрэв та React эсвэл Vue зэрэг бүрэлдэхүүн хэсгүүдийн фреймворкуудын шүтэн бишрэгч биш бол санаа зоволтгүй. Tailwind CSS нь framework-агностик бөгөөд цэвэр HTML болон JavaScript-тэй ашиглах боломжтой.

Tailwind CSS болон бусад CSS Framework-уудын ижил төстэй ба ялгаа

Bootstrap болон Foundation зэрэг бусад хүрээ нь урьдчилан боловсруулсан бүрэлдэхүүн хэсгүүдийг санал болгодог бол Tailwind CSS нь HTML-ээ орхихгүйгээр бүрэн захиалгат загвар бүтээх хэрэгслийг танд өгдөг. Гэсэн хэдий ч, daisyUI гэх мэт бүрэлдэхүүн хэсгүүдийн сангуудыг нэгтгэснээр та одоо хоёр ертөнцийн хамгийн сайн сайхныг эдлэх боломжтой.

Харанхуй горим

Tailwind CSS болон daisyUI-ийн хамгийн сүүлийн үеийн боломжуудын нэг нь харанхуй горим бөгөөд энэ нь харанхуй сэдэвтэй вэбсайтуудыг хялбархан үүсгэх боломжийг олгодог.

Flexbox-ын жишээ

Tailwind CSS нь Flexbox гэх мэт орчин үеийн CSS функцуудтай сайн нийцдэг. Жишээлбэл, та flex, justify- center, items-center гэх мэт ангиудыг ашиглан responsive layout үүсгэж болно.

Just-in-Time-ийн хослолын тусламжтайгаар та өөр өөр ангиллын утгыг хялбархан туршиж үзэх боломжтой. Хэрэв нэг хэрэгслийн анги ажиллахгүй бол элементээ өөрчлөхийн тулд үүнийг зүгээр л өөрчилнө үү.

Flexbox байршлын жишээ

Tailwind CSS-ийг ашигласнаар мэдрэгчтэй навигацийн талбар гэх мэт нарийн төвөгтэй байршлыг бий болгоход хялбар байдаг. Энд нэг жишээ байна:

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

Бэлэн бүрэлдэхүүн хэсгүүд

Хэрэв та төсөлдөө tailwind css кодыг ашиглахаар шийдсэн бол онлайнаар бэлтгэсэн олон бүрэлдэхүүн хэсгүүдийг олох боломжтой болно. Та эдгээрийн аль нэгийг хуулж, өөрийн вэбсайтдаа тохируулж болно.

CSS-ийг Tailwind CSS руу хэрхэн хөрвүүлэх вэ

CSS-ийг Tailwind CSS анги болгон хөрвүүлэх чадвартай байх нь ихэнх хөгжүүлэгчдэд хэрэгтэй зүйл юм. Tailwind CSS-ийг ашиглахаас өмнө интернетэд олон вэбсайтууд бий. Эдгээр вэб хуудсууд нь загварын хуудастай css ашигладаг бөгөөд вэб хөгжүүлэлтийн мэргэжилтнүүд эдгээр хуудсыг Tailwind CSS руу шилжүүлэхийг хүсдэг.

DivMagic нь вэб хөгжүүлэгч болон програм хангамж хөгжүүлэгчдэд зориулагдсан вэб хөгжүүлэлтийн хэрэгсэл юм. Энэ нь vanilla css-ээс Tailwind CSS руу ямар ч хэв маягийг хуулбарлах боломжийг олгодог. Нэг товшилтоор та интернетийн дурын бүрэлдэхүүн хэсгийг Tailwind CSS болгон хөрвүүлж, Tailwind-ийг төсөлдөө ашиглаж, хүссэн загвараа өөрчлөх боломжтой.

Tailwind CSS философийн гүнд шумбаарай

Tailwind CSS-ийн цаад философи нь ашигтай тал дээр анхаарах явдал юм. Энэ нь Tailwind CSS нь бүрэлдэхүүн хэсгүүдийг урьдчилан тодорхойлохын оронд HTML-ээ орхихгүйгээр өвөрмөц дизайн бүтээх боломжийг олгодог доод түвшний хэрэглээний ангиудыг өгдөг гэсэн үг юм.

Яагаад уламжлалт CSS-ээс холдох ёстой вэ?

Уламжлалт CSS нь хүчингүй болгох, хавдсан файл, "div шөл"-ийг хэт их ашиглахад хүргэж болзошгүй. Tailwind CSS гэх мэт хэрэглүүрийг хамгийн түрүүнд ашигладаг CSS систем рүү шилжсэнээр та эдгээр асуудлыг хөнгөвчлөх боломжтой бөгөөд ингэснээр илүү цэвэр, илүү оновчтой кодын баазтай болно.

Хэрэглээний ангиудын хүчийг мэдрээрэй

Хэрэглээний ангиуд нь таны загварын хуудсанд ижил хэв маягийг давтахаас зайлсхийхэд тусална. Энэ бол "Өөрийгөө бүү давт" (ХУУРАЙ) зарчим юм. Эдгээр ангиуд нь танд ихээхэн цаг хугацаа, хүчин чармайлтыг хэмнэж, маш сайн хадгалагдах кодын баазыг бий болгодог.

Tailwind CSS удирдамжийг судалж байна

Tailwind CSS нь таны загварын хүснэгтэд ашиглаж болох хэд хэдэн удирдамжийг танилцуулж байна. Үүнд @apply , @variants болон @screen орно. Эдгээр удирдамжийг ойлгож, ашиглах нь таны Tailwind CSS-ийн туршлагыг ихээхэн сайжруулах болно. Эдгээрийг Tailwind Config CSS файлд байрлуулж болно. Та энэ аргыг ашиглан css анги бичиж болно.

Tailwind CSS-ийг залгаасуудаар өргөтгөх

Tailwind CSS-ийг залгаасуудаар өргөтгөж, шинэ функц нэмж эсвэл одоо байгаа функцийг өөрчлөх боломжтой. Вэб төслийн үр ашиг, гоо зүйн байдлыг нэмэгдүүлэхийн тулд залгаасуудыг хэрхэн ашиглах талаар олж мэдээрэй.

Tailwind CSS-ийг ажлын урсгалдаа оруулаарай

Webpack эсвэл Parcel гэх мэт бүтээх хэрэгслүүдийг ашиглаж байгаа эсвэл Next.js эсвэл Gatsby гэх мэт фреймворктой ажиллаж байгаа эсэхээс үл хамааран Tailwind CSS-ийг өөрийн хөгжүүлэлтийн ажлын урсгалдаа нэгтгэх нь энгийн зүйл юм.

Tailwind CSS ашиглан хүртээмжийг сайжруул

Tailwind CSS нь ARIA шинж чанаруудыг ангидаа оруулснаар хүртээмжтэй дизайныг дэмждэг. Илүү хүртээмжтэй интерфэйсүүдийг бий болгож, хэрэглэгчийн туршлагыг хүн бүрт сайжруул.

Tailwind CSS-ийн тусламжтайгаар Flexbox болон Grid-ийн хүчийг ашигла

Tailwind CSS-тэй Flexbox, Grid зэрэг орчин үеийн CSS байршлын модулиудыг ашигла. Ашиглалтын ангиудыг хэрхэн уян хатан, хариу үйлдэл үзүүлэх байдлаар зохион байгуулалтыг удирдахад ашиглаж болохыг олж мэдээрэй.

Tailwind CSS төслүүдээ хэрхэн дибаг хийх вэ

Tailwind CSS нь загварчлалын асуудлыг тодорхойлох, шийдвэрлэхэд хялбар болгодог хэд хэдэн дибаг хийх хэрэгсэл, техникээр хангадаг. Эдгээр хэрэгслийг ойлгож, дибаг хийх чадвараа сайжруул.

Tailwind CSS ашиглан өнгөлөг вэб үүсгэ

Tailwind CSS нь өөрчлөх боломжтой өнгөний өргөн палитртай ирдэг. Эдгээр өнгийг хэрхэн ашиглах, өөрчлөх талаар олж мэдээрэй.

Tailwind CSS-ийн JIT горимыг ашиглан илүү хурдан хөгжүүлээрэй

Tailwind CSS-ийн Just-In-Time горимыг илүү гүнзгий судлаарай. Энэ нь хэрхэн ажилладаг, таны хөгжил, бүтээн байгуулалтын цагийг хэрхэн хурдасгаж болохыг ойлгоорой.

Тэгээс баатар руу: Мастер Tailwind CSS

Tailwind CSS-ийг эзэмших аялалд гараарай. Орчноо тохируулахаас эхлээд ахисан түвшний сэдвүүдийг судлах хүртэл энэхүү дэлгэрэнгүй гарын авлагад танд зориулагдсан болно.

Tailwind CSS-г өөрийн хэрэгцээнд нийцүүлэн тохируулаарай

Tailwind CSS-ийн хамгийн том давуу талуудын нэг бол уян хатан чанар юм. Tailwind-ийг төслийн онцлог хэрэгцээнд тохируулан хэрхэн тохируулах талаар суралц.

Tailwind CSS-тэй танилцаж байна

Хэд хэдэн практик жишээгээр дамжуулан практик сургалтанд хамрагдаарай. Tailwind CSS болон DaisyUI ашиглан олон төрлийн вэб бүрэлдэхүүн хэсгүүдийг хэрхэн бүтээх талаар судлаарай.

Бусад CSS Framework-аас Tailwind CSS руу шилжиж байна

Tailwind CSS руу шилжих талаар бодож байна уу? Tailwind болон бусад хүрээний үндсэн ялгааг ойлгож, төслүүдээ шилжүүлэх үр дүнтэй стратегийг сур.

Та шилжилт хөдөлгөөний хурдаа мэдэгдэхүйц нэмэгдүүлэхийн тулд DivMagic эсвэл үүнтэй төстэй хэрэгслийг ашиглаж болно.

DivMagic гэх мэт вэб хөгжүүлэлтийн хэрэгслүүд нь танд нэг товшилтоор дурын вэбсайтаас ямар ч загвар, ямар ч загварыг хуулбарлах боломжийг олгодог.

Энгийн жишээ: Хариуцлагатай картын бүрэлдэхүүнийг бий болгох

Tailwind CSS ашиглан хариу үйлдэл үзүүлэх картын бүрэлдэхүүн хэсгийг хэрхэн бүтээх жишээг энд харуулав. Энэ бүрэлдэхүүн хэсэг нь зураг, гарчиг, тайлбарыг агуулна.

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

Tailwind CSS ашиглан маягт бүтээх

Tailwind CSS ашиглан маягт үүсгэх нь энгийн бөгөөд ойлгомжтой. Энд энгийн холбоо барих маягт байна:

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

Tailwind CSS-ийг тохируулах

Tailwind CSS нь таны хэрэгцээнд нийцүүлэн хэрэглээний ангиудыг тохируулан өгөгдмөл тохиргоогоо өөрчлөх боломжийг танд олгоно. Доорх нь өнгөт палитрыг хэрхэн өөрчлөх тухай жишээ юм.

Эдгээр жишээнүүд нь Tailwind CSS-ийн уян хатан байдал, энгийн байдлыг харуулж, орчин үеийн, мэдрэмжтэй вэб бүрэлдэхүүн хэсгүүдийг үр дүнтэй, үр дүнтэй бүтээхэд хэрхэн тусалж болохыг харуулж байна.

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

Надад CSS файл хэрэгтэй юу?

Tailwind CSS-д хэрэгтэй цорын ганц файл бол tailwind.config.js файл юм.

Энэ файл таны тохиргооны тохиргоог хадгалах болно. Та css бичих эсвэл өөр css файлгүй байх болно. Энэ тохиргооны файл нь танд хэрэгтэй цорын ганц файл юм.

Tailwind CSS-ийн шилдэг туршлагууд юу вэ?

Tailwind CSS шилдэг туршлагын талаарх дэлгэрэнгүй тайлбарыг манай бусад нийтлэлээс үзнэ үү Tailwind CSS шилдэг туршлагууд.

Tailwind CSS: Вэб дизайны ирээдүй

Tailwind CSS нь вэб дизайны ирээдүйг хэрхэн тодорхойлж байгаа талаар эргэцүүлэн бодоорой. Вэб хөгжүүлэлтийн салбарт түүний нөлөө, өсөлтийн боломжийн талаар олж мэдээрэй.