#Tailwind Conditional classes

21 messages · Page 1 of 1 (latest)

sterile trout
#

So, I saw this url: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth

const sizes = {
  md: 'px-4 py-2 rounded-md text-base',
  lg: 'px-5 py-3 rounded-lg text-lg',
}

const colors = {
  indigo: 'bg-indigo-500 hover:bg-indigo-600 text-white',
  cyan: 'bg-cyan-600 hover:bg-cyan-700 text-white',
}

export default function Button({ color, size, children }) {
  let colorClasses = colors[color]
  let sizeClasses = sizes[size]

  return (
    <button type="button" className={`font-bold ${sizeClasses} ${colorClasses}`}>
      {children}
    </button>
  )
}
glossy pivotBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

sterile trout
#

In the above code provided in the web I'll use the Button component, however, how do I exactly have to provide the size there, because I need it to be responsive

latent scaffold
#

because it's an object, you can reference the key to it. Objects can reference with a key and the key can be a string. So just use a string ^^

sterile trout
#

I mean if I do this:

<Button color="indigo" size="sm">
...
</Button>

I'll only be able to refer to 1 size acc to this code

floral gulch
#

What are you expecting?

sterile trout
floral gulch
sterile trout
floral gulch
#

I'm confused, so if sm is defined, you're getting the class. what else do you need thinq

sterile trout
floral gulch
#

o.0

#

so you want to use tailwind screen breakpoints

#

and apply those classes

#

?

sterile trout
#

currently I use this

code.png
floral gulch
sterile trout
#

because @latent scaffold told me I could do something like this: #discussions message

floral gulch
#

he did, but he never said you could that method for responsiveness, but yeah cn is good for conditional classNames

floral gulch
#

@sterile trout I think you should close this thread