Question 244510 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Colors fetched from json don't work in Tailwind

I’m working on a React project that fetches data from a server and displays it. The colors are kept in the json, so I tried to set them with tailwind:

...
const bgcolor = `bg-[${card.color}]`
const textcolor = `text-[${card.color}]`

return (
    <div key={card.id} className={`w-[300px] ${bgcolor} bg-opacity-30 rounded-lg shadow py-6 px-6 text-white inline-block`}>
        <p className='text-lg font-bold'>{card.subject}</p>
        <p className='text-md font-semibold'>{card.task_name}</p>
        <p>{formattedDate}</p>
        <p>{formattedTime}</p>
        <p className={`${textcolor}`}>{card.task_info_link}</p>
        <p className={`${textcolor}`}>{card.task_submission_link}</p>
        <p className={`${textcolor}`}>{card.task_enrollment_link}</p>
    </div>
        )

But this doesn’t seem to work.

Here’s an example of the json:

[
    {
        "id": 1,
        "subject": "subject",
        "task_name": "task_name",
        "color": "#F64D4D",
        "deadline": "2023-09-25T15:30:00.000Z",
        "task_info_link": "https://...",
        "task_submission_link": "https://...",
        "task_enrollment_link": "https://..."
    },

The interesting thing about it is that #F64D4D the only color (I’ve also in json: #F6D14D, #CA4DF6; but none of them seem to work) that appears BUT only in textcolor (the bg-color doesn’t)

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Turns out Tailwind can't do this. I've managed to achieve the same result using style property:

    <div key={card.id} style={{backgroundColor: `${card.color}30`, backgroundColorOpacity: 30}} className={`w-[300px] bg-opacity-30 rounded-lg shadow py-6 px-6 text-white inline-block`}>
    ...
    <p style={{color: `${card.color}`}}className="">{card.task_info_link}</p>
    <p style={{color: `${card.color}`}}className="">{card.task_submission_link}</p>
    <p style={{color: `${card.color}`}}className="">{card.task_enrollment_link}</p>
</div>

  2. 0

    You are setting a class like text-#F64D4D, those classes don’t exist, as you can see in the list of Tailwind Text Color classes.

    You could set it as a style yourself:

    <p style={{ backgroundColor: card.color, color: card.color }}>{card.task_info_link}</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search