Tailwind CSS — HTML markup ichida kichik, bitta vazifali utility classlar orqali interfeys uslubini tuzishga mo‘ljallangan CSS frameworkidir. display, spacing, rang, shrift, breakpoint va state kabi xususiyatlar oldindan belgilangan class nomlari bilan ifodalanadi. Tailwind tayyor vizual komponentlar kutubxonasi emas; u dizayn qoidalaridan CSS hosil qiluvchi vositalar qatlamidir.
Utility-first yondashuv
An’anaviy CSSda .article-card kabi semantik class yaratilib, uning barcha xususiyatlari alohida faylda yoziladi. Tailwindda element quyidagicha ko‘rinishi mumkin:
<article class="rounded-lg bg-white p-6 shadow-sm">
<h2 class="text-xl font-semibold text-slate-900">Sarlavha</h2>
</article>
Har class bitta yoki kichik guruhdagi deklaratsiyani beradi. Markup uzunlashadi, ammo style qayerdan kelgani element yonida ko‘rinadi va yangi class nomini o‘ylash ehtiyoji kamayadi.
Build va class aniqlash
Tailwind loyiha manba fayllaridagi class nomlarini tahlil qilib, ishlatilgan utilitylar uchun CSS yaratadi. Class nomi dinamik string sifatida bo‘laklardan yig‘ilsa, build vositasi uni topmasligi mumkin.
// build paytida to‘liq class nomi ko‘rinmaydi
const color = `text-${tone}-600`
Variantlar to‘liq statik xaritada saqlanishi yoki safelist orqali ko‘rsatilishi mumkin. Foydalanuvchi kiritmasini cheksiz class nomiga aylantirish dizayn va xavfsizlikni boshqarishni qiyinlashtiradi.
Responsive va state variantlari
md:grid-cols-3 utilitysi ma’lum breakpointdan keyin uch ustunli gridni yoqadi. hover:, focus-visible:, disabled: va dark: prefikslari holat yoki media shartini ifodalaydi. Mobile-first modelda prefixesiz class bazaviy, katta breakpoint variantlari keyingi override bo‘ladi.
Arbitrary value, masalan w-[37rem], standart scale’dan tashqari qiymat beradi. Ko‘p tasodifiy arbitrary qiymat dizayn tokenlari izchilligini zaiflashtirishi mumkin.
Theme va tokenlar
Rang, spacing, font, breakpoint va boshqa theme qiymatlari loyiha dizayn tizimiga moslashtiriladi. Bir xil token utility classlarda qayta ishlatiladi. Brend primary rangini o‘zgartirish yuzlab alohida CSS deklaratsiyasini emas, markaziy theme qiymatini yangilashi mumkin.
Tailwind versiyalarida konfiguratsiya usuli farqlanishi mumkin. Loyiha ishlatayotgan aniq versiya hujjati class generation va theme sozlashni belgilaydi.
Komponentlar bilan ishlash
Takroriy markup Vue, React yoki server template komponentiga ajratiladi. Bu utility classlarni global .btn abstraksiyasiga majburan ko‘chirmasdan takrorni kamaytiradi. @apply ayrim utilitylarni custom CSS selectoriga birlashtirishi mumkin, lekin haddan tashqari ishlatilsa utility-first model yana katta CSS qatlamiga aylanadi.
CSS xatti-harakati
Tailwind CSSning cascade, specificity va inheritance qoidalarini bekor qilmaydi. Generated selector tartibi va layerlar override natijasiga ta’sir qiladi. Brauzer DevTools computed style orqali qaysi qoida ishlayotganini ko‘rsatadi. Accessibility ham framework tomonidan avtomatik hal qilinmaydi; semantik HTML, focus, kontrast va keyboard xatti-harakati komponent dizaynida ta’minlanadi.
Preflight va integratsiya
Tailwind Preflight brauzer default uslublarini izchil bazaga keltiradigan reset qatlamidir. Mavjud eski saytga Tailwind qo‘shilganda bu global qoidalar heading, list yoki form ko‘rinishini kutilmaganda o‘zgartirishi mumkin. Integratsiyada Preflight ta’siri, CSS layer tartibi va uchinchi tomon komponentining specificitysi tekshiriladi. Server template, Markdown yoki CMS kontentidagi class nomlari build content scan ro‘yxatiga kirishi kerak. Foydalanuvchi yaratgan rich text utility classsiz kelganda typography plugin yoki alohida prose uslubi semantik HTMLga nazoratli ko‘rinish beradi.
Bog‘liq tushunchalar
CSS, utility-first CSS, responsive design, design tokens, component, PostCSS, CSS framework