Is there any way to short the conditional class Tailwind?

[IRediTOTO]

Hi I have a button like this. Yes className so longggggggggggggggg because I just want to add cursor-not-allowed

<button
     disabled={loading}
     type="submit"
     className={loading?"w-1/4 ml-2 cursor-not-allowed group relative  flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-gray-900 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out":"w-1/4 ml-2 group relative  flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-gray-900 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out"}>
                                 {loading && (
                                    <span class="absolute left-0 inset-y-0 flex items-center pl-3">
                                       <LoadingSmallIcon />
                                    </span>
                                 )}
                                 Auto create
                              </button>

Is this will work?
w-1/4 ml-2 ${loading&&"cursor-not-allowed"} group relative flex justify-center items-center py-2 px-4 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-gray-900 hover:bg-indigo-500 focus:outline-none focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition duration-150 ease-in-out

[alexanderbluhm]

Simply do

<button ... className={`${loading && "cursor-not-allowed"} w-1/4 ml-2 ...`} ...>

Nevertheless, nested classes based on multiple conditions are hard to read.
Robin have a cool alternative for this: https://media.discordapp.net/attachments/682240764977217569/742781068662407168/unknown.png
Then you can use

<button className={classNames("w-1/4 ml-2 ...", loading && 'cursor-not-allowed', primary && 'bg-blue-500 text-white ...')}></button>

[IRediTOTO]

just worry purge css cant scan it. :\

[alexanderbluhm]

@IRediTOTO As long as you have the class names written down anywhere it should be no problem.

[zaydek]

One thing you can do, since you’re using React, is create a component so you can nest classes one by one:

const Apply = ({ className, children }) => (
  React.cloneElement(children, {
    ...children.props,
    className: className +  (!children.props.className ? "" : " " + children.props.className),
  })
)

<Apply className="<string>">
  <Apply className={/* Can be expression */}>
    <Apply className="<string>">
      {/* You code here */}
    </Apply>
  </Apply>
</Apply>

I haven’t tested this but in theory you’re just breaking className up.