Tailwind CSS гэж юу вэ? Аппликейшн бүтээгчдэд зориулсан энгийн гарын авлага

Tailwind CSS бол вэбсайтыг загварлах хэрэгсэл юм. Тусдаа файлд стилийн дүрэм бичихийн оронд элемент бүрт богино, бэлэн классын нэр өгдөг — жишээ нь bg-white цагаан дэвсгэрт, p-4 дотор зайд, text-lg том текстэд, rounded-xl булангийн дугуй хэлбэрт — мөн Tailwind хөтөчид шаардлагатай CSS-ийг гаргаж өгдөг. Энэ нь үнэгүй, нээлттэй эх кодтой бөгөөд орчин үеийн вэб аппуудыг загварлах хамгийн түгээмэл арга нэг юм.

AI-аар бүтээхдээ Tailwind яагаад чухал вэ

Хэрэв та AI аппликейшн бүтээгчээр вэб апп бүтээж байгаа бол аппынх маань Tailwind-ээр загварлагдсан байх магадлал өндөр. Жишээ нь Mythex шинэ төслүүдээ өөрөөр хүсээгүй бол Vite + React + TypeScript + Tailwind дээр эхэлдэг (технологийг хэрхэн сонгодог).

Энэ нь танд гурван талаар чухал:

• Дизайны өөрчлөлт хямд. Загвар нь товч, карт, гарчиг бүрийн дэргэд байдаг тул AI «картуудыг бага шахуу болго» гэснийг нэг газар хэд хэдэн класс засаж хийж чадна.
• Уншиж болно. Tailwind классууд энгийн англи үгтэй ойрхон. text-center font-bold text-2xl кодыг хэзээ ч бичиж байгаагүй ч тайлахад хэцүү биш.
• Загвар тогтвортой байдаг. Tailwind тогтмол хэмжээ, зай, өнгөний шатлалтай ирдэг. Энэ нь аппд 14 бага зэрэг өөр саарал өнгө бий болохоос сэргийлдэг.

Өдөр тутмын жишээ

Будаг, байшин барихыг төсөөлөөд үз.

Энгийн CSS бол ханан бүрт өөрийн будгаа холих шиг. Бүрэн эрх чөлөөтэй ч хэсэг хугацааны дараа зочны өрөө «дулаан цагаан», хонгил «бага зэрэг илүү дулаан цагаан» болж, яагаад гэдгийг хэн ч санахгүй болно.

Tailwind бол будгийн өнгөний каталог, тэмдэгтэй наалтуудын багц шиг. Хана бүр «цагаан, матт, 2 давхар» гэсэн наалттай байж, каталог зөвхөн сонгосон өнгөнүүдийг санал болгодог. Таны эрх чөлөө бага зэрэг хумигдах ч ажлын бүх хүмүүс наалтыг уншаад хана яг ямар байх ёстойг мэддэг.

Tailwind хэрхэн ажилладаг вэ

Вэб хуудас HTML (агуулга, бүтэц) болон CSS (харагдах байдал)-аас бүтдэг. Ихэвчлэн CSS нь ийм дүрэмтэй тусдаа файлд байдаг:

