CSS / tailwindcss : rtl, ltr text-reverse problem

Doing :

While configuring the chat page, I wanted the chat bubbles to be on either side using 'rtl', 'ltr'.

<div
      className={`grid w-full grid-cols-[40px_1fr] gap-3 mx-auto`}
      style={{ direction: `${isSender ? 'rtl' : 'ltr'}` }}
    >
      <div>
        <Avatar
          alt='user Image'
          img={isSender ? senderImage! : receiverImage}
          rounded
        />
      </div>

      <div className='flex flex-col items-start justify-center'>
        <div className='flex items-center gap-2 mb-2 text-sm'>
          <span className='font-medium'>{isSender ? 'You' : receiverName}</span>
          <span className='text-sx text-gray-500 opacity-80'>
            {fromNow(time)}
          </span>
        </div>

        {messageImage && (
          <div className='overflow-hidden rounded-md mx-[0.6rem] max-w-[80%]'>
            <Image src={messageImage} width={300} height={300} alt='' />
          </div>
        )}

        {messageText && (
          <div
            className={`p-2 break-all text-white rounded-lg ${
              isSender
                ? 'bg-orange-500 rounded-tr-none'
                : 'bg-gray-400 rounded-tl-none'
            }`}
          >
            <p>{messageText}</p>
          </div>
        )}
      </div>
    </div>

problem:

The results were as follows.

Why:

The issue you are facing seems to be related to the style attribute where you set the direction based on the isSender prop. The problem is that the direction is set to "rtl" when isSender is true, which causes the text to be displayed in reverse order (right-to-left).

To fix this, you can use CSS flexbox to handle the alignment and ordering of the elements inside the grid without changing the text direction.

Solvement:

<div className={`grid w-full grid-cols-[40px_1fr] gap-3 mx-auto`}>
  <div>
    <Avatar
      alt='user Image'
      img={isSender ? senderImage : receiverImage}
      rounded
    />
  </div>

  <div
    className={`flex flex-col items-${isSender ? 'end' : 'start'} justify-center`}
  >
    <div className='flex items-center gap-2 mb-2 text-sm'>
      <span className='font-medium'>{isSender ? 'You' : receiverName}</span>
      <span className='text-sx text-gray-500 opacity-80'>{fromNow(time)}</span>
    </div>

    {messageImage && (
      <div className='overflow-hidden rounded-md mx-[0.6rem] max-w-[80%]'>
        <Image src={messageImage} width={300} height={300} alt='' />
      </div>
    )}

    {messageText && (
      <div
        className={`p-2 break-all text-white rounded-lg ${
          isSender
            ? 'bg-orange-500 rounded-tr-none'
            : 'bg-gray-400 rounded-tl-none'
        }`}
      >
        <p>{messageText}</p>
      </div>
    )}
  </div>
</div>