Problemas com renderização condicional (React + Tailwind)

Olá, Kellyson! Como vai?

Pelo seu código, parece que o problema está na classe firstImageBorder que você está adicionando condicionalmente. A classe xl:rounded-l-2xl não está sendo aplicada corretamente quando a classe rounded-2xl já está presente.

Uma solução possível para resolver esse problema de especificidade é utilizar a função classnames para combinar as classes de forma dinâmica. Você pode instalá-la através do npm com o comando npm install classnames e importá-la no seu arquivo:

import classNames from "classnames";

Em seguida, você pode utilizar a função classNames para combinar as classes da seguinte forma:

const firstImageBorder = classNames({
  "xl:rounded-l-2xl": isList && isFirstImage,
  "rounded-2xl": !isList || !isFirstImage
});

Dessa forma, a classe xl:rounded-l-2xl será aplicada apenas quando isList for verdadeiro e isFirstImage for verdadeiro. Caso contrário, apenas a classe rounded-2xl será aplicada.

*Você pode entrar na comunidade da Alura no Discord para discutir com outras pessoas sobre o seu projeto! Veja nesse artigo algumas dicas sobre a comunidade.

Espero ter ajudado. Fico à diposição!

Abraço!

Oi Nícolas! Muito obrigado pela ajuda, mas infelizmente a sua solução não funcionou :/ . Quando "lg:rounded-l-2xl" é adicionada, a primeira imagem não fica com o estilo desejado, mas com o estilo da classe "rounded-2xl"! Parece que tem algo sobescrevendo o CSS mas eu não sei o que é.

Código do componente ImageRenderer atualizado:

import React from "react";
import type { Image } from "../../../Types/Image";
import alts from "./alts.json";
import classNames from "classnames";

interface Props {
  customImage?: Image;
  isList: boolean | undefined;
  index: number | undefined;
}

export const ImageRenderer: React.FC<Props> = ({
  customImage,
  isList,
  index,
}) => {
  const { url, alt } = customImage ?? {};
  const { summerAlt, borealAlt } = alts;

  const isFirstImage = index === 0;
  const hasCustomImage = Boolean(customImage);
  const hasAlt = Boolean(alt);

  const imageBorder = classNames({
    "xl:rounded-l-2xl": isList && isFirstImage,
    "rounded-2xl": !isList || !isFirstImage,
  });

  return (
    <div className="flex justify-center h-full">
      {hasCustomImage ? (
        <div className="align-rendered-image">
          <div
            style={{ backgroundImage: `url(${url})` }}
            className={`rendered-card-image ${imageBorder}`}
          />
          {hasAlt && <span className="sr-only">{alt}</span>}
        </div>
      ) : (
        <div className="align-rendered-image">
          <div className="rendered-default-image" />

          <span className="sr-only dark:hidden">{summerAlt}</span>
          <span className="hidden dark:sr-only">{borealAlt}</span>
        </div>
      )}
    </div>
  );
};

Repositório: https://github.com/kellysondias/codechella/blob/main/src/components/Card/ImageRenderer/index.tsx