Bırakın UI’ı yapay zeka yazsın

Teknolojinin durdurulamaz gelişimine ayak uyduran developer’lar development sürecini hem kısaltıp hem de daha keyifli hale getirebilir.

GitHub Copilot ve Tailwind CSS birlikte verimli bir şekilde kullanıldığında frontend developer’ın angarya işleri otomatikleşiyor.

Resimdeki Increment buttonunu elde etmek için aşağıdaki kodu Tailwind CSS base’i import ettiğimiz yere ekleyelim. (Veya hayalinizdeki button tasarımını Tailwind CSS reserved class’ları ile hazırlayın)

index.css
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75;
  }
}

Böylece projemizde btn-primary class’ı taşıyan elementlerin style’ını yazmış olduk. Artık sahneyi GitHub Copilot’a bırakabiliriz.

Videoda görüldüğü üzere btn-primary dışındaki kodları GitHub Copilot otomatikman yazıyor.

Bu senaryoyu sadece button tasarlamak için değil, aklınıza gelen tüm tekrar eden işlemler için kullanabilirsiniz.

Belki GitHub Copilot yakın gelecekte ücretli ve ulaşılması zor bir araç haline gelebilir. Böyle bir durum gerçekleşmeden önce tecrübe etmenizde fayda var.

GitHub Repo: https://github.com/gayret/tailwind-css-vuejs