.card {
  background: white;
  padding: 1rem;
  border-radius: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

Tailwind-ээр та тэр дүрмийг бичихгүйгээр шууд элемент дээр утилити классуудыг тавина:

<div class="bg-white p-4 rounded-xl shadow-sm">
  Таны захиалга баталгаажлаа
</div>

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

Одоогийн гол хувилбар Tailwind 4-ийг маш бага тохиргоотойгоор суулгадаг: суулгаад, build хэрэгсэлдээ плагинаа нэмээд, CSS файлынхаа эхэнд @import "tailwindcss"; гэж бичнэ. Брэндийн өнгө, фонт зэрэг өөрчлөлтийг том JavaScript тохиргооны файлд биш, CSS-д дизайны токен болгон тодорхойлдог. Хуучин хувилбарт tailwind.config.js шаардлагатай байсан; хэрэв танд тэр файлыг дурдсан хуучин зааварчилгаа таарвал шалтгаан нь энэ.

Жишээ: үнийн карт

AI builder-аасаа үнийн хуудас хүссэн бөгөөд «Pro» картаа онцлохыг хүсэж байна гэж бодъё. Картын код (React компонентэд class нь className гэж бичигддэг) ингэж харагдаж болно:

<div className="rounded-2xl border border-gray-200 p-6">
  <h3 className="text-lg font-semibold">Pro</h3>
  <p className="mt-2 text-4xl font-bold">$25</p>
  <button className="mt-6 w-full rounded-lg bg-gray-900 px-4 py-2 text-white">
    Туршилт эхлүүлэх
  </button>
</div>

Зүүнээс баруун тийш уншвал:

Хэрэв та «Pro картыг цэнхэр хүрээ, бага сүүдэртэй болгож онцол» гэж хүсвэл AI border-gray-200-г border-2 border-blue-600 болгож, shadow-lg нэмж болно. Бүх өөрчлөлт ийм л.

Хариу үйлдэл ба харанхуй горим

Tailwind дэлгэцийн хэмжээ, төлөвт зориулсан богино угтвартай:

• md:grid-cols-3 — дунд зэргийн болон том дэлгэцэд гурван багана; утсан дээр анхдагч нэг багана үлдэнэ. Tailwind нь mobile-first: угтваргүй классууд бүх дээр хүчинтэй, угтвар нь том дэлгэцэд өөрчлөлт нэмдэг.
• hover:bg-gray-700 — хулгана дээр байхад товч бараан болно.
• dark:bg-gray-900 — харанхуй горим асаалттай үед өөр дэвсгэр.

Тийм учраас Tailwind төсөлд утсанд тохирсон бүтэц эсвэл харанхуй горим хүсэх нь ихэвчлэн хурдан байдаг.

Гол нэр томъёо

Түгээмэл буруу ойлголт

• «Tailwind бол загвар юм.» Биш. Tailwind нь барилгын блокуудыг өгдөг, харагдах байдлыг биш. Хоёр Tailwind сайт огт өөр харагдаж болно. Ерөнхий «AI аппын хэв маяг» нь Tailwind-ээс биш, анхдагч тохиргооноос гардаг — builder-тээ бодит чиглэл өг. Үзэх: AI-аар сайхан харагдах аппыг хэрхэн загварлах вэ.
• «Энэ нь inline стильтэй адил.» Яг тийм биш. Классууд нийтлэг шатлалаас гардаг, hover, харанхуй горим, breakpoint-ийг дэмждэг, build үед энгийн CSS болдог.
• «Tailwind хуудсыг хүнд болгодог.» Build нь зөвхөн ашигласан классуудыг оруулдаг тул зочдод очдог CSS ихэвчлэн жижиг байдаг.
• «Урт классын жагсаалт нь эмх замбараагүй код гэсэн үг.» Эхэндээ завгүй харагдах ч элементийн загварын бүх зүйл нэг газар байна. Давтагдсан хэв маягийг ихэвчлэн компонент болгон нэг Button болгодог.
• «Tailwind ашигласан бол өөрийн CSS бичиж болохгүй.» Шаардлагатай үедээ энгийн CSS бичих боломжтой хэвээр.

AI builder-таасаа юу асуух вэ

• «Брэндийн өнгө, фонтуудаа нэг удаа theme токен болгон тодорхойлж, бүх газар ашигла, кодонд шууд бичсэн өнгөөр бүү хий.»
• «Карт, товч, оролт бүр ижил булангийн радиус, зайтай байг.»
• «Загварыг утасны өргөнд шалгаж, хэтэрсэн эсвэл хүрхэд хэт жижиг зүйлийг засаарай.»
• «Tailwind-ийн dark: хувилбарыг ашиглан харанхуй горим нэм, текстийн контраст уншигдахуйц хэвээр байг.»
• «Давтагдсан товчны стилийг нэг дахин ашиглагдах Button компонент болгон цуглуул.»
• «Энэ хэсгийн Tailwind классуудыг энгийн үгээр тайлбарла.»

Mythex дээрх Tailwind

Mythex-ийн шинэ төслүүд анхдагчаар React болон TypeScript-тэй хамт Tailwind ашигладаг тул визуал өөрчлөлтийг энгийн үгээр хүсээд, шууд Preview дээр харж болно. Кодыг харахыг хүсвэл код засварлагч бүх классыг харуулна (Free дээр зөвхөн унших, Pro дээр засах боломжтой). Энгийн CSS эсвэл өөр тохиргоо илүү таалагдвал анхны зааварт нь хэл — docs-д стек яаж сонгогддог гэж тайлбарласан байдаг.

Асуултууд