Tailwind CSS ilə Peşəkar UI — Komponent Kitabxanası Olmadan

Tailwind CSS ilə Peşəkar UI — Komponent Kitabxanası Olmadan

Bakıda frontendçi kimi müsahibəyə gedirsən. Portfolio göstərirsən. HR "gözəl görünür" deyir, texlid soruşur: "Bu Material UI-dır?" Sən isə deyirsən: "Xeyr, sıfırdan Tailwind ilə yazdım." Bu cavab sənin dəyərini iki dəfə artırır.

Bu gün danışacağıq ki, heç bir komponent kitabxanası (MUI, Chakra, Ant Design, shadcn/ui) istifadə etmədən Tailwind CSS ilə necə peşəkar səviyyəli interfeys qurmaq olar.

Niyə Komponent Kitabxanasız?

Əvvəlcə gəlin reallığa baxaq. Bakıda işə götürən şirkətlərin — istər Kapital Bank-ın fintech komandasında, istər ABB-nin digital departamentində, istərsə də kiçik startaplarda — axtardığı bir şey var: CSS-i həqiqətən başa düşən developer.

Stack Overflow-un 2025 Developer Survey-inə görə Tailwind CSS artıq CSS framework-ləri arasında #1 yerdədir — 45.8% istifadə nisbəti ilə Bootstrap-u geridə qoyub. Lakin Tailwind-i bilmək azdır. Tailwind ilə sistemli düşünməyi bilmək lazımdır.

Komponent kitabxanası istifadə etmək pis deyil. Amma bunlar sənin alt quruluşunu örtür. Müsahibədə "bu butonun hover state-ini necə dəyişərsən?" sualına "MUI-nin theme provider-ini override edərəm" cavabı ilə "Tailwind-də hover:bg-blue-700 transition-colors duration-200 yazaram" cavabı arasında fərq var. İkincisi sənin nəyi başa düşdüyünü göstərir.

Design Token Sistemi Qurmaq

Peşəkar UI-ın əsası tutarlılıqdır (consistency). Tailwind bunu tailwind.config.js vasitəsilə həll edir. Bir layihəyə başlamazdan əvvəl öz design token-lərini müəyyən et:

javascriptKopyala
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#eff6ff',
          100: '#dbeafe',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          900: '#1e3a5f',
        },
        surface: {
          light: '#f8fafc',
          DEFAULT: '#ffffff',
          dark: '#1e293b',
        },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      borderRadius: {
        card: '0.75rem',
        button: '0.5rem',
      },
      boxShadow: {
        card: '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06)',
        'card-hover': '0 10px 25px rgba(0,0,0,0.1)',
      },
    },
  },
}

Bu konfiqurasiya ilə artıq bg-brand-500, shadow-card, rounded-card kimi class-lar istifadə edə bilərsən. Bütün layihədə bir rəng dəyişməli olsan, tək yerdən dəyişirsən.

Real Komponent: Qiymət Kartı

Gəlin Azərbaycan SaaS bazarı üçün real bir pricing card düzəldək. Tutaq ki, sən freelance layihə qəbul edirsən və müştəriyə qiymət səhifəsi hazırlayırsan:

htmlKopyala
<!-- Pricing Card Component -->
<div class="group relative bg-white rounded-card border border-gray-200
            shadow-card hover:shadow-card-hover
            transition-all duration-300 ease-out
            p-8 max-w-sm mx-auto">

  <!-- Badge -->
  <div class="absolute -top-3 left-1/2 -translate-x-1/2">
    <span class="bg-brand-600 text-white text-xs font-semibold
                 px-3 py-1 rounded-full tracking-wide uppercase">
      Populyar
    </span>
  </div>

  <!-- Header -->
  <div class="text-center pt-4">
    <h3 class="text-lg font-semibold text-gray-900">Biznes Plan</h3>
    <div class="mt-4 flex items-baseline justify-center gap-1">
      <span class="text-5xl font-bold tracking-tight text-gray-900">
        49
      </span>
      <span class="text-lg font-medium text-gray-500">AZN/ay</span>
    </div>
    <p class="mt-2 text-sm text-gray-500">
      Kiçik və orta komandalar üçün
    </p>
  </div>

  <!-- Features -->
  <ul class="mt-8 space-y-3">
    <li class="flex items-center gap-3 text-sm text-gray-700">
      <svg class="h-5 w-5 flex-shrink-0 text-brand-500" fill="currentColor"
           viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0
              010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0
              011.414-1.414L8 12.586l7.293-7.293a1 1 0
              011.414 0z" clip-rule="evenodd"/>
      </svg>
      10 istifadəçiyə qədər
    </li>
    <li class="flex items-center gap-3 text-sm text-gray-700">
      <svg class="h-5 w-5 flex-shrink-0 text-brand-500" fill="currentColor"
           viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0
              010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0
              011.414-1.414L8 12.586l7.293-7.293a1 1 0
              011.414 0z" clip-rule="evenodd"/>
      </svg>
      Limitsiz API sorğu
    </li>
    <li class="flex items-center gap-3 text-sm text-gray-700">
      <svg class="h-5 w-5 flex-shrink-0 text-brand-500" fill="currentColor"
           viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0
              010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0
              011.414-1.414L8 12.586l7.293-7.293a1 1 0
              011.414 0z" clip-rule="evenodd"/>
      </svg>
      7/24 dəstək
    </li>
  </ul>

  <!-- CTA Button -->
  <button class="mt-8 w-full rounded-button bg-brand-600
                 px-4 py-3 text-sm font-semibold text-white
                 hover:bg-brand-700 focus:outline-none
                 focus:ring-2 focus:ring-brand-500 focus:ring-offset-2
                 active:scale-[0.98] transition-all duration-150">
    İndi Başla →
  </button>
