{"id":28189,"date":"2025-08-24T17:00:21","date_gmt":"2025-08-24T14:00:21","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/"},"modified":"2025-08-24T17:00:21","modified_gmt":"2025-08-24T14:00:21","slug":"tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/","title":{"rendered":"Tailwind CSS v4&#8217;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)"},"content":{"rendered":"<p>Tailwind CSS v4&#8217;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)<\/p>\n<p>Tailwind CSS&#8217;in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in harika bir f\u0131rsat sunar. Ancak, bir\u00e7ok projede ayn\u0131 renk paletleri, tipografiler veya stil \u00f6\u011felerini tekrar tekrar kullanmak gerekebilir. \u0130\u015fte tam bu noktada @custom-variant devreye girerek i\u015finizi kolayla\u015ft\u0131r\u0131yor ve zamandan tasarruf etmenizi sa\u011fl\u0131yor. Bu makalede, Tailwind CSS v4&#8217;te @custom-variant kullanarak \u00f6zel temalar nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz.  Haz\u0131rsan\u0131z, dalal\u0131m!<\/p>\n<h2>Tailwind CSS ve \u00d6zelle\u015ftirme: Temel Kavramlar<\/h2>\n<p>Tailwind CSS, \u00f6nceden tan\u0131mlanm\u0131\u015f bir dizi CSS utility s\u0131n\u0131f\u0131 sunan bir framework&#8217;t\u00fcr. Bu s\u0131n\u0131flar\u0131 HTML kodunuza ekleyerek, stilleme i\u015flemlerini h\u0131zl\u0131 ve kolay bir \u015fekilde ger\u00e7ekle\u015ftirebilirsiniz.  Ancak, varsay\u0131lan olarak gelen s\u0131n\u0131flardan s\u0131k\u0131ld\u0131\u011f\u0131n\u0131zda veya projenizin \u00f6zel ihtiya\u00e7lar\u0131na g\u00f6re \u00f6zelle\u015ftirmeler yapman\u0131z gerekti\u011finde, Tailwind&#8217;in g\u00fc\u00e7l\u00fc \u00f6zelle\u015ftirme \u00f6zelliklerinden yararlanabilirsiniz.  Bu \u00f6zelle\u015ftirmeler, yeni renkler tan\u0131mlamaktan, var olan s\u0131n\u0131flar\u0131 de\u011fi\u015ftirmeye, hatta tamamen yeni s\u0131n\u0131flar olu\u015fturmaya kadar geni\u015f bir yelpazede yer al\u0131r.  @custom-variant, bu \u00f6zelle\u015ftirme se\u00e7eneklerinin en g\u00fc\u00e7l\u00fc ve esneklerinden birisidir.  \u00d6ncelikle, Tailwind&#8217;in yap\u0131land\u0131rmas\u0131n\u0131 ve  <code>tailwind.config.js<\/code> dosyas\u0131n\u0131n \u00f6nemini anlaman\u0131z gerekmektedir.  Bu dosya, Tailwind&#8217;i projenize entegre ederken \u00f6zelle\u015ftirmelerinizin yap\u0131ld\u0131\u011f\u0131 merkez noktad\u0131r.  Daha fazla bilgi i\u00e7in Fatih Soysal&#8217;\u0131n (https:\/\/fatihsoysal.com) blog yaz\u0131lar\u0131n\u0131 inceleyebilirsiniz.<\/p>\n<h2>@custom-variant ile \u00d6zelle\u015ftirilmi\u015f Temalar Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>  @custom-variant, Tailwind&#8217;in \u00f6zelle\u015ftirme sisteminin kalbinde yer al\u0131r.  Bu direktif, mevcut utility s\u0131n\u0131flar\u0131n\u0131 geni\u015fleterek yeni varyasyonlar olu\u015fturman\u0131za olanak tan\u0131r.  \u00d6rne\u011fin, varsay\u0131lan <code>bg-blue-500<\/code> s\u0131n\u0131f\u0131n\u0131, projeniz i\u00e7in \u00f6zel bir mavi tonu olan <code>bg-ocean-blue<\/code>  olarak de\u011fi\u015ftirebilirsiniz.  Bu sayede,  projenizin t\u00fcm\u00fcnde tutarl\u0131 bir renk \u015femas\u0131 kullan\u0131rken, ayn\u0131 zamanda varsay\u0131lan Tailwind temalar\u0131ndan ayr\u0131\u015fabilirsiniz.  Bir \u00f6rnek verelim: <code>tailwind.config.js<\/code> dosyan\u0131za a\u015fa\u011f\u0131daki kodu ekleyerek ba\u015flayabilirsiniz:<\/p>\n<pre><code class=\"language-javascript\">\/** @type {import(&#039;tailwindcss&#039;).Config} *\/\nmodule.exports = {\n  theme: {\n    extend: {\n      colors: {\n        &#039;ocean-blue&#039;: &#039;#007bff&#039;, \/\/ \u00d6zel mavi tonumuz\n        &#039;desert-sand&#039;: &#039;#f5f5dc&#039;, \/\/ \u00d6zel kum rengi\n      },\n    },\n  },\n  plugins: [],\n}<\/pre>\n<p><\/code><\/p>\n<p>Bu kod,  <code>ocean-blue<\/code> ve <code>desert-sand<\/code> ad\u0131nda iki yeni renk tan\u0131mlamaktad\u0131r.  \u015eimdi bu renkleri  @custom-variant ile kullanabiliriz.  A\u015fa\u011f\u0131daki \u00f6rnekte, <code>bg-ocean-blue<\/code> s\u0131n\u0131f\u0131n\u0131 nas\u0131l kullanabilece\u011finizi g\u00f6rebilirsiniz:<\/p>\n<pre><code class=\"language-html\"><div class=\"bg-ocean-blue p-4 text-white\">\n  Bu div, \u00f6zel mavi arka plana sahiptir.\n<\/div><\/pre>\n<p><\/code><\/p>\n<h2>Ger\u00e7ek D\u00fcnya Senaryolar\u0131: Vaka Analizi<\/h2>\n<p>\u015eimdi, @custom-variant kullan\u0131m\u0131n\u0131 daha somut bir \u015fekilde ele alal\u0131m.  Diyelim ki bir e-ticaret sitesi tasarl\u0131yorsunuz ve iki farkl\u0131 temaya ihtiyac\u0131n\u0131z var:  \"A\u00e7\u0131k Tema\" ve \"Koyu Tema\".  Bu temalar\u0131 @custom-variant kullanarak nas\u0131l olu\u015fturabilirsiniz? \u00d6ncelikle,  <code>tailwind.config.js<\/code> dosyan\u0131za, her tema i\u00e7in farkl\u0131 renkler ve stil ayarlar\u0131 eklemeniz gerekir.  Ard\u0131ndan, bu temalar\u0131 uygulayabilmek i\u00e7in bir JavaScript de\u011fi\u015fkeni kullanabilir ve bu de\u011fi\u015fkeni  CSS s\u0131n\u0131flar\u0131n\u0131 dinamik olarak eklemek i\u00e7in kullanabilirsiniz.  \u00d6rne\u011fin, kullan\u0131c\u0131 tercihlerine veya cihaz temas\u0131na g\u00f6re tema se\u00e7imini dinamik olarak ger\u00e7ekle\u015ftirebilirsiniz.  Bu \u015fekilde, kullan\u0131c\u0131 deneyimini ki\u015fiselle\u015ftirebilir ve her kullan\u0131c\u0131n\u0131n tercih etti\u011fi temay\u0131 sunabilirsiniz. Daha karma\u015f\u0131k senaryolarda, bu temalar\u0131 y\u00f6netmek i\u00e7in bir state y\u00f6netim k\u00fct\u00fcphanesi (\u00f6rne\u011fin, Zustand veya Context API) kullanman\u0131z gerekebilir.  Bu, daha b\u00fcy\u00fck ve daha karma\u015f\u0131k projelerde kodun okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131racakt\u0131r.<\/p>\n<h2>\u0130leri D\u00fczey Teknikler:  Dinamik Tema De\u011fi\u015fimi<\/h2>\n<p>\u00d6nceki \u00f6rneklerimiz statikti. Ancak ger\u00e7ek d\u00fcnya uygulamalar\u0131nda, kullan\u0131c\u0131n\u0131n temas\u0131n\u0131 dinamik olarak de\u011fi\u015ftirmesi gerekebilir. Bu,  JavaScript ve CSS de\u011fi\u015fkenleri kullanarak ger\u00e7ekle\u015ftirilebilir.  \u00d6rne\u011fin, bir toggle d\u00fc\u011fmesi kullanarak kullan\u0131c\u0131n\u0131n a\u00e7\u0131k ve koyu temalar aras\u0131nda ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flayabilirsiniz.  Bu toggle,  bir JavaScript fonksiyonunu tetikler ve bu fonksiyon,  <code>document.body<\/code>'ye dinamik olarak CSS s\u0131n\u0131flar\u0131 ekler veya kald\u0131r\u0131r.  \u00d6rne\u011fin,  kullan\u0131c\u0131 koyu temay\u0131 se\u00e7ti\u011finde, <code>dark<\/code> s\u0131n\u0131f\u0131n\u0131  <code>document.body<\/code>'ye ekleyebilirsiniz.  <code>tailwind.config.js<\/code> dosyan\u0131zda, <code>dark<\/code> s\u0131n\u0131f\u0131n\u0131  uygun renkler ve stiller ile tan\u0131mlaman\u0131z gerekecektir.  Bu y\u00f6ntem,  performans a\u00e7\u0131s\u0131ndan en verimli y\u00f6ntemlerden birisidir, \u00e7\u00fcnk\u00fc sayfan\u0131n yeniden y\u00fcklenmesini gerektirmez.<\/p>\n<h2>Performans Kar\u015f\u0131la\u015ft\u0131rmas\u0131:  Farkl\u0131 Yakla\u015f\u0131mlar<\/h2>\n<p>Dinamik tema de\u011fi\u015fikli\u011fi i\u00e7in birka\u00e7 farkl\u0131 y\u00f6ntem vard\u0131r.  Bunlar\u0131n performans\u0131n\u0131 kar\u015f\u0131la\u015ft\u0131ral\u0131m:<\/p>\n<table>\n<tr>\n<th>Y\u00f6ntem<\/th>\n<th>Performans<\/th>\n<th>Karma\u015f\u0131kl\u0131k<\/th>\n<\/tr>\n<tr>\n<td>CSS De\u011fi\u015fkenleri ve JavaScript<\/td>\n<td>Y\u00fcksek<\/td>\n<td>Orta<\/td>\n<\/tr>\n<tr>\n<td>Sayfa Yenilemesi<\/td>\n<td>D\u00fc\u015f\u00fck<\/td>\n<td>D\u00fc\u015f\u00fck<\/td>\n<\/tr>\n<tr>\n<td>\u00d6zel CSS S\u0131n\u0131flar\u0131<\/td>\n<td>Orta<\/td>\n<td>Y\u00fcksek<\/td>\n<\/tr>\n<\/table>\n<p>Yukar\u0131daki tabloda g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, CSS de\u011fi\u015fkenleri ve JavaScript kullanarak dinamik tema de\u011fi\u015fikli\u011fi en y\u00fcksek performans\u0131 sunar. Ancak, bu y\u00f6ntem daha karma\u015f\u0131k olabilir.  Sayfa yenilemesi en d\u00fc\u015f\u00fck performans\u0131 sunar ancak en basit y\u00f6ntemdir. \u00d6zel CSS s\u0131n\u0131flar\u0131 orta d\u00fczeyde performans ve karma\u015f\u0131kl\u0131k sunar.<\/p>\n<h2>G\u00fcvenlik Uyar\u0131lar\u0131<\/h2>\n<p>Dikkat: Dinamik tema de\u011fi\u015fikli\u011fi yaparken,  g\u00fcvenlik a\u00e7\u0131klar\u0131na dikkat etmelisiniz.  \u00d6zellikle,  kullan\u0131c\u0131 taraf\u0131ndan g\u00f6nderilen verileri do\u011frudan CSS s\u0131n\u0131flar\u0131n\u0131 olu\u015fturmak i\u00e7in kullan\u0131yorsan\u0131z,  Cross-Site Scripting (XSS) sald\u0131r\u0131lar\u0131na kar\u015f\u0131 korunman\u0131z \u00f6nemlidir.  Her zaman kullan\u0131c\u0131 giri\u015fi do\u011frulamal\u0131 ve g\u00fcvenli kodlama uygulamalar\u0131na uymal\u0131s\u0131n\u0131z.<\/p>\n<h2>\u00d6zet ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n<p>Bu makalede, Tailwind CSS v4'te @custom-variant kullanarak \u00f6zel temalar olu\u015fturman\u0131n temellerini ve ileri d\u00fczey tekniklerini ele ald\u0131k.  @custom-variant,  projeniz i\u00e7in \u00f6zel stil varyasyonlar\u0131 olu\u015fturman\u0131za ve kodunuzun okunabilirli\u011fini ve s\u00fcrd\u00fcr\u00fclebilirli\u011fini art\u0131rman\u0131za yard\u0131mc\u0131 olur.  Dinamik tema de\u011fi\u015fikli\u011fi i\u00e7in en verimli y\u00f6ntem,  CSS de\u011fi\u015fkenleri ve JavaScript kullanmakt\u0131r, ancak g\u00fcvenlik a\u00e7\u0131klar\u0131na dikkat etmek \u00f6nemlidir.  Daha fazla bilgi i\u00e7in Fatih Soysal'\u0131n (https:\/\/fatihsoysal.com) web sitesini ziyaret edebilirsiniz.<\/p>\n<h3>S\u0131k\u00e7a Sorulan Sorular<\/h3>\n<ul>\n<li><strong>@custom-variant'\u0131 nerede tan\u0131mlamal\u0131y\u0131m?<\/strong>  <code>tailwind.config.js<\/code> dosyas\u0131n\u0131n <code>theme.extend<\/code> b\u00f6l\u00fcm\u00fcnde.<\/li>\n<li><strong>Birden fazla \u00f6zel tema nas\u0131l olu\u015fturulur?<\/strong> Her tema i\u00e7in farkl\u0131 renkler ve stil ayarlar\u0131 tan\u0131mlayarak ve bunlar\u0131 JavaScript ile dinamik olarak uygulayarak.<\/li>\n<li><strong>Performans\u0131 nas\u0131l optimize edebilirim?<\/strong> CSS de\u011fi\u015fkenleri ve JavaScript kullanarak dinamik tema de\u011fi\u015fikli\u011fi yaparak.<\/li>\n<li><strong>G\u00fcvenlik a\u00e7\u0131klar\u0131ndan nas\u0131l ka\u00e7\u0131nabilirim?<\/strong> Kullan\u0131c\u0131 giri\u015fini do\u011frulayarak ve g\u00fcvenli kodlama uygulamalar\u0131na uyarak.<\/li>\n<li><strong>Varsay\u0131lan Tailwind s\u0131n\u0131flar\u0131n\u0131 nas\u0131l ge\u00e7ersiz k\u0131lar\u0131m?<\/strong>  <code>!important<\/code> fla\u011f\u0131n\u0131 kullanarak veya daha spesifik CSS s\u0131n\u0131flar\u0131 tan\u0131mlayarak.<\/li>\n<\/ul>\n<p>Yazar: Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"Tailwind CSS v4&#8217;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2) Tailwind CSS&#8217;in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in&hellip;","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-28189","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tailwind CSS v4&#039;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)<\/title>\n<meta name=\"description\" content=\"Tailwind CSS&#039;in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in harika bir f\u0131rsat sunar. Ancak, bir\u00e7ok projede ayn\u0131 renk paletleri, tipografiler veya stil \u00f6\u011felerini tekrar tekrar kullanmak gerekebilir. \u0130\u015fte tam bu noktada @custom-variant devreye girerek i\u015finizi kolayla\u015ft\u0131r\u0131yor ve zamandan tasarruf etmenizi sa\u011fl\u0131yor. Bu makalede, Tailwind CSS v4&#039;te @custom-variant kullanarak \u00f6zel temalar nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Haz\u0131rsan\u0131z, dalal\u0131m!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS v4&#039;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)\" \/>\n<meta property=\"og:description\" content=\"Tailwind CSS&#039;in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in harika bir f\u0131rsat sunar. Ancak, bir\u00e7ok projede ayn\u0131 renk paletleri, tipografiler veya stil \u00f6\u011felerini tekrar tekrar kullanmak gerekebilir. \u0130\u015fte tam bu noktada @custom-variant devreye girerek i\u015finizi kolayla\u015ft\u0131r\u0131yor ve zamandan tasarruf etmenizi sa\u011fl\u0131yor. Bu makalede, Tailwind CSS v4&#039;te @custom-variant kullanarak \u00f6zel temalar nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Haz\u0131rsan\u0131z, dalal\u0131m!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-08-24T14:00:21+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Tailwind CSS v4&#8217;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)\",\"datePublished\":\"2025-08-24T14:00:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/\"},\"wordCount\":1103,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/\",\"name\":\"Tailwind CSS v4'te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-08-24T14:00:21+00:00\",\"description\":\"Tailwind CSS'in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in harika bir f\u0131rsat sunar. Ancak, bir\u00e7ok projede ayn\u0131 renk paletleri, tipografiler veya stil \u00f6\u011felerini tekrar tekrar kullanmak gerekebilir. \u0130\u015fte tam bu noktada @custom-variant devreye girerek i\u015finizi kolayla\u015ft\u0131r\u0131yor ve zamandan tasarruf etmenizi sa\u011fl\u0131yor. Bu makalede, Tailwind CSS v4'te @custom-variant kullanarak \u00f6zel temalar nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Haz\u0131rsan\u0131z, dalal\u0131m!\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS v4&#8217;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Tailwind CSS v4'te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)","description":"Tailwind CSS'in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in harika bir f\u0131rsat sunar. Ancak, bir\u00e7ok projede ayn\u0131 renk paletleri, tipografiler veya stil \u00f6\u011felerini tekrar tekrar kullanmak gerekebilir. \u0130\u015fte tam bu noktada @custom-variant devreye girerek i\u015finizi kolayla\u015ft\u0131r\u0131yor ve zamandan tasarruf etmenizi sa\u011fl\u0131yor. Bu makalede, Tailwind CSS v4'te @custom-variant kullanarak \u00f6zel temalar nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Haz\u0131rsan\u0131z, dalal\u0131m!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/","og_locale":"tr_TR","og_type":"article","og_title":"Tailwind CSS v4'te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)","og_description":"Tailwind CSS'in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in harika bir f\u0131rsat sunar. Ancak, bir\u00e7ok projede ayn\u0131 renk paletleri, tipografiler veya stil \u00f6\u011felerini tekrar tekrar kullanmak gerekebilir. \u0130\u015fte tam bu noktada @custom-variant devreye girerek i\u015finizi kolayla\u015ft\u0131r\u0131yor ve zamandan tasarruf etmenizi sa\u011fl\u0131yor. Bu makalede, Tailwind CSS v4'te @custom-variant kullanarak \u00f6zel temalar nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Haz\u0131rsan\u0131z, dalal\u0131m!","og_url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-08-24T14:00:21+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"6 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Tailwind CSS v4&#8217;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)","datePublished":"2025-08-24T14:00:21+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/"},"wordCount":1103,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/","url":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/","name":"Tailwind CSS v4'te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-08-24T14:00:21+00:00","description":"Tailwind CSS'in \u00f6zelle\u015ftirilebilir yap\u0131s\u0131, projelerinize benzersiz bir g\u00f6r\u00fcn\u00fcm kazand\u0131rmak i\u00e7in harika bir f\u0131rsat sunar. Ancak, bir\u00e7ok projede ayn\u0131 renk paletleri, tipografiler veya stil \u00f6\u011felerini tekrar tekrar kullanmak gerekebilir. \u0130\u015fte tam bu noktada @custom-variant devreye girerek i\u015finizi kolayla\u015ft\u0131r\u0131yor ve zamandan tasarruf etmenizi sa\u011fl\u0131yor. Bu makalede, Tailwind CSS v4'te @custom-variant kullanarak \u00f6zel temalar nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Haz\u0131rsan\u0131z, dalal\u0131m!","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/tailwind-css-v4te-ozel-temalar-olusturma-custom-variant-1-2\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS v4&#8217;te \u00d6zel Temalar Olu\u015fturma: @custom-variant (1\/2)"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/28189","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=28189"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/28189\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=28189"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=28189"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=28189"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}