{"id":8740,"date":"2025-01-06T00:15:11","date_gmt":"2025-01-05T21:15:11","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-cssi-yanlis-kullaniyordum-siz-kullanmayin\/"},"modified":"2025-01-06T00:15:11","modified_gmt":"2025-01-05T21:15:11","slug":"tailwind-cssi-yanlis-kullaniyordum-siz-kullanmayin","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-cssi-yanlis-kullaniyordum-siz-kullanmayin\/","title":{"rendered":"Tailwind CSS’i Yanl\u0131\u015f Kullan\u0131yordum, Siz Kullanmay\u0131n!"},"content":{"rendered":"

<\/p>\n

Tailwind CSS’i Yanl\u0131\u015f Kullan\u0131yordum, Siz Kullanmay\u0131n!<\/p>\n

Uzun s\u00fcredir web geli\u015ftirmeyle ilgileniyorum ve bir\u00e7ok CSS framework’\u00fc denedim. Son y\u0131llarda pop\u00fclerli\u011fi h\u0131zla artan Tailwind CSS’i de benimsedim. Ancak ba\u015flang\u0131\u00e7ta, t\u0131pk\u0131 bir\u00e7ok geli\u015ftirici gibi, Tailwind CSS’i yanl\u0131\u015f kullan\u0131yordum. Bu makalede, \u00f6zellikle benim kar\u015f\u0131la\u015ft\u0131\u011f\u0131m hatalar\u0131 ve bunlardan nas\u0131l ka\u00e7\u0131nabilece\u011finizi payla\u015faca\u011f\u0131m. B\u00f6ylece siz, benim gibi zaman kaybetmeyin ve daha verimli kod yaz\u0131n.<\/p>\n

Ba\u015flang\u0131\u00e7taki Yanl\u0131\u015flar\u0131m<\/h2>\n

\u0130lk ba\u015flarda Tailwind CSS’in sundu\u011fu s\u0131n\u0131rs\u0131z \u00f6zelle\u015ftirme se\u00e7eneklerine kap\u0131ld\u0131m. Her \u00f6\u011fe i\u00e7in ayr\u0131 ayr\u0131 s\u0131n\u0131flar belirliyordum. Sonu\u00e7 olarak, CSS kodlar\u0131m inan\u0131lmaz derecede karma\u015f\u0131k ve okunmas\u0131 zor hale geldi. Bu durum, proje geli\u015ftirme s\u00fcrecimi yava\u015flat\u0131rken, bak\u0131m\u0131n\u0131 da olduk\u00e7a zorla\u015ft\u0131r\u0131yordu. Ayr\u0131ca, stil tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamakta da zorlan\u0131yordum. Ba\u015fka bir deyi\u015fle, kodum karma\u015f\u0131kl\u0131\u011f\u0131n zirvesindeydi.<\/p>\n

\u00d6rne\u011fin, basit bir buton i\u00e7in \u015fu kodu yaz\u0131yordum:<\/p>\n

\n<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">\n  Buton\n<\/button>\n<\/code><\/pre>\n
G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, tek bir buton i\u00e7in bile \u00e7ok say\u0131da s\u0131n\u0131f kullan\u0131yordum.  Bu durum,  projemin genel CSS kod taban\u0131n\u0131 \u015fi\u015firiyordu.  Sonras\u0131nda ise,  bu yakla\u015f\u0131m\u0131n s\u00fcrd\u00fcr\u00fclebilir olmad\u0131\u011f\u0131n\u0131 fark ettim.<\/p>\n
Do\u011fru Yakla\u015f\u0131m: Bile\u015fen Odakl\u0131 Geli\u015ftirme<\/h2>\n
Daha sonra,  bile\u015fen odakl\u0131 bir yakla\u015f\u0131m benimsedim ve bu durum benim i\u00e7in her \u015feyi de\u011fi\u015ftirdi.  Art\u0131k,  benzer i\u015flevlere sahip \u00f6\u011feler i\u00e7in tekrar kullan\u0131labilir bile\u015fenler olu\u015fturuyorum.  Bu bile\u015fenler,  \u00f6zel olarak tan\u0131mlanm\u0131\u015f s\u0131n\u0131flar k\u00fcmesiyle birlikte geliyor.  Bu sayede,  her bile\u015fen i\u00e7in ayr\u0131 ayr\u0131 s\u0131n\u0131flar belirlemek zorunda kalm\u0131yorum. Bu ayn\u0131 zamanda, stil tutarl\u0131l\u0131\u011f\u0131n\u0131 sa\u011flamada da b\u00fcy\u00fck kolayl\u0131k sa\u011fl\u0131yor.<\/p>\n
\u00d6rne\u011fin, yukar\u0131daki buton i\u00e7in,  \u015f\u00f6yle bir bile\u015fen olu\u015fturabilirim:<\/p>\n
\n<button class="button">Buton<\/button>\n<\/code><\/pre>\n
Ve CSS’imde de:<\/p>\n
\n.button {\n  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;\n}\n<\/code><\/pre>\n
Bu yakla\u015f\u0131m sayesinde,  kodum daha temiz, daha okunabilir ve daha s\u00fcrd\u00fcr\u00fclebilir hale geldi.  Ayr\u0131ca,  ayn\u0131 bile\u015feni farkl\u0131 sayfalarda tekrar tekrar kullanarak,  geli\u015ftirme s\u00fcrecimi de \u00f6nemli \u00f6l\u00e7\u00fcde h\u0131zland\u0131rd\u0131m.<\/p>\n
\u00d6nemli \u0130pu\u00e7lar\u0131<\/h2>\n
Tailwind CSS’i verimli kullanmak i\u00e7in \u015funlara dikkat etmelisiniz: <\/p>\n