</div>

Bu kartda nələr var? group ilə hover state idarəsi, transition-all ilə smooth animasiya, active:scale-[0.98] ilə buton basıldığında mikro-interaksiya, focus:ring ilə accessibility. Bunların hamısı kitabxanasız, sıfırdan.

Peşəkarları Amatörlərdən Ayıran 5 Tailwind Texnikası

1. Space sistemi — 4px grid-ə sadiq qal. p-2 (8px), p-3 (12px), p-4 (16px) istifadə et. Təsadüfi p-[13px] yazmaqdan qaç.

2. Rəng hierarxiyası qur. Başlıq: text-gray-900, əsas mətn: text-gray-700, köməkçi mətn: text-gray-500. Bu üç səviyyə kifayətdir.

3. Transition hər yerdə olsun. Hər hover effektinin yanında transition-colors duration-200 və ya transition-all duration-300 yazmalısan. Transition-sız hover keçidləri amatör görünür.

4. @apply ilə təkrarı azalt, amma sui-istifadə etmə:

cssKopyala
/* globals.css */
@layer components {
  .btn-primary {
    @apply rounded-button bg-brand-600 px-4 py-2.5
           text-sm font-semibold text-white
           hover:bg-brand-700 transition-colors duration-200
           focus:outline-none focus:ring-2
           focus:ring-brand-500 focus:ring-offset-2;
  }
}

5. Responsive-i mobile-first yaz. Tailwind default olaraq mobile-first-dir. md:grid-cols-3 yazdığında bu yalnız 768px-dən sonra tətbiq olur. Əvvəlcə mobil dizaynı düşün — Bakıda istifadəçilərin 78%-i saytlara telefondan daxil olur.

Bundle Size Müqayisəsi

Bu rəqəmlər sənin müsahibədə danışacağın real statistikadır:

Tailwind-in production build-i yalnız istifadə etdiyin class-ları saxlayır. Bu o deməkdir ki, sənin 49 AZN/ay-lıq hosting planında daha sürətli yüklənən sayt olacaq.

Portfolio Layihən Üçün Strategiya

Bakıda frontend developer olaraq 1200-2500 AZN arası maaş aralığında iş axtarırsan. Fərqlənmək üçün portfolionda bir landing page-i tamamilə Tailwind ilə, komponent kitabxanasız qur. Dark mode toggle əlavə et (dark:bg-surface-dark), responsive et, Lighthouse Performance skorunu 95+ yuxarı tut. Müsahibədə soruşanda "Niyə MUI istifadə etmədin?" de ki: "Bundle size-ı 10x kiçiltmək və CSS-in hər pikselini kontrol etmək üçün."

Bu cavab, inan, fərq yaradır.

Nəticə

Tailwind CSS komponent kitabxanası deyil — utility sistemidir. Peşəkar UI qurmaq üçün hazır komponentlər yox, sistemli düşüncə lazımdır: tutarlı rənglər, məntiqi spacing, hamar keçidlər və accessibility. Bu məqalədəki config + komponent strukturunu öz layihənə tətbiq et, portfolio-na əlavə et, müsahibəyə hazır get.

Sualın varsa, Baku Stack-in kommentlərində gözləyirəm. Kod yazmağa davam! 🚀