Tailwind Class'ları Değişkenlerle Kullanıldığı Zaman Çalışmıyorlar

DrShahinstein · Mayıs 9, 2022, 8:05öö

Merhabalar.
React ve Tailwind kullanarak Türkçe’deki fiil çekimleriyle alakalı bir minigame yaptım. Amacı kullanıcının Türkçe’deki fiil çekimleriyle daha tanışık hale gelmesini sağlamak, fiilleri çekimleme ile ilgili yardımcı olmak. Buradan deneyimleyebilirsiniz ve elbette burada da GitHub reposu var.
Karşılaştığım problemi şöyle anlatayım… Öncelikle <Button> adında bir componentimiz var.

github.com

1TaylanOzturk/verbingo/blob/master/src/components/Button.jsx#L13

      
        
            import {
              coordination,
              conjugations,
              random,
              modes,
              persons,
              stems,
            } from "../utils";
            
            
function Button(props) {
              const colorVariant = props.colorVariant;
              const classList = [
                props.className,
                `bg-${colorVariant}-500`,
                `hover:bg-${colorVariant}-400`,
                "text-white",
                "font-bold",
                "py-2",
                "px-4",
                "border-b-4",
                `border-${colorVariant}-700`,

Bu component'te dikkatinizi çekmek istediğim nokta colorVariant'ı bir prop olarak alıyor olmam ve daha sonra bu değeri classList array'inde tailwind class'ları oluşturmak için kullanıyor olmam.

github.com

1TaylanOzturk/verbingo/blob/master/src/App.js#L68

      
        
                      <Instruction>{person}</Instruction>
                    </Flex>
                    <Flex>
                      <Word>{stem}</Word>
                    </Flex>
                    <hr className="w-[100%] lg:w-[40%] mr-auto ml-auto" />
                    <Panel {...panelProps}>
                      <Button className="mr-auto" skip colorVariant="yellow">
                        Skip
                      </Button>
                      <Button className="btn-check" check colorVariant="green">
                        Check
                      </Button>
                    </Panel>
                  </div>
                  <Modal visible={isModalVisible} {...modalProps} />
                </>
              );
            }
            
            
export default App;

Ve App.js'te bu <Button> component'ini bu şekilde kullanıyorum. colorVariant olarak "green" değerini veriyorum. Aynı component'i hemen yukarıda bir kez daha kullanıyorum, ona da "yellow" vermişim.

Şimdi problem şöyle…
Beklediğim şey colorVariant'a verdiğim değere göre butonların renklerinin değişmesi. Mesela bir <Button>'un colorVariant prop'una "green" değerini geçtiğimde classList'in şöyle görünüyor olması lazım:

const classList = [
    props.className,
    `bg-green-500`,
    `hover:bg-green-400`,
    "text-white",
    "font-bold",
    "py-2",
    "px-4",
    "border-b-4",
    `border-green-700`,
    `hover:border-green-500`,
    "rounded",
  ];

Tabii daha sonra bu classList'in içerisindeki tailwind class'larını component'in return edeceği elemente props olarak geçiyorum:

github.com

1TaylanOzturk/verbingo/blob/master/src/components/Button.jsx#L72

      
        
                  }
                  skip();
                }
                if (props.skip) {
                  skip();
                }
              };
            
            
  return (
                <motion.button
                  className={classList.join(" ")}
                  id={props.id}
                  onClick={clickHandler}
                  whileTap={{ scale: 1.2 }}
                >
                  {props.children}
                </motion.button>
              );
            }
            
            
export default Button;

classList içerisindeki bu Tailwind class'larının valid class'lar olduğunu da göz önünde bulundurduğumuz zaman yeşil bir buton elde etmemiz gerekiyor. Beklediğim şey bu. Aynı şekilde "yellow" değerini verdiğim butonun da sarı bir buton olmasını bekliyorum. Fakat sonuç beklediğim gibi olmuyor:

Bunun sebebini merak ediyorum ve en ilginç kısma daha gelmedim. Anlatıyorum: Eğer Tailwind class'larını bir değişken aracılığıyla formatlamadan, direkt olarak, önce green sonra yellow olarak yazdıktan sonra tekrar bir değişken ile formatlayarak yazdığım zaman renkler düzeliyor. Bu cümle biraz karmaşık oldu fakat bunu bir GIF ile anlatabilirim:
gif

Dolayısıyla beklediğim buradaki gibi butonlar iken:

Buradaki gibi butonlarla karşılaşıyorum:

Çözmek için bir süre bir şeyler kurcaladım (aslında çok da bir şey kurcalayamadım) fakat bir faydası olmadı. Daha sonra StackOverflow’da benzer bir konu gördüm. 1k görüntülenmesi var ama kimse cevap yazmamış.

Durum bu şekilde. Sizce bu sorun neyden kaynaklanıyor?

IsmetFatihGuclu · Mayıs 10, 2022, 4:34ös

Öncelikle Merhaba
Attığınız GIF’te bg-${colorVariant}-500 yerine bg-green-500 ve ya bg-yellow-500 kullanmalısınız. Çünkü Tailwind dinamik olarak oluşturulmuş sınıf adlarını algılamaz.
Tailwind Dinamik Sınıflar
Tailwind Sınıf Tespiti

DrShahinstein · Mayıs 10, 2022, 5:51ös

github.com

DrShahinstein/verbingo/blob/master/src/components/Button.jsx

import React from "react";
import { motion } from "framer-motion";
import {
  coordination,
  conjugations,
  random,
  modes,
  persons,
  stems,
  imperativePersons,
} from "../utils";

function Button(props) {
  const colorVariant = props.colorVariant;
  const colors = [];
  const classes = [
    props.className,
    "text-white",
    "font-bold",
    "py-2",

This file has been truncated. show original

Attığım son committe de bahsettiğim gibi bu sorun çözüldü. Nasıl çözdüğüme /src/components/Button.jsx’ten bakabilirsiniz. Çözmekte çok bir şey yok zaten, olay sadece string formatlamadan Tailwind class’ları kullanmak: Asıl mesele bu problemin kaynağıydı. Pekala sorun çözülmüş oldu ancak bunun karşılığı olarak kod da bir tık kirlileşti.
Sorunun çözülmesine rağmen merak kapımın açık kalacağından korkuyordum fakat öğrendim ki Tailwind’in signature’u (signature denir herhalde xd) zaten böyleymiş. Ben Bootstrap’e alışık olduğum için kafamda string formatlayarak Tailwind class’ları kullanabileceğimi varsaymıştım ve bu durumu beklenmedik türden nitelendirmiştim.