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

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

--

--

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Safa Gayret

Safa Gayret

Yazılım geliştiririm, kısa film yönetirim ve yazılar yazarım.